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 请求时起到非常大的作用。同时，我们还可以使用它来优化输入框自动搜索的功能。
参考资料
- https://rxjs.dev/api/operators/switchMap
- https://blog.angularindepth.com/rxjs-switchmap-bug-fix-how-to-deal-with-http-cancellation-requests-33adad352e6b
- https://stackblitz.com/edit/rxjs-cancel-requests?file=index.ts
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650102d695b1f8cacdeda1c3