如何用角度跳过过时的响应？

Question

在 angular（不是 angularjs）中取消对服务器的过时请求的最佳模式是什么？

1. 用户发起搜索请求 #1
2. 用户发起搜索请求#2
3. 服务器返回搜索响应 #2
4. 服务器返回搜索响应 #1

因此，我们遇到了 UI 中的请求和响应不匹配的错误。

例如，Typeahead 具有 typeahead-wait-ms 属性，该属性在一定程度上有所帮助，但我正在寻找更通用的解决方案。

是否有简单的模式来取消请求？或者将请求 ID 与最新的比较？

PS：我们使用的是 HttpClient，因此我们的调用内部看起来类似于以下 GET 实现：

protected get<T>(url: string, request: any = {}, options: any = {}): Observable<T> {
    request.rnd = (new Date()).getTime();

    return this.http.get<T>(url, {headers: this.buildHeaders(options),
        responseType: 'json', params: request})
    .pipe(
            catchError((err: HttpErrorResponse) => {
                ... error Handlig
            })
        );
}

Answer 1

通常看起来像这样，如果您使用的是响应式表单，并且您的字符串源是表单控件：

searchSource = new FormControl('')
search(searchString: string) {
  // returns observable of search logic
}
ngOnInit() {
  this.searchSource.valueChanges.pipe(
    switchMap(toSearch => this.search(toSearch)) // switchmap automatically cancels old requests on new values
  ).subscribe(results => {
    // always results for LAST emitted value
  })  
}

关键是在您感兴趣的值的来源处使用switchMap，以便您只查看最新值的结果。