Resolve in Angular for multiple api calls

Question

I am trying to call 3 different APIs before a component loads using the Resolve.

This code below is written inside the resolve function and is returning an object with all response packaged.

Now When The component loads, before I receive the response from server.. it returns null for each of the keys in the object returned.

Please help how do I solve this kinda issue. How do I stop it from returning until the response is not received from the API.

resolve() {
  this._apiFactory.getA().subscribe(response => {
     responseA = response;
  });
  this._apiFactory.getB().subscribe( response => {
     responseB = response;
  });
  this._apiFactory.getC().subscribe( response => {
     responseC = response;
  });

  return {
    'A': responseA ,
    'B': responseb ,
    'C': responseC 
  };
}

Possible Duplicate of https://stackoverflow.com/questions/43166214/merging-http-observables-using-forkjoin — SiddAjmera, Aug 22 '18 at 11:49

Ashish Ranjan · Accepted Answer · 2021-04-14T15:15:56.277

You were returning the before your subscriptions could get finished. Used Fork Join to wait until all your Get requests are completed and then returning the result of the get requests in your required format..

Update

Since Rxjs 6.5.0, forkJoin also accepts an object as an argument.

// dummy Observables
const obsArg = {
    A: of([1]).pipe(delay(1000)),
    B: of([1, 2, 3]).pipe(delay(2000)),
    C: of([1, 2, 3, 4]).pipe(delay(3000))
}

return forkJoin(obsArg)

I tried it in Angular 6 and I was able to do it like:

// dummy Observables
let a  = of([1]).pipe(delay(1000));
let b  = of([1, 2, 3]).pipe(delay(2000));
let c  = of([1, 2, 3, 4]).pipe(delay(3000));

 let join = forkJoin(a,b,c).pipe(map((allResponses) => {
   return {
     A: allResponses[0],
     B: allResponses[1],
     C: allResponses[2]
   };
 }));

 return join;

So, I manipulated the data in forkJoin and returned the forkJoin itself. see it here: https://stackblitz.com/edit/angular-xepafp?file=src%2Fapp%2FAPIResolver.ts

In angular2, something like this should work:

resolve() {
    return Observable.forkJoin(
      this._apiFactory.getA(),
      this._apiFactory.getB(),
      this._apiFactory.getC()
    ).map((allResponses) => {
       return {
         A: allResponses[0],
         B: allResponses[1],
         C: allResponses[2]
       };
     })
}

Thanks Aashish, but it is still not helping. As you see it is a router resolve method which I am using for the first time. And I see that the router returns a nested observable rather then returning this object even before the forkJoin ends — JEET ADHIKARI, Aug 22 '18 at 13:24
@JEETADHIKARI: See the update, I took it from https://stackoverflow.com/questions/39066604/angular-2-router-resolve-with-observable , I think first() should be fine here. — Ashish Ranjan, Aug 22 '18 at 14:20

Shadoweb · Answer 2 · 2020-05-23T09:31:41.230

2

As of RxJS 6.5+ the way to do it is:

return forkJoin({
  todos: timer(500).pipe(mapTo([{ title: 'forkJoin'}])),
  user: timer(500).pipe(mapTo({ id: 1 }))
});

edited May 23 '20 at 09:31

answered May 23 '20 at 08:56

Shadoweb

5,812
1
42
55

score 0 · Answer 3 · answered Feb 20 '20 at 20:22

This can be done with combineLatest as well. See this stackblitz

import { Injectable } from "@angular/core";
import { Resolve, ActivatedRouteSnapshot } from "@angular/router";
import { of, combineLatest } from "rxjs";
import { delay } from "rxjs/operators";

@Injectable({
  providedIn: "root"
})
export class TestResolver implements Resolve<any> {
  constructor() {}

  resolve(route: ActivatedRouteSnapshot) {
    let a = of([1]).pipe(delay(1000));
    let b = of([1, 2, 3]).pipe(delay(2000));
    let c = of([1, 2, 3, 4]).pipe(delay(3000));

    return combineLatest(a, b, c);
  }
}

score 0 · Answer 4 · answered Jul 12 '20 at 10:46

0

Please Don't use Subscribe instead you can return your observables as

let a= observable(1);
let b= observable(2);
let c= observable(3);
return forkJoin(a,b,c);

this will help you

answered Jul 12 '20 at 10:46

Vignesh Ravichandran

169
3
10

Resolve in Angular for multiple api calls

4 Answers4