Chaining http calls in angular 2 in a for loop

Question

I have some code that looks like

//service.ts

addProduct(productId) {
   this.http.post('someUrl', ReqData).map(json).subscribe(doStuff);
}

//component.ts

addAllproducts(productsIds) {
   productIds.forEach(productId => service.addProduct(productId);
}

What I want is to be able to wait for each call to finish before calling for the next productId, without using window.setTimeout ..

You can send over all products as a list/array of product ids then do the actual adding on the backend code — DDelgro, Jul 11 '17 at 12:54
`productIds.forEach(productId => service.addProduct(productId)` not efficient way to do this. send all products to server in one request — Hadi Farhadi, Jul 11 '17 at 12:56
Have a look at Angular's promises. This way you can chain your requests and run them sequentially. It's described here on SO in several questions, e.g. here: https://stackoverflow.com/questions/25704745/how-do-i-sequentially-chain-promises-with-angularjs-q — qqilihq, Jul 11 '17 at 12:57
If you don't have access tot he backend then what @qqilihq suggested is spot on. You can do a loop once an asynchronous call/promise is fulfilled. — DDelgro, Jul 11 '17 at 13:01
@qqilihq I am using ngrx observable. I am trying not to use promises. — AngularDebutant, Jul 11 '17 at 13:01
Use a callback function, keep track of the number of productIDs that have been processed with a simple counter and in the call back, decrement the counter. — infamoustrey, Jul 11 '17 at 13:05
@infamoustrey Or just shove them into an array, by `push()`ing into is and `shift()`ing it. If the queue is clean, it stops. — Ismael Miguel, Jul 11 '17 at 13:35

CozyAzure · Answer 1 · 2017-07-12T08:29:08.073

How about some recursive calls using .expand()?

First, create a recursive function and map the data for recursive use:

const recursiveAddProduct = (currentProductId, index, arr)=>{
    return service.addProduct(currentProductId)
        .map((response)=>{
            return {
                data:response,
                index: index+1,
                arr:arr
            }
        })
};

Now, call it recursively in your component:

//productIds is an array of Ids    
//start of using the first index of item, where index = 0

let reduced = recursiveAddProduct(productIds[0],0,productIds)
    .expand((res)=>{
        return res.index>res.arr.length-1 ? Observable.empty(): recursiveAddProduct(productIds[res.index],res.index,productIds)
    });

reduced.subscribe(x=>console.log(x));

Here is a working JSBin

Benefit of using .expand operator:

You are still using Observables and can chain whatever operators you want to.
You are calling one http after another, which is your requirement.
You don't need to worry about error handling, they are all chained to a single stream. Just call a .catch to your observables.
You can do anything to your recursion method (data manipulation,etc)
You can set the condition when to terminate the recursion call.
One-liner (almost) code.

Edit

You can use .take() operator to terminate your recursion, if you don't like the inline ternary, like this:

let reduced = recursiveAddProduct(productIds[0],0,productIds)
    .expand(res=>recursiveAddProduct(productIds[res.index],res.index,productIds))
    .take(productIds.length)

Working JSBin

Thank you boss. I'll have a look at it and report back to you. — AngularDebutant, Jul 11 '17 at 15:08
Quick question: Why didnt you use `take(productIds.length)` instead of recursion? — callback, Jul 12 '17 at 08:18
@callback Yeah that would work too, but you still need a recursion. `.take()` is specifying the terminating condition of *that* recursion. — CozyAzure, Jul 12 '17 at 08:25
Yep, it will though save a couple of lines of code, and will make the code easy to understand IMO :) — callback, Jul 12 '17 at 08:27
@callback legit. Added the edit. I am just too used to ternary operator :) — CozyAzure, Jul 12 '17 at 08:29

Saravana · Accepted Answer · 2017-07-11T14:06:20.620

3

First return the observable from your service method:

addProduct(productId) {
   return this.http.post('someUrl', ReqData).map(json).subscribe(doStuff);
}

And use a recursive function and call it in the subscribe callback for each of the items in your array:

let loop = (id: number) => {
  service.addProduct(id)
    .subscribe((result) => {
      // This logic can be modified to any way you want if you don't want to mutate the `producIds` array
      if (productIds.length) {
        loop(productIds.shift())
      }
    })
}

loop(productIds.shift())

edited Jul 11 '17 at 14:06

answered Jul 11 '17 at 13:44

Saravana

37,852
18
100
108

forkJoin won't do it. He wants all the calls to be sequentials, not parallel. – CozyAzure Jul 11 '17 at 13:55
Arent you removing the productId in that last line? so if productId initially is 1, then it will be loop([]) .. – AngularDebutant Jul 11 '17 at 14:30
I am passing the item removed from the array. There is an if check to stop the loop when all items have been processed. Like I said above you can implement that particular logic in many ways (using counters, etc). You can choose what you want. – Saravana Jul 11 '17 at 14:38
Oh I see. Thank you sir. – AngularDebutant Jul 11 '17 at 15:08

score 0 · Answer 3 · edited Jun 09 '22 at 04:54

0

You can use the Observable.merge(). Try something like that

addProduct(productId):Observable<Response> {
   return this.http.post('someUrl', productId);
}

addAllproducts(productsIds) {
   let productedsObservable:Observable<Response>[]=[];
   for(let productID in productsIds){
    productedsObservable.push(this.addProduct(productID));
   }
   return merge(productedsObservable)
}

You need to subscribe to the requested function for it the execute the HTTP request. You can read more about combination operators (like merge) here

edited Jun 09 '22 at 04:54

AFetter

3,355
6
38
62

answered Jul 11 '17 at 15:06

Gili Yaniv

3,073
2
19
34

This answer sounds great! I'll accept it if it works, because I like how it uses Observables operators. – AngularDebutant Jul 11 '17 at 15:10
What's that `response` type you have there? – AngularDebutant Jul 11 '17 at 15:12
Response is the object type that http request returns. You can read about it here https://angular.io/api/http/Response – Gili Yaniv Jul 11 '17 at 15:56
Ok! Then it's not : ) – AngularDebutant Jul 12 '17 at 07:27
The above solution doesn't work for RxJS v5+ as the merge operator expects the comma separated values. So to make it work use `return Observable.merge(...productedsObservable)`. – Koushik Ravulapelli Nov 06 '18 at 20:51

Chaining http calls in angular 2 in a for loop

3 Answers3

Linked