Angular Sequential HTTP Rest request

Question

I have following code in Angular 8:

fetchMedia() {
    this.mediaDetails.forEach(entry => {
        this.fetchSingleMedia(entry); // NEED TO MAKE THIS SEQUENTIAL
    }
  });
}

fetchSingleMedia(entry) {

  this.mediaService.getMedia(entry).subscribe(
    (data) => {
       // MY LOGIC HERE
    },
    error => {}
  );
}

The fetchSingleMedia method is used by other parts of the code as well. I want to keep the Logic in fetchSingleMedia itself

Now, if I have to sequentially make multiple requests to fetchSingleMedia method, how do I need to modify the fetchSingleMedia method and way of calling it? maybe using async/await/promise or rxjs?

Edit:

With concat, second request is sent before first's response is received. I want second request to go after first request's response is received

What do you mean by making it sequential? Do you mean synchronous? — Shravan
– Shravan, Commented Mar 3, 2020 at 6:51
Reactive programming ends with subscribe...don’t subscribe in fetchSingleMedia and use something like forkJoin in fetchMedia. Ugh, please don’t just use promises just because you don’t know RxJS fully yet, this leads to ugly code, mix and matching promises and observables. — Andrew Allen
– Andrew Allen, Commented Mar 3, 2020 at 6:53
@user5155835 what do you want to happen if one fetch fails? Why one after another (if it’s to protect the back end would a delay between requests suffice?)? — Andrew Allen
– Andrew Allen, Commented Mar 3, 2020 at 7:21
@AndrewAllen even if first fails, second request should be made. Just that, second request should be made after the first request is finished — user5155835
– user5155835, Commented Mar 3, 2020 at 10:13

Kurt Hamilton · Accepted Answer · 2020-03-03 11:04:47Z

5

Use concat to sequentially run an array of observables.

From the docs:

Subscribe to observables in order as previous completes

Build your array of observables first, and then run them sequentially in concat.

fetchMedia() {
  const observables = this.mediaDetails.map(entry => {
    return this.fetchSingleMedia(entry);
  });

  concat(...observables).subscribe(singleMedia => {
    console.log(singleMedia);
  },
  error => {
  });
}

fetchSingleMedia(entry): Observable<any> {
  return this.mediaService.getMedia(entry).pipe(
    catchError(() => of('Error')), // TODO: return simple error result here, 
    tap(mediaEntry => console.log(mediaEntry)) // TODO: any processing here
  );
}

Note that you will need to handle errors on the individual observables if you want to ignore errors. I have shown a very simplistic way to do this.

DEMO: https://stackblitz.com/edit/angular-mhrxha

edited Mar 3, 2020 at 11:04

answered Mar 3, 2020 at 6:55

Kurt Hamilton

13.7k1 gold badge28 silver badges42 bronze badges

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

18 Comments

Andrew Allen Over a year ago

There’s also materialise and dematerialise (advanced RxJS) for fine grained control and allowing rest of observables to pass through stream unimpeded by an error.

user5155835 Over a year ago

Even if first request fails, the second request will still be made, right?

Kurt Hamilton Over a year ago

@user5155835 You can set it up however you want to. Do you want all requests to run even if the first one fails?

user5155835 Over a year ago

Yes, all requests should run even if any of the request fails

Kurt Hamilton Over a year ago

That's what my example will do. In my stackblitz, I set up a concat from a sequence of integers. #2 throws an error, but you still see numbers 3+.

|

Collectives™ on Stack Overflow

Angular Sequential HTTP Rest request

1 Answer 1

18 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

18 Comments

Your Answer

Sign up or log in

Post as a guest

Related