如何用RxJS操作符实现：仅在第一个API返回true时调用第二个API

当然有完美解决这个需求的RxJS操作符组合啦！你之前用switchMap的时候没做条件过滤，所以才会不管第一个API返回啥都调用第二个，现在只需要加一步过滤，就能彻底避免不必要的请求，还不用嵌套subscribe。

核心思路 #

先订阅第一个API的Observable，只在它返回true的时候，才触发第二个API的调用。用filter操作符拦截掉false的结果，再用switchMap去发起第二个请求，逻辑清晰又简洁。

代码示例 #

假设你的两个API请求已经封装成了Observable：

import { filter, switchMap } from 'rxjs';

// 第一个API的Observable，返回true/false
const firstApiCall$ = yourFirstApiService.checkSomething();
// 第二个API的Observable，仅在第一个返回true时调用
const secondApiCall$ = yourSecondApiService.doSomething();

firstApiCall$
  .pipe(
    // 只保留返回true的结果，false直接被过滤掉
    filter(isAllowed => isAllowed === true),
    // 只有当上面的过滤通过时，才会执行第二个API调用
    switchMap(() => secondApiCall$)
  )
  .subscribe({
    next: (secondResponse) => {
      // 处理第二个API的返回结果
      console.log('第二个API请求成功:', secondResponse);
    },
    error: (error) => {
      // 处理两个API请求中可能出现的错误
      console.error('请求出错:', error);
    },
    complete: () => {
      console.log('流程结束');
    }
  });

另一种写法：在switchMap内部做条件判断 #

如果你不想单独用filter，也可以直接在switchMap里加逻辑判断，返回空Observable来终止流：

import { switchMap, EMPTY } from 'rxjs';

firstApiCall$
  .pipe(
    switchMap(isAllowed => {
      if (isAllowed) {
        // 返回第二个API的Observable
        return secondApiCall$;
      } else {
        // 返回空Observable，直接触发complete，不会调用第二个API
        return EMPTY;
      }
    })
  )
  .subscribe(/* 同上的处理逻辑 */);

补充说明 #

如果之后你的第二个API需要用到第一个API的返回值，直接在switchMap里传递就行：

switchMap(firstResult => secondApiCall$(firstResult))

完全不影响条件判断的逻辑，非常灵活。

这种写法完全避免了嵌套subscribe的“回调地狱”，符合RxJS的数据流思维，还能有效减少不必要的API请求。

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