Question

在ngOnInit上，我向数据发出4个http请求，此后，我需要从服务器加载数据以根据最近4个http调用的数据模型填充数据。

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

据我了解，我应该避免安装可观察的命令并进行切换，但是如何使用4 http调用来做到这一点？我应该创建一个可观察的等待http调用的方法，如果成功在第5个http调用上使用switchmap？

这是代码。

      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);
            }
        });
}

Answer 1

您可以使用forkJoin。它等待所有可观察值完成，然后再从每个请求发出最后一个发出的值。如果任何可观察对象抛出错误，则forkJoin抛出错误。

let callOne = this.service.getLingueStraniere();
let callTwo = this.service.getTitoliPreferenziali();
 .
 .
 .
forkJoin([callOne, callTwo]).subscribe(response => {
  //handle success response
}, (error) => {
    // error handling
}, () => {
    // when observable is completed
});

Answer 2

您可以使用forkJoin组合所有请求，并在所有请求完成后将结果作为回调获取。

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);
       });                                                          
}

Answer 3

我将使用 .toPromise（）将这些订阅转换为Promise，以便您可以等待所有4个http请求完成，然后填写表格。这不是一个完整的示例，但可以说出了这个主意。

try {
    ... await this.service.getProvince().toPromise();
    ... await this.service.getTitoliPreferenziali().toPromise();
    ... await this.service.getLingueStraniere().toPromise();
    ... await this.service.getRiserve().toPromise();
    //fill form
}catch(error) {
 //show error message or do something like retry calls
}

订阅多个异步HTTP调用

3 个答案: