как обеспечить последовательность в HTTP-запросах с трубы в Angular 7

Question

У меня есть компонент, который вызывает несколько HTTP-запросов на разные URL. Каждый запрос реализован как наблюдаемый.

getIds():Observable<any[]> {
   return this.http
    .post(url1, '')
    .pipe(map(({ Ids}: any) => Ids.map(item => ({Id: item.Id }))));
    }

getNames(data: Names):Observable<any[]> {
   return this.http
    .post(url2,element)
    .pipe(map(({ Results }: any) => Results[0].map(item => ({id: item.ID, name: item.CVSS}))));
    }

Из компонента мне нужно сделать,

ngOnInit() {
  this.Ids = this.getIds();
  Ids.forEach(function(element) 
     this.getNames();
}

Может кто-нибудь показать, как я могу обеспечить выполнение этого приказа?

Answer 1

getIds возвращает массив идентификаторов, и вы хотите создать Observable (getNames) для каждого идентификатора. Затем вы хотите упорядочить весь список имен вместе. Есть несколько способов сделать это, но я предложу один из них:

this.getIds().pipe(
  /*
   * mergeMap here will effectively flatten the inner Observable created by getNames.
   * This means that the next operator will get the *result* of the getNames Observable
   * rather than the Observable itself, so you don't need to subscribe to it explicitly.
   */
  mergeMap(id => this.getNames(id)),

  /*
   * This is optional. `names` is an array. `mergeMap` over an array emits each array element
   * individually. This simply flattens the collection of names arrays.
   */
  mergeMap(names => names),

  /**
   * This is also optional. It will emit the entire collection of results as an array once
   * all of the previous Observables have completed.
   */
  toArray()
)

Вы можете подписаться на Observable, созданный этим, чтобы получить сплющенный список имен.

Я бы также предложил, чтобы, если это возможно, вы добавили в свою службу метод, который позволяет вам извлекать все имена, а не извлекать сначала список идентификаторов и каждое имя для каждого идентификатора в отдельности.

Answer 2

Импорт файла switchMap из RXJS

import { switchMap } from 'rxjs/operators'

затем перетащите на карту на возвращаемую наблюдаемую

this.getIds().pipe(
  switchMap((id: string) => this.getNames(id))
).subscribe((response) -> {
  console.log(response)
})