Angular2 sequential http requests in a loop using a service

Question

Basically what I want is something like this:

this.accounts.forEach(account=> {
   this.myService.sendMessage("hello", account).subscribe(
   success => {
       if(success)
         updateProgress...   
   })
}

The problem with this code is that it executes everything asynchronously without waiting for the previous request. I was looking at solutions using merge and flatMap but I'm confused. I'd like to wait on the request completion before moving to next iteration. This causes a problem if I want to add a progress bar.

Solution:

Basing on the other answers this is what I've come up with:

let requestList = this.accounts.map((account, index) => {
    return this.myService.sendMessage("hello", account).map(success => {
            if (success)
            {
                // Update progress here
            }
            return success;
        });
    });

Observable.concat(...requestList).subscribe(null, null, () => {
    console.log("Complete");
});

It appears that you have it written above such that the updateProgress won't execute until the subscribe completes. So I'm not sure what you are asking? — DeborahK
– DeborahK, Commented Apr 28, 2017 at 0:44
@DeborahK it subscribes to all requests at once in a loop and it updates out of order. I'd like to wait for the previous request before sending other requests to make it behave more like synchronous. — Konrad
– Konrad, Commented Apr 28, 2017 at 0:45
I see. Thanks for clarifying. Could you create a plunker that illustrates the issue that we could try out? — DeborahK
– DeborahK, Commented Apr 28, 2017 at 0:48
@DeborahK it's late night here so I don't have much energy for plunker. — Konrad
– Konrad, Commented Apr 28, 2017 at 1:02

Julia Passynkova · Accepted Answer · 2017-04-28 01:09:30Z

2

Concat operation will sequence your requests:

let accounts = ['1', '2', '3', '4' ];

var i = 8000;
let obsList$= accounts.map(x=> {
   i = i - 1000;
  return Rx.Observable.of(x).delay(i);
});

Rx.Observable.concat(...obsList$)
   .subscribe(x=>console.log(x))

map accounts to create an array of Observables. Add a delay to each one to make sure that the first ones are the slowerst one (to make sure that sequence works.
Concat operator accepts a sequence of observables. so use ... (spread operator) to convert array
use concat operator to make sure that next observable emits only when the previous one is completed.

edited Apr 28, 2017 at 1:09

answered Apr 28, 2017 at 0:56

Julia Passynkova

18k6 gold badges36 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Gary Holland · Accepted Answer · 2017-04-28 01:43:43Z

1

Here is a sample technique which may work for you.

    // create an array of promise/resolves that will sequence the calls
    let resolveArray: Array<(value: boolean) => void> = new Array[this.accounts.length];

    this.accounts.forEach((account, index) => {
        new Promise<boolean>((resolve, reject) => {
            // add the promise to the array.
            resolveArray[index] = resolve;
        }).then(result => {
            this.myService.sendMessage("hello", account).subscribe(
            success => {
                if(success)
                    // updateProgress...   

                    // when finished, resolve the next promise in the array
                    if (index < this.resolveArray.length) {
                        this.resolveArray[index + 1](true);
                    }

            })
        });
    });

    // resolve the first promise to start the resolve sequence.
    resolveArray[0](true);

This works by creating an array of promises that then trigger your subscription as each one finished.

answered Apr 28, 2017 at 1:43

Gary Holland

2,6351 gold badge19 silver badges17 bronze badges

1 Comment

Abhay Dhar Over a year ago

When I use this code - let resolveArray: Array<(value: boolean) => void> = new Array[this.accounts.length]; I get an error on Array is not a constructor TypeError: Array[this.users.length] is not a constructor

Collectives™ on Stack Overflow

Angular2 sequential http requests in a loop using a service

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related