Serial and parallel HTTP requests with Angular 5 and RxJS

Question

<button (click)="onSaveItems()">Save</button>

this.selectedItems = [ 
  {'id': 1, name: 'A'},
  {'id': 2, name: 'B'},
  {'id': 3, name: 'C'},
  {'id': 4, name: 'D'},
  {'id': 5, name: 'E'}
]

this.apiService1.deleteAllItems()
this.apiService2.addItem(itemId)
this.apiService3.addItemLog(itemId)
this.apiService4.addFlag()

When a user clicks on the Save button, I want to:

Call the apiService1 and delete all items
If step 1 was successful, I want to call apiService2 to add selected item
If step 2 was successful, I want to call apiService3 to add item log for that specific item
Repeat steps 2. i 3. for each item from selectedItems
If all item logs are added successfully i want to call apiService4

(Please note that I can not change APIs logic)

Is there a way to do this with Angular and RxJS?

I don't know the implementation of `this.apiService1` but you will want to subscribe to each result in rxjs. So e.g. ..deleteAllItems().subscribe(() => ... next steps...) — Boland, Mar 25 '18 at 19:44
Possible duplicate of [Angular 2 - Chaining http requests](https://stackoverflow.com/questions/42626536/angular-2-chaining-http-requests) — GreyBeardedGeek, Mar 25 '18 at 20:03

score 1 · Accepted Answer · answered Mar 25 '18 at 20:18

I assume you are using angular http client, and therefore RxJs Observables.

If this is the case, then what you need to do is something along these lines

function processItem(item) {
  return this.apiService2.addItem(item)
          .switchMap(itemId => this.apiService3.addItemLog(item))
}

function deleteAllAndThenProcess() {
  return this.apiService1.deleteAllItems()
             .switchMap(() => Observable.from(this.selectedItems)
             .mergeMap(item => processItem(item))
}

function doEverything() {
   deleteAllAndThenProcess()
   .last(() => this.apiService4.addFlag())
   .subscribe(
     () => console.log('processing completed'),
     err => console.error(error)
   )
}

Details may be wrong (e.g. I have substituted itemId with item as parameter of apiService2.addItem and apiService3.addItemLog, but hopefully this gives an idea on how to chain observables to achieve what you want to achieve. Let me add that this is a typical use case where the power of Observable shines.

You may want to look at this to see more details about a use case which seems pretty similar to yours, even if it talks about node and not Angular.

Serial and parallel HTTP requests with Angular 5 and RxJS

1 Answers1