内部订阅的Angular 6等待方法

Question

我必须多次调用一个服务，通过 forEach，一个内部有订阅（http 调用）的方法，我每次都必须等待上一次调用结束。 这是代码：

itemDefaultConfiguration.command = (onclick) => {
   this.createConfiguration(configuration.components);
   //wait the end of createConfiguration method that has subscribe (http call) inside
   this.initializeAllComponents(configuration.components)
};

initializeAllComponents(components: Agent[]) {
    components.forEach(agent => {
      this.componentService.setAgent(agent);
      this.componentService.clearAnyOneOfIndex();
      // wait the end of setAgent method that has subscribe(http call) inside
    })
}

componentService 内部：

setAgent(agent: Agent) {
        this.agent = agent;
        this.selectComponent(agent.name, undefined, "/", "/", environment.maxLevelJsonSchema);
    }

并且 selectComponent 有订阅。

selectComponent(agentName: string, propName: string, schemaPath: string, dataPath: string, deepLevel: number) {
        this.getComponentSchema(this.agentName, schemaPath, deepLevel)
            .subscribe((responseSchema) => {
                this.getDataFailure(propName, dataPath, responseSchema); 
            });
}

你能帮帮我吗？谢谢

Answer 1

您可以使用await 来做到这一点，例如：

initializeAllComponents(components: Agent[]) {
    components.forEach(async agent => {
      await this.componentService.setAgent(agent).catch(console.log);
      this.componentService.clearAnyOneOfIndex();
      // wait the end of setAgent method that has subscribe(http call) inside
    })
}

Answer 2

您可以使用async/await 语法来实现：

initializeAllComponents(components: Agent[]) {
    for (let i = 0; i < components.length; i++) {
        const agent = components[i];
        await this.componentService.setAgent(agent).catch(console.log);
        this.componentService.clearAnyOneOfIndex();
    }
}

小心async/await，因为您需要使用本机for 循环来等待上一个调用 - forEach、reduce 和类似方法只会触发多个异步调用。

Answer 3

如果是Observable，尝试使用switchMap操作符：

import { switchMap } from 'rxjs/operators';
import { of } from 'rxjs/observable/of';

initializeAllComponents(components: Agent[]) {
    components.forEach(agent => {
      this.componentService.setAgent(agent).pipe(
           switchMap(res => {
               if (res) { return this.userService.get(user.uid); }

               return of(null);
           }));
      );
      this.componentService.clearAnyOneOfIndex();          
    })
}

如果不是Observable，则使用async/await操作符：

async initializeAllComponents(components: Agent[]) {
    components.forEach(agent => {
      let result = await this.componentService.setAgent(agent);
      this.componentService.clearAnyOneOfIndex();
      // wait the end of setAgent method that has subscribe(http call) inside
    })
}