在 Angular 中解析多个 api 调用

Question

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

下面的代码写在 resolve 函数中，返回一个包含所有响应的对象。

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

请帮我解决这个问题。在未收到 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 请求完成，然后以所需格式返回获取请求的结果..

更新

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)

我在 Angular 6 中尝试过，我能够做到：

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

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

在 angular2 中，像这样的东西应该可以工作：

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]
       };
     })
}

Answer 2

这也可以用 combineLatest 来完成。参见 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);
  }
}

Answer 3

从 RxJS 6.5+ 开始，方法是：

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

Answer 4

请不要使用 Subscribe，您可以 return 您的 observables 作为

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

这对你有帮助

在 Angular 中解析多个 api 调用

Resolve in Angular for multiple api calls

angular

observable

angular2-observables