如何使用排气图限制 api 调用？

Question

我正在尝试使 exhaustMap 工作，但我做不到。我希望能够限制 api 调用的数量。现在，当我搜索并加载它时，我在输入中键入另一个值，代码会进行新的 api 调用。我想限制这个，这样就不会发生了。

  loadItems = () => {
    const element: any = document.getElementById('type-ahead')

    fromEvent(element, 'keyup')
      .pipe(
        debounceTime(200),
        map((e: any) => e.target.value),
        distinctUntilChanged(),
        exhaustMap(() => interval(1000).pipe(take(10))), // doesnt work, i dont even know why im writing 10 here.
        switchMap(this.requestProducts),
        tap((data: any) => {
          this.page = 1
          this.parsedData = data
          this.onViewPage()
        })
      )
      .subscribe();
  }

Answer 1

如果我正确理解了您的要求，并且您希望忽略所有 keyup 事件，直到完成当前事件的 HTTP API 请求，您只需切换 switchMap 与 exhaustMap 并删除当前 exhaustMap.

loadItems = () => {
  const element: any = document.getElementById('type-ahead')

  fromEvent(element, 'keyup')
    .pipe(
      debounceTime(200),
      map((e: any) => e.target.value),
      exhaustMap(this.requestProducts.bind(this)),      // <-- use `bind(this)` if you use `this` in `requestProducts()` to denote class member variables
      tap((data: any) => {
        this.page = 1;
        this.parsedData = data;
        this.onViewPage();
      })
    )
    .subscribe();
}

您会发现差异 b/n 不同的 RxJS 高阶映射运算符。
不鼓励在 Angular 中使用 document.getElementById()，因为它会搜索整个 DOM 应用程序（注意 Angular 应用程序是 SPA），而不是查找仅在特定组件中。有多种选择：
- 参考
- 使用模板引用变量+ViewChild+ElementRef+RxJSfromEvent.

工作示例：Stackblitz

编辑 1：包括工作示例

如何使用排气图限制 api 调用？

How do I limit the api calls with exhaust map?

rxjs

angular