多并发 Ajax 请求中应使用全局计数器 pendingRequests 控制全屏 Loading:请求开始时加 1 并显示 Loading,结束时减 1,归零时隐藏;需统一拦截所有请求、用 finally 保证执行、防负值及异常场景。

在多并发 Ajax 请求中,用全局计数器控制全屏 Loading 的启停,核心是:请求开始时计数器加 1、Loading 显示;请求结束(无论成功或失败)时计数器减 1、当计数器归零时关闭 Loading。
全局计数器的设计与初始化
定义一个全局变量(推荐封装在模块或闭包中,避免污染 window),初始值为 0。不要用布尔值开关,否则并发下状态会错乱。
-
不推荐:
let loadingShown = false—— 多个请求同时触发,容易出现“该关没关”或“该开没开” -
推荐:
let pendingRequests = 0—— 每次请求进出都严格增减,状态可追溯
统一拦截请求与响应生命周期
所有 Ajax 调用(如 fetch、axios、XMLHttpRequest)需经过同一入口封装,确保计数器被一致更新。
- 发起请求前:
pendingRequests++,若值从 0 变为 1,则显示全屏 Loading(如操作 DOM 或调用 UI 库的 showLoading 方法) - 请求完成(then/catch 或 finally)后:
pendingRequests--,若值变为 0,则隐藏 Loading - 使用
finally最稳妥(Promise)或XMLHttpRequest.onreadystatechange中判断 readyState === 4
防重复/异常场景处理
网络超时、手动 abort、重复提交等场景可能破坏计数平衡,需额外防护。
立即学习“Java免费学习笔记(深入)”;
- 给每个请求绑定唯一 ID(如 Symbol 或时间戳),abort 前检查是否仍在 pending 状态,再决定是否减计数
- 设置计数器下限为 0(
pendingRequests = Math.max(0, pendingRequests - 1)),防止因异常导致负值 - 开发期可加 console.warn 提示“pendingRequests
简单示例(基于 fetch 封装)
以下是一个轻量封装,支持自动管理 Loading:
let pendingRequests = 0;
const showLoading = () => document.body.classList.add('loading');
const hideLoading = () => document.body.classList.remove('loading');
<p>function ajax(url, options = {}) {
pendingRequests++;
if (pendingRequests === 1) showLoading();</p><p>return fetch(url, options)
.finally(() => {
pendingRequests--;
if (pendingRequests === 0) hideLoading();
});
}</p><p>// 使用
ajax('/api/user').then(res => res.json());
ajax('/api/order').then(res => res.json());</p>


















