Подписаться на несколько асинхронных http-вызовов

Question

на ngOnInit я делаю 4 http запроса на данные, после чего мне нужно загрузить данные с сервера, чтобы заполнить формы данными, основанными на модели данных последнего 4 http вызова.

Короче говоря, яМне нужно подписаться на эти 4 http-звонка и убедиться, что они не потерпят неудачу, если они не сработают. Наконец, я могу позвонить на 5-й http-вызов, чтобы получить данные с сервера.

Из того, что я понимаю, мне следует избегатьвставить наблюдаемый и перейти с переключателем, но как сделать это с 4 HTTP-вызовом?Должен ли я создать наблюдаемое ожидание http-вызовов и, если удастся использовать switchmap при 5-м http-вызове?

Это код.

      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, чтобы объединить все запросы и получить результаты как обратный вызов, когда все запросы будут выполнены.

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 2

Я бы преобразовал эти подписки в обещания, используя .toPromise () , чтобы вы могли дождаться завершения всех 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
}

Answer 3

Вы можете использовать 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
});

Вы можете узнать больше о forkJoin более здесь .