TypeScript与RxJS中subscribe完成模式：如何避免重复调用set loading=false？

嘿，这个问题我太熟了——很多人刚开始用RxJS的时候都会踩这个重复写状态重置的坑，其实咱们用RxJS自带的操作符就能完美解决！

先还原一下你大概率会遇到的代码场景：

// 示例原始代码
let loading = true;

yourDataObservable$
  .subscribe({
    next: (response) => {
      // 处理返回的数据
      loading = false; // 第一次写重置逻辑
    },
    error: (error) => {
      // 处理错误情况
      loading = false; // 第二次重复写同样的逻辑
    }
  });

这种重复代码不仅冗余，还容易出bug——比如哪天改代码时忘了在error分支加重置，页面就会一直卡在加载状态。这里推荐用**finalize操作符**来统一处理这类收尾逻辑：

let loading = true;

yourDataObservable$
  .pipe(
    // 核心：finalize会在Observable完成/出错时无条件执行回调
    finalize(() => {
      loading = false; // 只需要写这一次！
    })
  )
  .subscribe({
    next: (response) => {
      // 处理返回的数据
    },
    error: (error) => {
      // 处理错误情况
    }
  });

为什么这个方案这么好用？ #

• finalize的回调是全局收尾：不管Observable是正常complete，还是抛出error终止，这个逻辑都会触发，完美匹配loading状态需要在请求结束（无论成败）时重置的需求。
• 代码更简洁易维护：把重复的状态重置逻辑抽离到一处，后期改需求只需要动这一个地方。
• 减少人为失误：再也不用担心漏写某一个分支的状态重置了。

如果你的项目里有大量类似的异步请求+loading场景，还可以把这个逻辑封装成自定义操作符，进一步提升复用性：

// 自定义操作符：统一处理loading状态
export function withLoading(loadingRef: { value: boolean }) {
  return (source: Observable<any>) => {
    loadingRef.value = true;
    return source.pipe(
      finalize(() => {
        loadingRef.value = false;
      })
    );
  };
}

// 使用时的代码会更清爽
let loading = { value: false };
yourDataObservable$
  .pipe(withLoading(loading))
  .subscribe({
    // ... 业务处理逻辑
  });

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