在前端开发中，我们经常需要处理异步数据流。RxJS 是一个强大的响应式编程库，它提供了丰富的操作符来处理数据流。其中，switchMap() 是一个常用的操作符，它可以将一个 Observable 转换成另一个 Observable，同时还可以取消之前未完成的 Observable。
switchMap() 的基本使用
switchMap() 的用法非常简单，它接收一个函数作为参数，这个函数返回一个 Observable。switchMap() 会将源 Observable 中的每个元素映射成一个新的 Observable，然后将这些 Observable 合并成一个新的 Observable，并发出每个 Observable 的最新值。
下面是一个简单的例子，我们从一个输入框中获取关键字，并通过 switchMap() 发送请求获取搜索结果。
----- ----- - --------------------------------
----- ------ - ----------------------------------
------------------- --------
------
------------------
-----------------------
--------------- -- -
----- ------- - -------------------
------ ---------------------------------------------------------------------------
---
---------------
-----------
-------- -- ------------------------------
---------
-
--------------- -- -
---------------- - ----------------------------
---上面的代码中，我们首先通过 Rx.fromEvent() 创建一个输入框的事件流。然后使用 debounceTime() 和 distinctUntilChanged() 操作符来防止频繁发送请求。接着使用 switchMap() 将输入框的值映射成一个新的 Observable，并通过 Rx.ajax.getJSON() 发送请求获取搜索结果。最后，我们使用 pluck()、mergeAll()、map() 和 toArray() 操作符来处理数据，并将结果渲染到页面上。
switchMap() 的取消机制
switchMap() 还有一个非常重要的特性，就是可以取消之前未完成的 Observable。这个特性在处理异步请求时非常有用，可以避免发送重复的请求，同时还可以提高性能。
下面是一个例子，我们可以在输入框中输入关键字，然后使用 switchMap() 发送请求获取搜索结果。在每次请求之前，我们先取消之前未完成的请求。
----- ----- - --------------------------------
----- ------ - ----------------------------------
--- ------------ - -----
------------------- --------
------
------------------
-----------------------
--------------- -- -
----- ------- - -------------------
-- -------------- -
---------------------------
-
------------ - ---------------------------------------------------------------------------
------ -------------
---
---------------
-----------
-------- -- ------------------------------
---------
-
--------------- -- -
---------------- - ----------------------------
---在上面的代码中，我们首先定义了一个 subscription 变量来存储当前的 Observable。在每次请求之前，我们先判断 subscription 是否存在，如果存在则先取消订阅。然后使用 Rx.ajax.getJSON() 发送请求获取搜索结果，并将结果返回。这样，我们就可以避免发送重复的请求了。
switchMap() 的高级应用
除了基本用法和取消机制之外，switchMap() 还有一些高级应用，比如 switchMapTo()、exhaustMap()、concatMap() 等。这些操作符都是基于 switchMap() 实现的，但在某些场景下会更加方便和高效。
下面是一些示例代码，展示了 switchMap() 的高级应用。
switchMapTo()
switchMapTo() 与 switchMap() 类似，但它不需要一个函数作为参数，而是直接接收一个 Observable。它将源 Observable 中的每个元素映射成一个新的 Observable，并发出新的 Observable 的最新值。
----- ------ - ---------------------------------
----- ------ - ----------------------------------
-------------------- --------
------
-------------------------------
--------- -- ---------------------
--------
---------
-
--------------- -- -
---------------- - ----------------------------
---在上面的代码中，我们使用 Rx.fromEvent() 创建一个按钮的事件流。然后使用 switchMapTo() 将每次点击映射成一个新的 Observable，该 Observable 每隔 1 秒发出一个数字。最后，我们使用 map()、take() 和 toArray() 操作符来处理数据，并将结果渲染到页面上。
exhaustMap()
exhaustMap() 与 switchMap() 不同，它会忽略源 Observable 中的所有元素，直到当前映射的 Observable 完成后才会处理下一个元素。
----- ------ - ---------------------------------
----- ------ - ----------------------------------
-------------------- --------
------
------------- -- ---------------------------------
--------- -- ---------------------
---------
-
--------------- -- -
---------------- - ----------------------------
---在上面的代码中，我们使用 Rx.fromEvent() 创建一个按钮的事件流。然后使用 exhaustMap() 将每次点击映射成一个新的 Observable，该 Observable 每隔 1 秒发出 5 个数字。由于 exhaustMap() 的特性，所以当第一个 Observable 还未完成时，后面的点击事件将被忽略。最后，我们使用 map() 和 toArray() 操作符来处理数据，并将结果渲染到页面上。
concatMap()
concatMap() 与 switchMap() 类似，但它会按顺序处理源 Observable 中的每个元素。也就是说，只有当前映射的 Observable 完成后，才会处理下一个元素。
----- ------ - ---------------------------------
----- ------ - ----------------------------------
-------------------- --------
------
------------ -- ---------------------------------
--------- -- ---------------------
---------
-
--------------- -- -
---------------- - ----------------------------
---在上面的代码中，我们使用 Rx.fromEvent() 创建一个按钮的事件流。然后使用 concatMap() 将每次点击映射成一个新的 Observable，该 Observable 每隔 1 秒发出 5 个数字。由于 concatMap() 的特性，所以每个 Observable 都会按顺序处理，直到完成后才会处理下一个元素。最后，我们使用 map() 和 toArray() 操作符来处理数据，并将结果渲染到页面上。
总结
switchMap() 是 RxJS 中一个非常有用的操作符，它可以将一个 Observable 转换成另一个 Observable，并且还可以取消之前未完成的 Observable。除了基本用法之外，switchMap() 还有一些高级应用，比如 switchMapTo()、exhaustMap()、concatMap() 等。在实际开发中，我们可以根据实际情况选择不同的操作符来处理异步数据流，从而提高性能和用户体验。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/66330884d3423812e40987f7