How to maintain order of subscribers with async operations

Question

I have an angular component which subscribes to its route params. Whenever the route params change, it reads the id from the params and calls a function to look up the record for that id. The function returns a promise. Upon resolving, the component sets a property on itself for the purposes of databinding.

In some cases, it seems that the responses are getting out of order, and the wrong value is set. Here's what it looks like:

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
    }
  }
}

So, let's say I have a textbox where I filter by name, and as I type, navigation events occur where id gets the first result for that name. Sometimes I see this:

processing 1

processing 2

processed 2

processed 1 <---- PROBLEM

What is the most elegant way to solve this? I have considered converting the promise to an observable and trying to cancel it, but that seems heavy-handed. I am trying to figure out if there's a way to serialize subscriptions, so that the second 'processing' doens't begin until the first one completes.

Answer 1

You'll want to make use of either concatMap or switchMap . concatMap will make sure the previous request is finished processing before doing the next one. switchMap will also ensure the order, except it will abort the processing of the prior request if it is still processing when the next request comes in.

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();
}

Answer 2

You could add a 'request id' to each call, that gets returned back to you. Then in the callback you can check if the req id is higher than the last one you processed.

It's not ideal for little calls with single-integer responses, but I hid mine in the headers and used an interceptor/filter to echo that header back to the client on every request.