Ajax 请求中控制 loading 动画的核心是请求开始时显示、结束时隐藏，需统一管理 isLoading 状态，通过事件处理器立即启用、finally 中关闭，并防重复请求与封装复用。
Ajax 请求过程中控制 loading 动画，核心是“请求开始时显示、请求结束时隐藏”，关键在于统一管理 loading 状态，避免重复触发或遗漏关闭。
在发起请求前显示 loading
调用 fetch 或 XMLHttpRequest 前，先操作 DOM 或状态变量激活 loading。推荐用一个全局或组件级的 loading 标志位（如 isLoading），配合 CSS 类或 UI 组件控制显隐。
- 若用纯 HTML + CSS：给 loading 元素（如
<div id="loading">加载中...</div>）添加display: block或切换.show类 - 若用框架（React/Vue）：更新 state 或 ref，让视图响应式重渲染
- 注意：不要只靠“发送请求”这一步判断——网络延迟可能导致用户点击后无反馈，建议在事件处理器中立即启用 loading
在请求完成（无论成功失败）后关闭 loading
必须确保 loading 在 then/catch、finally 或 Promise.finally() 中关闭。仅在 then 里关 loading 是常见错误——请求失败时 loading 就会一直挂着。
- 使用
fetch时：fetch(...).then(...).catch(...).finally(() => hideLoading()) - 使用
XMLHttpRequest时：在onload和onerror回调之后都调用关闭逻辑 - 封装请求函数时，把 loading 控制逻辑内置进去，避免每次手动写
finally
防止重复请求导致 loading 状态错乱
用户快速多次点击按钮，可能触发多个并发请求，造成 loading 开/关不同步。需加一层防抖或禁用机制。
立即学习“Java免费学习笔记（深入）”；
- 请求发起前检查
isLoading，为 true 则直接 return - 按钮点击后置为 disabled，并在请求结束后恢复
- 更稳妥的做法：用 AbortController 配合取消未完成请求，再统一处理 loading 状态
用 Promise 封装实现可复用的 loading 请求函数
把 loading 控制和请求逻辑打包成函数，提升复用性和可维护性。例如：
示例（原生 fetch 封装）：
function requestWithLoading(url, options = {}) {<br> showLoading();<br> return fetch(url, options)<br> .finally(() => hideLoading());<br>}
这样每次调用 requestWithLoading('/api/data').then(...) 就自动处理 loading，无需重复写开关逻辑。
