订阅多个异步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.

据我了解，我应该避免安装可观察的内容并进行切换，但是如何使用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屋！