javascript - Typescript Angular HTTP 请求仅获取最后结果

Question

确保我的 Angular HTTP 请求仅返回最新响应数据的“最佳”(常见)方法是什么。 (我正在使用 Angulars HttpClient)

假设用户在返回前一个请求的响应之前提交了一个新请求。我的后端需要更多时间来处理第一个请求，因此第二个请求在第一个请求之前返回 -> View 更新，然后第一个请求返回。现在 View 已使用旧数据进行更新。这显然不是我想要的。

我找到了取消请求的解决方案，但这真的是唯一的方法吗？是否有任何内置功能可以实现这一目标？

if ( this.subscription ) {
   this.subscription.unsubscribe();
}
this.subscription = this.http.get( 'myAPI' )
 .subscribe(resp => {
  // handle result ...
});

我知道有 switchMap() 运算符，它只返回最新数据，但据我所知，你只能在可观察的内部使用它。就我而言，我没有观察到任何输入变化。我只是通过 HTML 模板中的 (ngSubmit)="doRequest()"指令调用表单提交上的函数。

// get called on submit form
doRequest() {
 this.http.get('myAPI')
  .subscribe(resp => {
    // handle result ...
  });
}

有没有办法使用 switchMap 运算符或者您还有其他解决方案吗？感谢您抽出宝贵时间:)

PS:当然，在我的实际项目中，我有一个 api 服务类，它具有不同的函数来执行请求并仅返回 http 响应可观察值。所以我在 doRequest() 函数中订阅了这样一个可观察的内容。

Answer 1

您只需将点击/请求设置为可以关闭的流...用户的请求/点击是您可以观察并使用react的事件流。

private requestSource = new Subject();

request() {
  this.requestSource.next();
}

ngOnInit() {
  this.requestSource.switchMap(req => this.http.get('myApi'))
                       .subscribe(response => console.log(response, "latest"));
}

现代客户端编程的经验法则:一切都是流，即使它看起来不像流。

编辑:如果是 rxjs 6 或最新版本，请使用上述代码添加 pipe 运算符。

this.requestSource.pipe(switchMap(...));