如何用RxJS实现API请求超200ms时显示加载状态？

当然有合适的RxJS方案来解决这个问题！这种避免短请求导致加载界面闪烁的场景，用几个RxJS运算符组合就能轻松实现，核心思路是：只在请求耗时超过200ms时才显示loading，否则直接跳过。

直接上最直观的示例代码：

this.loading = false;

// 定义API请求的Observable
const apiRequest$ = this.apiService.get(`/api/someEndpoint`);

// 创建一个200ms后触发loading的计时器，若API提前完成则取消该计时器
const loadingTrigger$ = timer(200).pipe(
  tap(() => this.loading = true),
  takeUntil(apiRequest$)
);

// 同时订阅API请求和loading计时器
merge(apiRequest$, loadingTrigger$).pipe(
  // 无论请求成功/失败，最终都关闭loading
  finalize(() => this.loading = false),
  // 过滤掉计时器的输出（timer发出的是0），只处理API响应
  filter(result => result !== 0)
).subscribe({
  next: (response) => {
    // 这里编写你的响应处理逻辑
    console.log('获取到API响应:', response);
  },
  error: (err) => {
    // 处理请求错误的逻辑
    console.error('API请求失败:', err);
  }
});

关键运算符解释： #

• timer(200): 创建一个延迟200ms后发出值的Observable，专门用来触发loading显示。
• takeUntil(apiRequest$): 这是实现需求的核心！如果API请求在200ms内完成，这个运算符会立即取消loadingTrigger$的订阅，从而不会执行this.loading = true，完美避免了短请求的加载闪烁。
• merge: 同时订阅API请求和计时器Observable，两者互不阻塞，各自执行逻辑。
• finalize: 无论Observable是正常完成还是出错，都会执行这里的逻辑，确保loading最终被关闭，避免页面一直处于加载状态。
• filter: 因为timer发出的是数字0，我们只需要处理API的响应结果，所以过滤掉计时器的输出，避免干扰响应处理逻辑。

如果你偏爱更紧凑的写法，也可以把逻辑整合到一个pipe链中：

this.loading = false;

this.apiService.get(`/api/someEndpoint`).pipe(
  mergeMap(response => 
    merge(
      of(response),
      timer(200).pipe(tap(() => this.loading = true), takeUntil(of(response)))
    )
  ),
  finalize(() => this.loading = false),
  filter(result => result !== 0)
).subscribe(response => {
  // 处理API响应
});

不过第一种写法的可读性更强，日常开发中更推荐使用。

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