What rxjs operator is like concatmap but waits for each request before firing the next?

Viewed 2129

For example let's say I want to make some api calls. The api I'm dealing with is prone to race conditions so if I make 3 api calls at the same time updating the same piece of data on the server, it could lose some of the data.

Therefore I want to queue up my requests and then fire one off wait for the response to come back before firing the next request.

Basically I need something like concatMap but the problem with concatMap is that it fires all the requests at the same time. I need concatMap to just wait before firing off the next request. I'm using rxjs 5.

Here's a plunker using angular2 where you can click buttons. When you click 1 sec button an observable will get created that returns after 1 second. There's 2 sec and 3 sec buttons.

https://plnkr.co/edit/6F4JrVueQX8PjPinZqIk?p=preview

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Wait:</h2>

      <button (click)="start(1)">1 sec</button>
      <button (click)="start(2)">2 sec</button>
      <button (click)="start(3)">3 sec</button>
    </div>
  `,
})
export class App {


  constructor() {
  }

  start(wait) {

    const waitSecs = parseInt(wait) * 1000;

    of('clicked').delay(waitSecs).subscribe(
      val => console.log(wait)  
    )

    // Expected behavior:
    // I click 3 sec, 2 sec, and 1 sec right after another.  Then 
    // the console log should output 3, 2, 1.  Right now it's 
    // outputting 1, 2, 3.

  }
}

My ideal behavior with this app would be after I click 3 sec, 2 sec, and 1 sec right after another. Then the console should output 3, 2, 1. Right now it's outputting 1, 2, 3.

2 Answers
Related