RxJS 中使用 switchMap() 函数取消已有请求并发起新请求-JavaScript中文网-JavaScript教程资源分享门户

RxJS 中使用 switchMap() 函数取消已有请求并发起新请求

RxJS 是现代前端开发中非常流行的函数式编程库，它提供了强大的工具来处理异步数据流。在处理 Ajax 请求时，我们通常希望能够有效地取消已有的请求并发起新的请求。这时，switchMap() 函数就可以派上用场了。

switchMap() 函数的作用是将一个高阶 Observable 转换为一个不同的 Observable，同时取消并不再订阅之前的 Observable。

switchMap() 函数的用法如下所示：

----------
  -------- ---------
    ------ ----
    ------ ------
  -- ----------------
  --------------- ---------
    ----------- ----
    ----------- ----
    ----------- -------
    ----------- ------
  -- ---
-- ----------------

其中，project 函数用来将外部 Observable 中的值映射为一个内部 Observable，而 resultSelector 函数则用来将内部 Observable 中的值与外部 Observable 中的值合成为一个新的值。换言之，switchMap() 函数会对外部 Observable 中的每个值调用 project 函数，得到一个新的内部 Observable。同时，它会取消并不再订阅之前的内部 Observable。

下面我们来看一个实际的例子：

------ - ---- - ---- ------------
------ - --------- - ---- -----------------

----- ----------- - --------------------------------- -- -----------------

----- ------ - -------------------------
  ------------ -- -
    ------ -------------------------------------------
  --
--

--------------------- -- -------------------

在上面的代码中，我们用 ajax() 函数构造了一个搜索的 Observable。在 switchMap() 函数中，我们将外部 Observable 中的值映射为一个带有查询参数的新的内部 Observable。这个内部 Observable 会与之前的内部 Observable 取消订阅。这样，我们就可以在输入框内容变化时，快速地取消之前的请求并发起新的请求。当我们订阅这个 Observable 时，打印出搜索结果。

总结

switchMap() 函数是 RxJS 中用来取消已有请求并发起新请求的强大工具。它能够将一个高阶 Observable 转换为一个不同的 Observable，并在处理 Ajax 请求时起到非常大的作用。同时，我们还可以使用它来优化输入框自动搜索的功能。

参考资料

来源：JavaScript中文网，转载请联系管理员！本文地址：https://www.javascriptcn.com/post/650102d695b1f8cacdeda1c3