Как сделать последовательность HTTP-запросов в Angular 6, используя RxJS - PullRequest
Новая
       46

Как сделать последовательность HTTP-запросов в Angular 6, используя RxJS

0 голосов
/ 30 ноября 2018

Я искал решение по всей сети, но не смог найти ничего, что подходило бы для моего случая.Я использую MEAN стек (Angular 6) и у меня есть регистрационная форма.Я ищу способ выполнить несколько HTTP-вызовов к API, и каждый из них зависит от результата, полученного от предыдущего.Мне нужно что-то похожее на это: 

firstPOSTCallToAPI('url', data).pipe(
    result1 => secondPOSTCallToAPI('url', result1)
    result2 => thirdPOSTCallToAPI('url', result2)
    result3 => fourthPOSTCallToAPI('url', result3)
    ....
).subscribe(
    success => { /* display success msg */ },
    errorData => { /* display error msg */ }
);

Какую комбинацию операторов RxJS мне нужно использовать для достижения этой цели?Одним из возможных решений было бы вложение нескольких подписок, но я хочу избежать этого и сделать это лучше с RxJS.Также нужно подумать об обработке ошибок ...

Спасибо заранее!

Ответы [ 4 ]

0 голосов
/ 08 мая 2019

Позвольте мне показать вам, как поступить, если у меня много писем, на которые я хочу доставить письмо последовательно: 

sendEmails() {
  this.isLoading = true; 
            const calls = this.emails <<-- assume this contain an array of emails
            .map(email => this.userEmailService.deliver({email: email, userId: 1242}));
            from(calls) <<-- make use of the from.
                .pipe(
                    concatMap(res => res),
                    finalize(() => this.isLoading = false)
                ).subscribe(() => { });
}

Надеюсь, это поможет.

0 голосов
/ 30 ноября 2018 
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/forkJoin';

@Injectable()
export class DataService {

  constructor(private http: HttpClient) { }

  public requestDataFromMultipleSources(): Observable<any[]> {
    let response1 = this.http.get(requestUrl1);
    let response2 = this.http.get(requestUrl2);
    let response3 = this.http.get(requestUrl3);
    return Observable.forkJoin([response1, response2, response3]);
  }
}

The above example shows making three http calls, but in a similar way you can request as many http calls as required

    import { Component, OnInit } from '@angular/core';
import { DataService } from "../data.service";

@Component({
    selector: 'app-page',
    templateUrl: './page.component.html',
    styleUrls: ['./page.component.css']
})
export class DemoComponent implements OnInit {
    public responseData1: any;
    public responseData2: any;
    public responseData3: any;

    constructor(private dataService: DataService) {}

    ngOnInit() {
        this.dataService.requestDataFromMultipleSources().subscribe(responseList => {
            this.responseData1 = responseList[0];
            this.responseData2 = responseList[1];
            this.responseData3 = responseList[1];
        });
    }
}
0 голосов
/ 30 ноября 2018

Для звонков, которые зависят от предыдущего результата, вы должны использовать concatMap

firstPOSTCallToAPI('url', data).pipe(
    concatMap(result1 => secondPOSTCallToAPI('url', result1))
      concatMap( result2 => thirdPOSTCallToAPI('url', result2))
       concatMap(result3 => fourthPOSTCallToAPI('url', result3))
    ....
).subscribe(
    success => { /* display success msg */ },
    errorData => { /* display error msg */ }
);
0 голосов
/ 30 ноября 2018

Попробуйте, Angular предоставляет функцию одновременного вызова нескольких API.

forkJoin()

Вы получите данные в array в той же последовательности, которую вы называете API.

Пример: 

forkJoin(request1, request2)
    .subscribe(([response1, response2]) => {

Вы можете найти больше читать

Я также дал еще один ответ .Пожалуйста, проверьте это, это может также помочь вам.

...