RxJS双API调用优化：慢请求先完成时取消快请求的实现方案

这是个非常贴合用户体验优化的典型场景，用RxJS的几个操作符组合就能完美实现，我给你拆解思路并补全代码：

核心逻辑梳理 #

我们需要同时发起两个请求，并且做到：

• 若call2先完成（虽然概率极低），立刻取消call1，直接用call2的完整信息
• 若call1先完成，先给用户展示基础信息，等call2完成后再更新为完整信息
• 每次请求完成后都执行对应的处理操作

实现代码 #

import { merge, takeUntil, tap, shareReplay, map } from 'rxjs';

// 先缓存call2的请求，避免多个订阅触发重复调用
const call2$ = myApiService.call2().pipe(shareReplay(1));

// call1会在call2完成时被自动取消订阅
const call1$ = myApiService.call1().pipe(takeUntil(call2$));

let myResult$ = merge(
  // 给两个请求的结果打标记，方便后续统一处理
  call1$.pipe(map(result => ({ source: 'call1', data: result }))),
  call2$.pipe(map(result => ({ source: 'call2', data: result })))
).pipe(
  // 在这里统一处理每次调用完成后的操作
  tap(({ source, data }) => {
    switch(source) {
      case 'call1':
        console.log('展示简化版用户信息:', data);
        // 这里可以写更新UI的逻辑，比如显示基础卡片
        break;
      case 'call2':
        console.log('展示完整版用户信息:', data);
        // 这里替换为完整信息的UI更新逻辑
        break;
    }
  })
);

// 最后订阅即可触发整个流程
myResult$.subscribe();

关键操作符解释 #

• shareReplay(1)：确保call2$的多个订阅（merge和takeUntil）共享同一个HTTP请求，不会重复发起调用，这是非常重要的细节，否则会触发两次call2。
• takeUntil(call2$)：让call1$在call2$发出结果时立即取消订阅，避免call1后续的无用处理（如果它还没完成的话）。
• merge：把两个请求的结果流合并，不管哪个先完成，都会触发后续的tap操作。
• map：给每个请求的结果打上来源标记，方便在统一的tap里区分处理逻辑。

边界情况处理 #

• 当call2意外比call1快时：call1会被立刻取消，不会触发它的完成操作，用户只会看到call2的完整信息
• 正常场景下call1先完成：用户先看到基础信息，等call2完成后自动更新为完整信息，体验流畅

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