多并发后端请求场景下isLoading加载状态提前关闭问题求解

核心逻辑是不直接维护布尔类型的isLoading，而是维护一个数字类型的loadingCount，每次发起请求时计数+1，每次请求结束（无论成功失败）时计数-1，只要计数>0就展示加载器，否则隐藏。

具体实现步骤 #

1. 替换状态定义 #

以React为例，把原有布尔类型的加载状态替换为计数器：

// 原写法 const [isLoading, setIsLoading] = useState(false)
const [loadingCount, setLoadingCount] = useState(0);
// 直接通过计算得到是否展示加载器，原有渲染逻辑无需改动
const isLoading = loadingCount > 0;

2. 封装通用请求包装函数 #

把加载计数的逻辑统一封装，不用每个接口重复写控制逻辑：

// 接收请求函数作为入参，自动处理加载计数
const withLoading = async (requestFn) => {
  // 用函数式更新避免并发请求时状态异步更新导致的计数错误
  setLoadingCount(prev => prev + 1);
  try {
    return await requestFn();
  } finally {
    setLoadingCount(prev => prev - 1);
  }
}

3. 改造原有接口调用逻辑 #

原有业务代码几乎不需要改动，只需要给请求函数套一层withLoading包装：

const function1 = () => {
  withLoading(() => route.getSomething1())
    .then(() => {
      // 原有业务处理逻辑保持不变
    })
}

const function2 = () => {
  withLoading(() => route.getSomething2())
    .then(() => {
      // 原有业务处理逻辑保持不变
    })
}

方案优势 #

• 无需为每个接口单独维护加载状态，所有请求共用一套计数逻辑
• 自动适配任意数量的并发请求：只要还有未完成的请求，加载器就不会提前消失，所有请求都结束后才会自动隐藏
• 对原有业务代码侵入性极低，核心逻辑和框架无关，React、Vue、原生JS等场景都可以直接复用

注意事项 #

如果有需要手动终止的请求（比如用户离开页面、主动取消请求），要记得在取消逻辑里也补一次计数-1，避免计数永远大于0导致加载器一直展示。

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