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()操作符，它只返回最新的数据，但据我所知，你只能在 observable 中使用它。就我而言，我没有观察到任何输入变化。我只是通过 HTML 模板中的 (ngSubmit)="doRequest()" 指令在表单提交上调用一个函数。

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

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

PS：当然，在我的真实项目中，我有一个 api 服务类，它具有不同的功能来处理请求，并且只返回 http 响应可观察值。所以我在 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(...));