在 Angular 中解决多个 api 调用

Question

我正在尝试在使用 Resolve 加载组件之前调用 3 个不同的 API。

下面的这段代码写在解析函数中，并返回一个包含所有响应打包的对象。

现在当组件加载时，在我收到来自服务器的响应之前......它为返回的对象中的每个键返回 null。

请帮助我如何解决这个问题。在未从 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 
  };
}

Answer 1

您在订阅完成之前返回了 。使用Fork Join等待所有Get请求完成，然后以所需格式返回 get 请求的结果。

更新

从 Rxjs 6.5.0 开始， forkJoin 也接受一个对象作为参数。

// 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)

我试了一下，Angular 6我能够做到：

// 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)

所以，我操作了数据forkJoin并返回了forkJoin它本身。在这里查看：https : //stackblitz.com/edit/angular-xepafp?file=src%2Fapp%2FAPIResolver.ts

在 angular2 中，这样的事情应该可以工作：

// 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;