Лучший способ сделать асинхронные вызовы в угловых потоках 6 rxjs

Question

Рассмотрим сценарий вызова 4 разных http вызовов, чтобы получить 4 разных счета из базы данных. Какова лучшая логика для написания кода В настоящее время я написал это, как показано ниже

getfirstCount()
{
     this.http.post('ulr1',request,{headers:headers})
      .subscribe(response => {
          dataCount1 = response.count
        },
        error => {
          console.log(error);
        },
        () => {
          this.getSecondCount();
        }
      )
}

Как реализовать вышеописанный сценарий с использованием потоков rxjs

Answer 1

Вы можете выполнить все 4 вызова одновременно, используя forkJoin: https://www.learnrxjs.io/operators/combination/forkjoin.html

Приведенный ниже оператор получит результат, когда все 4 вызова завершатся без ошибок.Если вы хотите получить частичный результат при сбое одного из них, вам нужно использовать catchError при каждом отдельном вызове http.

    forkJoin(
        this.httpClient.get('uri_1'),
        this.httpClient.get('uri_2'),
        this.httpClient.get('uri_3'),
        this.httpClient.get('uri_4')
    ).pipe(catchError(err => {
        console.log(err);
    })).subscribe((joined: [Object, Object, Object, Object]) => {
        // handle array of results
    })

Answer 2

Если ваши звонки нужно делать один за другим, вы можете связать их в очередь с помощью flatMap:

getfirstCount() {
 return this.http.post('ulr1',request,{headers:headers}) // <-- you have to returne an observable
  .subscribe(response => {
      dataCount1 = response.count
    },
    error => {
      console.log(error);
    },
    () => {
      this.getSecondCount();
    }
  )
}

и использовать его следующим образом:

getfirstCount()
  .flatMap((dataFirstCount) => getSecondCount(dataFirstCount))
  .flatMap(...)
  .subscribe(/* handle dataFourthCount */)