How can I use RxJs to hold off any requests for an AJAX call until the previous one resolves

Question

I have an observable that represents an action that is triggered by some outside component. For the purpose of this question, let\'s call it createBananaAction.

Answer 1

Just use flatMapFirst instead of flatMap:

this.createdBananas = createBananaAction.flatMapFirst(() => bananaService.create());

The above assumes your bananaService.create() returns a cold observable. If it returns a hot observable or a Promise, then we need to wrap the call with Observable.defer to convert it to a cold observable so that flatMapFirst can control its firing properly:

this.createdBananas = createBananaAction
    .flatMapFirst(() => Rx.Observable.defer(() => bananaService.create()));