如何从角度组件并行调用多个http服务

Question

如何在多个服务调用完成后才从组件调用我的方法？

我有一个 service.ts 文件，它有一种方法可以根据键（即此处的 obj）返回具有不同值的数组，如下所示：-

getdata(type:numer)
 {
   // make a post call to get the data
 }

在这里，在 component.ts 文件中，我有两个方法将调用上述服务方法，如下所示：- 这两种方法用于在单击编辑表单按钮时填充 html 中的下拉列表

method1()
{
   this.service.getdata().subscribe((res: any) => {
      data1 = res;
    });
}

method2()
{
   this.service.getdata().subscribe((res: any) => {
      data2 = res;
    });
}

我还有一种方法可以在编辑点击时填充表单数据

fillForm()
{
    // do something
}

现在，我的要求是我需要在component.ts中调用method1和method2 而且我只需要在上述两种方法完成后调用这个fillForm方法 因为我需要确保在编辑表单之前填写下拉列表

Answer 1

您好，如果您使用的是 rxjs 5，您可以使用 Observable 压缩：

Observable.zip(
    this.method1(),
    this.method2()
).subscribe(
    ([dataFromMethod1, dataFromMethod2]) => {
        // do things
    },
    (error) => console.error(error),
    () => {
        // do things when all subscribes are finished
        this.fillform();
    }
)

使用 rxjs 6，只需将 Observable.zip 更改为 forkJoin 即可：

forkJoin(
    this.method1(),
    this.method2()
).subscribe(
    ([dataFromMethod1, dataFromMethod2]) => {
        // do things
    },
    (error) => console.error(error),
    () => {
        // do things when all subscribes are finished
        this.fillform();
    }
)

你需要改变你的方法来返回 Observables：

method1()
{
   return this.service.getdata();
}

method2()
{
   return this.service.getdata();
}