今天我们来聊一聊 RxJS 中的高阶操作符 switchMap。 switchMap 是 RxJS 中经常使用的一种操作符，它可以用来处理一些异步的场景，比如处理用户输入的搜索请求、处理多个接口的数据合并等等。
switchMap 的基本用法
switchMap 的核心作用就是将一个 Observable 转化为另一个 Observable。具体来说，它会同时订阅两个 Observable，等待第一个 Observable 被触发后，将第一个 Observable 中的值传给第二个 Observable 进行处理，最终返回第二个 Observable。
下面是 switchMap 的基本语法：
observable1.pipe(
switchMap((valueFromObservable1) => {
// 处理 valueFromObservable1，并返回一个新的 Observable。
return observable2;
})
);其中，observable1 和 observable2 都是 Observable 对象。switchMap 的作用就是将 observable1 触发时产生的值作为参数传递给 switchMap 中的回调函数，然后在回调函数中返回一个新的 Observable 对象 observable2。这个新的 Observable 进一步处理 observable1 中的值，并产生一个新的数据流。
switchMap 的应用场景
理解 switchMap 的基本使用方法之后，我们来看一下它的应用场景。
处理用户搜索请求
假设我们正在开发一个搜索引擎，需要实时处理用户的搜索请求。我们可以监听 searchInput 元素中的键盘输入事件，并使用 switchMap 包装 ajax 请求，如下所示：
-- -------------------- ---- -------
------ - --------- - ---- -------
------ - --------- - ---- -----------------
------ - ---- - ---- ------------
----- ----------- - ---------------------------------------
---------------------- --------
------
----------------- -- -
----- ---------- - ------------- -- ------------------------
------ ----------------------------------------
--
-
--------------------- -- -
-- ------
---这里我们使用了 fromEvent 创建一个 Observable，并在其中使用 switchMap 将 ajax 请求包装起来。当从 searchInput 元素中获取到用户输入的信息后，switchMap 会自动将其传递给 ajax 请求中，然后返回一个新的 Observable 对象。当新的 Observable 中产生了结果时，我们可以在 subscribe 中处理这个结果。
处理多个接口的数据合并
假设我们需要从两个不同的接口中获取数据，然后将这些数据进行合并。我们可以使用 switchMap 将请求包装在一起，并在第一个请求完成之后进行第二个请求。具体来说，我们可以使用以下代码：
-- -------------------- ---- -------
------ - ----- -- - ---- -------
------ - --------- - ---- -----------------
------ - ---- - ---- ------------
----- ----------- - -------- -- -
------ -----------------------------
--
----- ------------ - --------- -- -
------ -------------------------------
--
----- ------ - --
----- ----- - --------------------------
-----
------
-------------------- -- -
----- ------- - --------------------------
------ ---------------------------
---------------- -- -
------ -------------------------------------- -- -
----- ----- - -------------------
------ -
--------
------
--
---
--
--
--
-
--------------------- -- -
-- ----
---在这个例子中，我们首先创建了一个 user$ Observable，它表示从 getWUserById 接口中获取一个用户。当我们从 user$ 中获取到了用户数据之后，我们可以使用 switchMap 将其传递到一个新的 Observable 对象 user，并从 user 中获取 groupId。接下来，我们可以使用这个 groupId 获取对应的 group 数据，并将 group 数据合并到 user 中。
总结
总的来说，switchMap 是 RxJS 中非常有用的一个高阶操作符，它可以用来处理一些异步的场景，比如处理用户输入的搜索请求、处理多个接口的数据合并等等。如果你想深入了解 RxJS，那么 switchMap 是一个必不可少的操作符。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6462f626968c7c53b0401cbf