javascript - 如何通过异步操作维护订阅者的顺序

Question

我有一个订阅其路线参数的 Angular 组件。每当路由参数发生变化时，它都会从参数中读取 id 并调用函数来查找该 id 的记录。该函数返回一个 promise 。解析后，组件会出于数据绑定(bind)的目的对其自身设置一个属性。

在某些情况下，响应似乎无序，并且设置了错误的值。它看起来像这样:

ngOnInit() {
  this.route.params.subscribe((params) => {
    const id = params['id'];
    console.log('processing', id);
    this.service.getPerson(id).then((person) => {
      console.log('processed id', id);
      this.person = person; // sometimes this happens out of order
    }
  }
}

所以，假设我有一个文本框，我可以在其中按名称进行过滤，并且当我键入时，id 获取该名称的第一个结果时会发生导航事件。有时我会看到这个:

processing 1

processing 2

processed 2

processed 1 <---- PROBLEM

解决这个问题最优雅的方法是什么？我考虑过将 promise 转换为可观察的并尝试取消它，但这似乎很严厉。我试图弄清楚是否有一种方法可以序列化订阅，以便在第一个“处理”完成之前不会开始第二个“处理”。

Answer 1

您需要使用 concatMap或switchMap 。 concatMap 将确保上一个请求在处理下一个请求之前已完成处理。 switchMap 也会确保顺序，但如果下一个请求到来时它仍在处理，它将中止前一个请求的处理。

ngOnInit() {
  this.route.params.pipe(
      map(params => params['id']),
      tap(id => console.log('processing', id)),
      concatMap(id => fromPromise(this.service.getPerson(id)).pipe(
        tap(person => console.log('processed id', id))
      )), 
      tap(person => this.person = person)
  )
  .subscribe();
}