Rxjs 的操作符 - map 、switchMap、concatMap 中 switchMap 的使用
在前端开发中，Rxjs 是一个强大而又常用的工具库，它可以轻松处理异步数据流和事件流。在 Rxjs 中，常常会用到一些操作符，比如 map 、switchMap 和 concatMap 等。其中，switchMap 和 concatMap 操作符用于处理 Observable 序列的变换。而 switchMap 操作符则是其中非常常用的一种，本文将详细介绍 switchMap 操作符的用法和实际应用。
一、switchMap 操作符的使用
switchMap 操作符用于将一个 Observable 序列转换成另一个 Observable 序列，并只发出另一个 Observable 序列的最新值。在实际开发中，我们通常会遇到多次连续的异步请求，而如果使用 concatMap 或者 mergeMap 操作符则会导致后面的请求被阻塞，等到前面的请求完成后才会继续执行。而使用 switchMap 操作符则可以取消前面的请求，并发起最新的请求，从而提高应用的响应速度。
下面是一个 switchMap 操作符的示例代码：
-- -------------------- ---- -------
------ - --------- - ---- -------
------ - ---------- --- - ---- -----------------
------------------- --------
------
--------- -- -----------------
------------ -- ---------------------------------------
-
------------------- -- -----------------------
在上面的示例代码中，我们使用了 fromEvent 函数来创建一个 Observable 序列，它会监听文档的点击事件，并发出点击事件的目标元素的 ID。然后，我们使用 map 操作符来将事件对象转换成目标元素的 ID，并用 switchMap 操作符将这个 ID 发送到另一个 Observable 序列中并进行订阅。这个序列会发送一个 HTTP 请求，从而得到响应结果并发出。最后我们使用 subscribe 函数来订阅这个交错序列并打印出响应结果。
二、switchMap 操作符的深度剖析
理解 switchMap 操作符的使用有助于我们更好地掌握 Rxjs 库的使用。下面是 switchMap 操作符的深度剖析：
- switchMap 操作符的基本使用
switchMap 操作符的基本使用很简单，它需要一个函数作为参数，这个函数将一个输入值转换成一个 Observable 序列并返回该序列。比如，我们可以通过下面的示例代码来加载一段文本，使用 switchMap 操作符将这个文本转换成一个 Observable 序列：
import { of } from 'rxjs';
import { switchMap } from 'rxjs/operators';
of('hello world')
.pipe(
switchMap(text => fetch(`https://example.com/api/${text}`))
)
.subscribe(response => console.log(response));在上面的示例代码中，我们使用 of 函数来创建一个 Observable 序列，并将一个字符串 'hello world' 作为输入值。然后，我们使用 switchMap 操作符将这个字符串转换成一个 HTTP 请求并返回它的结果。最后我们使用 subscribe 函数来订阅这个序列并打印出响应结果。
- switchMap 的取消机制
由于 switchMap 操作符只发出最新的 Observable 序列，因此当发出的输入值变化时，前一个正在进行的订阅将被取消。当然，在某些情况下，我们可能不想取消前一个订阅，而是想让它继续运行。为了实现这种效果，我们可以使用 mergeMap 操作符。
下面是一个使用 mergeMap 操作符的示例代码：
-- -------------------- ---- -------
------ - --------- - ---- -------
------ - --------- --- - ---- -----------------
------------------- --------
------
--------- -- -----------------
----------- -- ---------------------------------------
-
------------------- -- -----------------------在上面的示例代码中，我们使用了 fromEvent 函数来创建一个 Observable 序列，它会监听文档的点击事件并发出点击事件的目标元素的 ID。然后我们使用 map 操作符来将事件对象转换成目标元素的 ID，并使用 mergeMap 操作符将它转换成一个 HTTP 请求，从而得到响应结果并发出。最后我们使用 subscribe 函数来订阅这个序列并打印出响应结果。
- switchMap 的应用场景
switchMap 操作符通常用于一些需要实时更新数据的场景，比如搜索框中的自动补全功能、赛事直播中的场景更新等。在这些场景中，需要及时响应输入变化，并不断展示最新的结果。switchMap 操作符可以很好地满足这些需求，在处理多次异步请求时能够起到较好的效果。
四、总结
Rxjs 库中的 switchMap 操作符可以将一个 Observable 序列转换成另一个 Observable 序列，并只发出另一个 Observable 序列的最新值。它常用于需要实时更新数据的场景中，可以提高应用的响应速度。在使用 switchMap 操作符时，需要注意它的取消机制以及它和其他转换操作符的区别，合理使用能够让程序更加高效。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649bce4f48841e989488f61b