订阅多个异步 http 调用 [英] Subscribe to multiple async http calls

问题描述

在 ngOnInit 上，我对数据进行了 4 个 http 请求，之后我需要从服务器加载数据以根据最后 4 个 http 调用的数据模型使用数据填充表单.

on ngOnInit i make 4 http request for data, after that i need to load the data from server to fill the forms with the data based on data model of last 4 http call.

简而言之，我需要订阅这 4 个 http 调用，如果它们没有失败，请确保不要失败，最后我可以调用第 5 个 http 调用从服务器获取数据.

In short words i need to subscribe to this 4 http calls, and make sure don't fail if they don't fail finally i can call the 5th http call to get data from server.

据我所知，我应该避免插入可观察对象并使用 switch，但是如何通过 4 个 http 调用来做到这一点?我应该为 http 调用创建一个可观察的等待，如果成功在第 5 个 http 调用中使用 switchmap 吗?

From what i understand, i should avoid to inest a observable and go with switch, but how to do this with 4 http call? should i create an observable wait for the http calls and if succed to use switchmap on the 5th http call?

这是代码.

      ngOnInit() {
    this.service.getProvince().subscribe(
        (value) => { return value; },
        (error: AppError) => {
            if (error instanceof NotFoundError) {
                console.log('Error richiesta http');
            } else {
                console.log(error);
            }
        });


    this.service.getLingueStraniere().subscribe(
        (value) => { return value; },
        (error: AppError) => {
            if (error instanceof NotFoundError) {
                console.log('Error richiesta http');
            } else {
                console.log(error);
            }
        });

    this.service.getTitoliPreferenziali().subscribe(
        (value) => { return value; },
        (error: AppError) => {
            if (error instanceof NotFoundError) {
                console.log('Error richiesta http');
            } else {
                console.log(error);
            }
        });

    this.service.getRiserve().subscribe(
        (value) => { return value; },
        (error: AppError) => {
            if (error instanceof NotFoundError) {
                console.log('Error richiesta http');
            } else {
                console.log(error);
            }
        });
}


// this is the 5th call that need to be done only if last 4 call not fail

finalCall {
    this.service.getDomanda().subscribe((domanda: any) => {
        this.popolaForm(domanda); // Method that use data to fill foms
    },
        (error: AppError) => {
            if (error instanceof NotFoundError) {
                console.log('Error richiesta http');
            } else {
                console.log(error);
            }
        });
} 

推荐答案

您可以使用forkJoin来合并所有请求，并在所有请求完成时作为回调获取结果.

You can use forkJoin to combine all the requests and get the results as callback when all the requests are completed.

import { forkJoin } from 'rxjs';
import { switchMap } from 'rxjs/operators';

ngOnInit() {
 forkJoin([this.service.getProvince(),this.service.getLingueStraniere(),this.service.getTitoliPreferenziali(), this.service.getRiserve()])
     .pipe(switchMap(result => { 
          console.log('Province', result[0]);
          console.log('LingueStraniere', result[1]);
          console.log('TitoliPreferenziali', result[2]);
          console.log('Riserve', result[3]);
          return this.service.getDomanda();
      }))
      .subscribe((domanda: any) => {
         console.log('getDomanda', domanda);
       });                                                          
}

这篇关于订阅多个异步 http 调用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！