Question

我的应用程序中有四个HTTP调用（点击一下按钮后），其中第四个调用依赖于上述三个调用。我希望第四次调用等待并从这三个数据中获取数据。（我从三个呼叫中获得的数据需要通过作为第四个呼叫的输入发送）

LoadDetails() {
    this.DataService.M1().subscribe((Model1: Project.Models.Model1[]) => {
        this.SomeData1 = Model1;
    });
    this.DataService.M2().subscribe((Model2: Project.Models.Model2[]) => {
        this.SomeData2 = Model2;
    });
    this.DataService.M3().subscribe((Model3: Project.Models.Model3[]) => {
        this.SomeData3 = Model3;
    });
    this.DataService.M4(this.SomeData1.Id, this.SomeData2.Id, this.SomeData3.Id).subscribe((Model4: Project.Models.Model4[]) => {
        this.SomeData4 = Model4;
    });
}

如何进行第四次通话等待上述三次通话完成？

Answer 1

这应该适合你：

LoadDetails() {
    Observable.forkJoin([this.DataService.M1(), this.DataService.M2(), this.DataService.M3()]).mergeMap((datas:any[]) => {
        this.SomeData1 = data[0];
        this.SomeData2 = data[1];
        this.SomeData3 = data[2];

        //Here you can do whatever you want, bevor you request SomeData4
        return this.DataService.M4(this.SomeData1.Id, this.SomeData2.Id, this.SomeData3.Id);
    }).subscribe((Model4: Project.Models.Model4[]) => {
        this.SomeData4 = Model4;
    });
}

同时请求SomeData1-3，如果所有数据都存在，则会请求SomeDate4;

注意：

如果您未加载所有RxJS运算符，则必须添加以下导入：

import 'rxjs/add/operator/mergeMap';
import 'rxjs/add/observable/forkJoin';

Answer 2

您可以使用区域概念来处理此类操作。 Zone.js

let LoadDetailsZone = Zone.current.fork({
  name: 'detailZone',
  onHasTask() {
    this.DataService.M4(this.SomeData1.Id, this.SomeData2.Id, this.SomeData3.Id).subscribe((Model4: Project.Models.Model4[]) => {
          this.SomeData4 = Model4;
      });
  }
})
LoadDetailsZone.run(() => {
  this.DataService.M1().subscribe((Model1: Project.Models.Model1[]) => {
      this.SomeData1 = Model1;
  });
  this.DataService.M2().subscribe((Model2: Project.Models.Model2[]) => {
      this.SomeData2 = Model2;
  });
  this.DataService.M3().subscribe((Model3: Project.Models.Model3[]) => {
      this.SomeData3 = Model3;
  });
})

您定义一个具有onHasTask功能的区域，该区域在zone.run（）中的所有呼叫之后被调用。

Answer 3

this._villageService.GetAllVillages()
    .flatMap(
       (response) => {
         // take from the response what you want and use it for the next call
         this._villageService.GetAllWorkAreas(//pass the thing from your previous response here)
       }
    )
    .flatMap(
      ....
    )
    .subscribe(...)

Answer 4

您可以使用承诺：

import "rxjs/add/operator/toPromise";

let p1 = this.DataService.M1().toPromise();
let p2 = this.DataService.M2().toPromise();
let p3 = this.DataService.M3().toPromise();

Promise.all([p1,p2,p3]).then(() => {
   this.DataService.M4();
});

Answer 5

只是一场旗帜游戏;-)

public timer:any;
LoadDetails() {
    let dataCall1Completed = false;
    let dataCall2Completed = false;
    let dataCall3Completed = false;

    this.DataService.M1().subscribe((Model1 : Project.Models.Model1[]) => {
        this.SomeData1 = Model1;
        dataCall1Completed = true;
    });
    this.DataService.M2().subscribe((Model2 : Project.Models.Model2[]) => {
        this.SomeData2 = Model2;
        dataCall2Completed = true;
    });
    this.DataService.M3().subscribe((Model3 : Project.Models.Model3[]) => {
        this.SomeData3 = Model3;
        dataCall3Completed = true;
    });

    this.timer = setTimeout(dataCall4(), 1000)
}

dataCall4() {
    if (dataCall1Completed && dataCall2Completed && dataCall3Completed) {
        this.DataService.M4(this.SomeData1.Id, this.SomeData2.Id, this.SomeData3.Id).subscribe((Model4 : Project.Models.Model4[]) => {
            this.SomeData4 = Model4;
        });
        clearTimeout(this.timer);
    }
}

在Angular2中调用多个相关的Http调用

5 个答案: