如何将最新的请求数据分配给角度表

Question

我在一个页面组件中有 3 个选项卡。一旦我们点击选项卡，将选项卡键传递给API以根据选项卡键获取过滤数据。

this.taskService.getAllTasks(this.tabKey).subscribe((data: Tasks[]) => {
  this.taskList = data;
});

当选项卡快速切换时，会使用不同的键调用相同的 API，并且所有 API 调用都会执行而不会取消，并且每个响应数据都会分配给任务列表变量。如何通过取消旧请求来将最新请求数据分配给任务列表变量？

Answer 1

您应该在可观察对象中设置 tabKey 更改，并使用 switchMap 取消先前的请求：

readonly tabKeySubject = new Subject<string>();

ngOnInit(): void {
  this.tabKeySubject.pipe(
    switchMap((tabKey) => this.taskService.getAllTasks(this.tabKey))
  ).subscribe(data => this.taskList = data);
}

如果这种情况发生在组件中，并且不会产生重大影响，那么最好将流移动到任务将数据列表到可观察字段中，并使用异步管道显示在模板中。否则记得取消订阅以避免内存泄漏。

readonly tabKeySubject = new Subject<string>();

readonly taskList$ = this.tabKeySubject.pipe(
  switchMap((tabKey) => this.taskService.getAllTasks(this.tabKey))
);

其他... 您可能希望在加载新列表时在用户界面中清除列表。在这种情况下，一个简单的做法是将 startWith 与 undefined 或空数组一起使用，以便清除列表。

this.tabKeySubject.pipe(
  switchMap((tabKey) => this.taskService.getAllTasks(this.tabKey)),
  startWith(undefined)
);

Answer 2

在选项卡更改上调用内部函数，取消订阅除您要使用的最新 api 之外的所有 api 请求。