Question

我有一个动态的Ajax URL数组，并尝试按顺序将调用排队。成功完成第一个调用后，第二个ajax调用将继续执行；如果结果失败，则它将结束执行循环。这样，它应该完成数组直到最后。

RxJS可观察对象对此有选择吗？

Answer 1

当然，concat是该作业的正确创建函数。它传递了一个Observable列表，并依次完成它们。如果其中任何一个失败，则会发送错误通知，可以在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的{{3}}读为：

创建一个输出Observable，该输出依次从给定的Observable发出所有值，然后移至下一个。

Answer 2

使用concatMap顺序获取数据但使用mergeMap异步处理数据的示例。

Codexample at 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")
  );

将Observable链接到ajax调用的队列列表

2 个答案: