Run an array of http calls sequentially in Angular

Question

I've seen this asked a few times but I can't work out how to implement this to solve my issue.

I've basically got an array of http calls that I need to execute in sequentially order. Specifically I need to execute one, wait for it to return then execute the next.

let requests = [
  this.http.post('http://localhost:4200/api/value', 'one'),
  this.http.post('http://localhost:4200/api/value', 'two'),
  this.http.post('http://localhost:4200/api/value', 'three'),
  this.http.post('http://localhost:4200/api/value', 'four'),
];

So I'm currently using a forkJoin but this runs the requests simultaneously which is not what I want.

forkJoin(observableBatch).subscribe(result => {
  // success
}, error => {
  // log error
});

I read using concatMap might be the answer but how do I use this on an array of observables?

Possible duplicate of RxJS wait for previous execution to finish — Roberto Zvjerković
– Roberto Zvjerković, Commented Jul 3, 2019 at 10:58

Ghoul Ahmed · Accepted Answer · 2019-07-03 11:56:46Z

5

Try with concat function of RXJS, try this

import { concat } from 'rxjs';

let requests = [
  this.http.post('http://localhost:4200/api/value', 'one'),
  this.http.post('http://localhost:4200/api/value', 'two'),
  this.http.post('http://localhost:4200/api/value', 'three'),
  this.http.post('http://localhost:4200/api/value', 'four'),
];

concat(...requests).subscribe(result => {
  // success
}, error => {
  // log error
});

edited Jul 3, 2019 at 11:56

answered Jul 3, 2019 at 11:00

Ghoul Ahmed

4,8342 gold badges17 silver badges25 bronze badges

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

2 Comments

JB Nizet Over a year ago

import { concat } from 'rxjs'. It's not an operator. And you're missing the call to subscribe.

Rob Over a year ago

Will the subscribe result be hit for each one of those four calls or just once all four have executed? I've a scenario where I need the response eTag to send in the header of the subsequent request

jbobbins · Accepted Answer · 2022-08-19 18:37:27Z

0

I think you want to use concatMap if by "sequentially" you mean the next http request doesn't request until the response is received from the previous.

let requests = [
  this.http.post('http://localhost:4200/api/value', 'one'),
  this.http.post('http://localhost:4200/api/value', 'two'),
  this.http.post('http://localhost:4200/api/value', 'three'),
];

const observer = {
  complete: () => {
    // code here for when all requests complete
  },
  error: (err: any) => {
    console.error(`error in concatMap observer`, err);
  }
};

from(requests).pipe(concatMap((request) => {
  return request;
})).subscribe(observer);

answered Aug 19, 2022 at 18:37

jbobbins

1,2914 gold badges18 silver badges28 bronze badges

Collectives™ on Stack Overflow

Run an array of http calls sequentially in Angular

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related