如何用Observable实现按钮点击触发的请求缓存与重试机制？

需求：

• 点击按钮时尝试从服务器获取值，若响应成功则保留该值，生命周期内不再发起请求
• 若请求失败则抛出错误并重置状态，以便下次点击按钮时可重试

初始实现的问题：
原代码中使用shareReplay(1)会缓存所有结果（包括错误），导致请求失败后，后续点击按钮仍会拿到之前的错误，无法重新发起请求。

解决方案一：用BehaviorSubject手动管理缓存 #

import { BehaviorSubject, of, first, switchMap } from 'rxjs';

// 初始化缓存，null表示未获取到有效结果
const cachedValue$ = new BehaviorSubject(null);

const value$ = btnClick$.pipe(
  switchMap(() => cachedValue$.pipe(
    first(),
    switchMap(cached => {
      // 已有缓存直接返回
      if (cached !== null) {
        return of(cached);
      }
      // 无缓存则发起请求
      return doFetch().pipe(
        map(response => {
          if (response.isSuccess) {
            // 请求成功，更新缓存
            cachedValue$.next(response.value);
            return response.value;
          }
          // 请求失败，抛出错误，不更新缓存
          throw new Error('服务器响应失败');
        })
      );
    })
  ))
);

value$.subscribe({
  next: x => console.log('获取到值:', x),
  error: err => console.error('请求出错:', err)
});

解决方案二：利用RxJS的share操作符配置重置规则 #

import { share, ReplaySubject } from 'rxjs';

const loader$ = doFetch().pipe(
  map(response => {
    if (response.isSuccess) {
      return response.value;
    }
    throw new Error('服务器响应失败');
  }),
  share({
    connector: () => new ReplaySubject(1), // 缓存成功的结果
    resetOnError: true, // 出错时重置共享状态，下次订阅重新执行源Observable
    resetOnComplete: false,
    resetOnRefCountZero: false
  })
);

const value$ = btnClick$.pipe(
  switchMap(() => loader$)
);

value$.subscribe({
  next: x => console.log('获取到值:', x),
  error: err => console.error('请求出错:', err)
});

方案说明 #

• 方案一通过BehaviorSubject手动控制缓存的更新，逻辑直观，适合需要自定义缓存规则的场景
• 方案二利用RxJS内置的share操作符配置，代码更简洁，依赖RxJS的内置机制实现错误重置与成功缓存

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