带有子模型的 Angular 5 模型。多个 HTTP 请求答案

【问题标题】：Angular 5 Model with child models. Multiple HTTP requests带有子模型的 Angular 5 模型。多个 HTTP 请求
【发布时间】：2018-12-03 19:45:28
【问题描述】：

我有这个模型结构

export class Car {
    id: number;
    exterior: Exterior;
    engine: Engine;
}

export class Exterior {
    color: string;
    doors: number;
}

export class Engine {
    model: string;
    horsePower: number;
}

Exterior 和 Engine 有自己的服务，称为 ExteriorService 和 EngineService，如下所示：

@Injectable()
export class ExteriorService {
    constructor(
        private http: HttpClient
    ) { }

    public getExterior(carId: number): Observable<any> {
        return this.http.get(`${url}`)
            .map(response => response);
    }
}

这两个都添加在 app.module.ts 中

现在我希望能够从另一个组件getCar(carId: number) 调用一个方法，这将为我返回一个完全填充的 Car 对象（包括孩子）。然后在它完全填写后，我想对其进行控制台记录，以便能够看到所有数据，包括孩子。

【问题讨论】：

标签： angular typescript rxjs

【解决方案1】：

使用链条订阅

this.http.get("/api/car/1").subscribe(car => {
  this.http.get("/api/exterior/1").subscribe(exterior => {
    car.exterior = exterior;
    this.http.get("/api/engine/1").subscribe(engine => {
      car.engine = engine;
      this.car = car;
    });
  });
});

方法2 MergeMap

this.car = this.http.get('/api/car/1')
.pipe(mergeMap(exterior => this.http.get("/api/exterior/1"))
.pipe(mergeMap(engine => this.http.get("/api/engine/1")));

方法3 ForkJoin

let car = this.http.get('/api/car/1');
let exterior = this.http.get('/api/exterior/1');
let engine = this.http.get('/api/engine/1');

forkJoin([car, exterior, engine]).subscribe(data => {    
    data[0].exterior = data[1]
    data[0].engine = data[2];
    this.car = data[0];
  });

【讨论】：

订阅链应该使用正确的拆卸逻辑来完成，例如取消请求

【解决方案2】：

你可以使用 RxJS forkJoin 操作符来加入不同异步 http 调用的结果，例如

getCar(carId: number) {
  return 
    forkJoin(
      this.http.get("/api/car/1"),
      this.http.get("/api/exterior/1"),
      this.http.get("/api/engine/1")
    ).pipe(map(parts => {
      const car = parts[0];
      car.exterior = parts[1];
      car.engine = parts[2];
    }));
}

这样，请求可以并行运行，也可以取消。

见https://www.learnrxjs.io/operators/combination/forkjoin.html

【讨论】：