сцепление Observables с очередью вызовов ajax

Question

У меня есть динамический массив URL-адресов Ajax, и я пытаюсь выстроить очереди в очередь.После успешного завершения первого вызова будет выполнен второй вызов ajax или, если результат не удался, он завершит цикл выполнения.Вот так он должен завершить массив до конца.

У нас есть варианты для этого с наблюдаемыми RxJS?

Answer 1

Пример, когда данные выбираются последовательно с использованием concatMap, но обрабатываются асинхронно с использованием mergeMap.

Пример кода на codesandbox.io

import { from } from "rxjs";
import { concatMap, map, catchError, tap, mergeMap } from "rxjs/operators";

const urls = [
  "https://randomuser.me/api/",
  "https://geek-jokes.sameerkumar.website/api",
  "https://dog.ceo/api/breeds/image/random"
];

from(urls)
  .pipe(
    concatMap(url => {
      console.log("=>Fetch data from url", url);
      return fetch(url);
    }),
    tap(response => console.log("=<Got reponse for", response.url)),
    mergeMap(response => response.json()),
    tap(data => console.log("Decoded response", data))
  )
  .subscribe(
    () => console.log("fetched and decoded"),
    e => console.log("Error", e),
    () => console.log("Done")
  );

Answer 2

Конечно, concat - правильная функция создания для этой работы.Передается список наблюдаемых и завершается их по порядку, один за другим.В случае сбоя любого из них отправляется уведомление об ошибке, которое можно обработать с помощью функции subscribe.Цепочка завершается сразу после ошибки, предотвращая запуск последующих вызовов Ajax.

Пример может выглядеть следующим образом:

concat(...urls.map(
    url => this.http.get(url))
).subscribe(
    next => console.log("An Ajax call has finished"),
    error => console.log("An Ajax call has gone wrong :-( "),
    complete => console.log("Done with all Ajax calls")
)

Документация для concat читает:

Создает выходной наблюдаемый объект, который последовательно генерирует все значения из данного наблюдаемого, а затем переходит к следующему.