RxJS学习：如何实现fun2返回结果时终止后续switchMap执行

你现在的代码是把三个switchMap平铺在同一层管道上，RxJS的switchMap有固定触发规则：只要上游有值流过来，就会执行当前回调里的逻辑，订阅返回的内部流，再把流里的值传给下游的操作符。
照这个规则，哪怕第二步拿到了"Fun2"，这个值顺着管道流到第三个switchMap的时候，回调里写死了要执行from(fun3())，根本不判断拿到的值是什么，最后自然会走到fun3的逻辑，返回Fun3。

核心思路很简单：在值流传递的过程中加判断分支，当命中“拿到Fun2就返回”的条件时，不要再调用后续的fun3，直接把当前值透给订阅者就行。具体有两种常用写法：

写法1：在第三个switchMap里加判断 #

这种写法不用大改原来的管道结构，只需要把原来第三个switchMap里写死的逻辑改成带分支判断的：

import { from, of } from 'rxjs';
import { switchMap } from 'rxjs/operators';

const fun1 = () => new Promise((resolve) => resolve("Fun1"));
const fun2 = () => new Promise((resolve) => resolve("Fun2"));
const fun3 = () => new Promise((resolve) => resolve("Fun3"));

const observer = from(fun()).pipe(
  switchMap(() => from(fun1())),
  switchMap(() => from(fun2())),
  switchMap((currentVal) => {
    // 收到的值是Fun2的话，直接返回当前值的流，不调用fun3
    if (currentVal === "Fun2") {
      return of(currentVal);
    }
    // 其他情况才正常调用fun3
    return from(fun3());
  })
);

observer.subscribe(
  (val) => console.log("Val =", val),
  (error) => console.log("Error = ", error),
  () => console.log("Completed")
);

跑起来的时候，值流到第三个switchMap就会先做判断：如果拿到的是Fun2，就直接把值抛给订阅者，全程不会触发fun3的执行。

写法2：把fun3的逻辑嵌到fun2的返回流里 #

如果觉得在下游加判断不够直观，可以把需要判断的后续逻辑提前嵌到上一步的流里，从结构上避开“不管啥值都要流到下游”的问题。当拿到Fun2的时候，根本就不会走到“调用fun3”的分支，自然也就不会执行fun3的逻辑。
对应代码：

const observer = from(fun()).pipe(
  switchMap(() => from(fun1())),
  switchMap(() => {
    // 先跑fun2的逻辑
    return from(fun2()).pipe(
      switchMap((fun2Res) => {
        // 拿到Fun2直接返回
        if (fun2Res === "Fun2") {
          return of(fun2Res);
        }
        // 只有不是Fun2的时候才跑fun3
        return from(fun3());
      })
    )
  })
);

这种写法的运行流程是：拿到fun2的返回值后直接在当前流里判断，命中条件就把值直接传给订阅者，全程都不会走到外层管道的第三个操作符，也就不会触发fun3的调用。

两种写法没有绝对的好坏，逻辑简单、管道层级少的时候用第一种改动最小；分支多、判断条件复杂的时候用第二种写，不会因为跨层写判断搞得逻辑绕。

内容的提问来源于stack exchange，提问作者user1927603