多并发 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）需经过同一入口封装，确保计数器被一致更新。
JavaStoryDevelop
下载
你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。 它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在
- 发起请求前：
pendingRequests++，若值从 0 变为 1，则显示全屏 Loading（如操作 DOM 或调用 UI 库的 showLoading 方法） - 请求完成（then/catch 或 finally）后：
pendingRequests--，若值变为 0，则隐藏 Loading - 使用
finally最稳妥（Promise）或XMLHttpRequest.onreadystatechange中判断 readyState === 4
防重复/异常场景处理
网络超时、手动 abort、重复提交等场景可能破坏计数平衡，需额外防护。
- 给每个请求绑定唯一 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>Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
