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

我有这个模型结构

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中

现在，我希望能够从另一个组件getCarcarId:number调用一个方法，该组件将为我返回一个Car对象，并在包含的子对象中完全填充。然后，在完全填写完之后，我想对其进行console.log，以便能够查看所有数据，包括子项。

使用链 订阅

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合并地图

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

使用链条 订阅

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合并地图

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

---

您可以使用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];
    }));
}

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

---

请参见

您可以使用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];
    }));
}

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

---

请参见

订阅链接应使用正确的拆卸逻辑进行，以允许取消请求。订阅链接应使用正确的拆卸逻辑进行，以允许取消请求