Typescript Angular HTTP请求仅获得最后一个结果

Question

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

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

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

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

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

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

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

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

Answer 1

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

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(...));