Multiple data post to server in Angular 4

Question

I'm building some application that need to be able to run offline, so when it's offline i cache every data post in localstorage, and when the browser detect that it's online, i read that cache and begin pushing all data to the server using HttpClient.

The problem is this push all data asynchronously, making it not always pushing in order of data 0 to N, i wonder if there's some algorithm that wait for the first push to end before continuing to the second push? i don't want to use setTimeout as this is slow, i want to keep it speedy while making it run in order.

score 2 · Accepted Answer · answered May 15 '18 at 06:02

I think forkJoin is the good solution you can use here.

You can add all the requests in an array like following

constant allSavedRequests = [];

allSavedRequests.push(this.http.get('https://testdb1.firebaseio.com/.json'));
allSavedRequests.push(this.http.get('https://testdb2.firebaseio.com/.json'));

Now using forkJoin you can bind all requests in one variable

const runRequests = Observable.forkJoin(allSavedRequests)

Finally when you are online you need to invoke forkJoin call and it will make all the requests in one shot.

runRequests.subscribe(latestValues => {
  console.log( "data_all" , latestValues);
});

Read More about forkJoin.

Ah thanks, this is what i'm looking for, it sends all push data in order and wait for all of it to finish so i can notify the user that all their data is pushed. Thanks for the answer. — Charles Randicha, May 16 '18 at 04:12

score 1 · Answer 2 · answered May 15 '18 at 03:38

1

You're looking for flatMap or mergeMap. This is one of the easiest ways to force REST synchronous. How to chain Http calls in Angular2

answered May 15 '18 at 03:38

Z. Bagley

8,942
1
40
52

This works too for my problem, but i choose to use Sangwin's answer of using forkjoin for now, as i need to notify the user if all data is pushed, thanks for the answer :) – Charles Randicha May 16 '18 at 04:14
@CharlesRandicha Hey, don't worry! Hey took my answer and made a quality post for you and deserves the points. I'm here to help people learn so that they can help people. GL on your dev journey – Z. Bagley May 16 '18 at 04:20

score 0 · Answer 3 · answered May 15 '18 at 05:38

this._service.push1(push1data)            
    .subscribe(
        (result) => { this.something = result },
        error => { this.errorMessage = <any>error; },
        () => {
            this._service.push2(push2data)            
                .subscribe(
                    (result) => { this.something2 = result },
                    error => { this.errorMessage = <any>error; },
                    () => {
                        this._service.push3(push3data)            
                            .subscribe(
                                (result) => { this.something3 = result },
                                error => { this.errorMessage = <any>error; },
                                () => {
                                    // and so on
            });
    });
});

This way, only when first push is finished, second will start, and so on.

Multiple data post to server in Angular 4

3 Answers3