How to use ForkJoin for sequence of http requests Angular 4

Question

I have a function which makes two http calls, the input of second http depends first http response and I need the two results to be returned at the same time. I have the below code which throws the error

SomeMethod(): Observable<any> {
    let firstResult;
    let secondResult;

    firstResult = http.get('////').map(data => {
        console.log('first response')
     secondResult = http.get('//// + {data.UserId}').map(response => {

        console.log('second response')
     })
    })

    return forkJoin([firstResult, secondResult]);
}

CallingMethod() {
    this.SomeMethod.subscribe(([firstResult, secondResult]) =>{
     /// Some logic
    })}

Getting error as undefined. Expected a observable, promise or array. After debugging got to know that first console output is printing, the second http call is never made and response is never seen.

How to return two nested calls responses together using forkJoin or any other mechanism?

Ian Jamieson · Accepted Answer · 2020-04-07 18:59:14Z

6

Here is a StackBlitz of how to do this using concatMap. concatMap will execute sequentially, where as forkJoin will execute in parallel.

What you need to know

    const requests = [
      this.http.get('https://jsonplaceholder.typicode.com/todos/1'),
      this.http.get('https://jsonplaceholder.typicode.com/todos/2'),
      this.http.get('https://jsonplaceholder.typicode.com/todos/3'),
      this.http.get('https://jsonplaceholder.typicode.com/todos/4'),
      this.http.get('https://jsonplaceholder.typicode.com/todos/5'),
      this.http.get('https://jsonplaceholder.typicode.com/todos/6')
    ];


    from(requests).pipe(    
      concatMap((request) => request.pipe(delay(2200)))
    ).subscribe((res) => {
      this.results$.next(this.results$.getValue().concat(res))
    })

We create an array of requests (which are observables).
Use the from operator to take your array and emit each array item
Flatten those emissions with concatMap

I added a delay here as well to simulate slow loading.

answered Apr 7, 2020 at 18:59

Ian Jamieson

4,9063 gold badges41 silver badges61 bronze badges

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

3 Comments

juli Over a year ago

Do you have any suggestion how to modify your code, to get a result once (like forkJoin does) after all sequential(!) requests got completed?

juli Over a year ago

Arg, could not edit anymore. If anyone else is searching for this behaviour, it´s just like this:

from(requests).pipe(           concatMap((request) => request.pipe(delay(2200))),       reduce((acc, cur) => [...acc, cur], []),     ).subscribe((res) => {       console.log('res', res);     })

Lossan Over a year ago

@juli I think toArray() would also work instead of reduce

Mjstk · Accepted Answer · 2018-09-24 17:14:02Z

2

Use Async & await to control multiple http requests.

async SomeMethod(): Promise <any> {

    let firstResult;
    let secondResult;
    firstResult = await http.get('////').toPromise();
    secondResult = await http.get('//// + {res1.UserId}').toPromise();

    return forkJoin(firstResult, secondResult);
}

 CallingMethod() {
    this.SomeMethod().then(result => {
       /// Some logic
    });
 }

answered Sep 24, 2018 at 17:14

Mjstk

5064 silver badges9 bronze badges

1 Comment

anaval Over a year ago

touché my friend

Xinan · Accepted Answer · 2018-09-24 16:35:19Z

1

The following code should work:

SomeMethod(): Observable < any > {
  let firstResult;
  let secondResult;

  return http.get('////').pipe(
    switchMap(res1 => http.get('//// + {res1.UserId}').pipe(
      map(res2 => [res1, res2])
    ))
  );
}

CallingMethod() {
  this.SomeMethod().subscribe(([firstResult, secondResult]) => {
    /// Some logic
  })
}

answered Sep 24, 2018 at 16:35

Xinan

3,1721 gold badge18 silver badges18 bronze badges

2 Comments

thecrusader Over a year ago

i am getting the following error after using the code the this context of type void is not assignable to methods this of type observable even followed the link rxjs pipe but coudn't solve

Xinan Over a year ago

You need to post your full code in order to get it properly debugged. I think it's just some silly tiny mistakes somewhere.

Phix · Accepted Answer · 2018-09-24 16:45:16Z

0

forkJoin takes arguments inline, not as an array (unless that's a change in rxjs between latest and what was bundled in Angular v4)

const req1 = this.http.get('https://jsonplaceholder.typicode.com/todos/1');
const req2 = this.http.get('https://jsonplaceholder.typicode.com/todos/2');

const results = forkJoin(req1, req2)

Output:

[
  {
    "userId": 1,
    "id": 1,
    "title": "delectus aut autem",
    "completed": false
  },
  {
    "userId": 1,
    "id": 2,
    "title": "quis ut nam facilis et officia qui",
    "completed": false
  }
]

StackBlitz is in v6 but its easy enough to back track if needed.

answered Sep 24, 2018 at 16:45

Phix

10.1k4 gold badges39 silver badges65 bronze badges

Collectives™ on Stack Overflow

How to use ForkJoin for sequence of http requests Angular 4

4 Answers 4

3 Comments

1 Comment

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related