JavaScript 怎么在接口请求前后自动显示和隐藏加载中状态-js教程-PHP中文网

javascript中实现请求加载状态自动控制的核心是统一拦截请求逻辑，推荐使用axios拦截器配合计数器方案，确保并发请求下loading不闪退；也可封装请求函数或在react中用usestate局部管理。

javascript 怎么在接口请求前后自动显示和隐藏加载中状态

在 JavaScript 中实现接口请求前自动显示、请求后自动隐藏加载状态，核心思路是统一拦截请求逻辑，避免在每个请求处手动控制加载状态。常用方式有三种：封装请求函数、使用 Axios 拦截器（推荐）、或结合 React/Vue 等框架的响应式状态管理。

封装统一的请求函数

把 fetch 或 axios 封装成一个函数，在内部处理加载状态的显隐。适用于小型项目或未使用第三方请求库的场景。

示例（使用 fetch）：

function request(url, options = {}) {
  // 显示加载中（例如修改全局 loading 状态）
  showLoading();
<p>return fetch(url, options)
.then(response => {
if (!response.ok) throw new Error(<code>HTTP ${response.status}</code>);
return response.json();
})
.catch(err => {
console.error('请求失败:', err);
throw err;
})
.finally(() => {
// 无论成功失败都隐藏加载中
hideLoading();
});
}</p><p>// 使用时
request('/api/user').then(data => console.log(data));
</p>

关键点：

showLoading / hideLoading 需要你自己实现，比如操作 DOM 元素、更新 Vue 的 data、React 的 useState 等
finally 确保加载状态一定会被清除，防止异常导致 loading 卡住
可扩展支持取消请求、超时、重试等逻辑

用 Axios 拦截器自动管理（最常用）

Axios 提供了请求和响应拦截器，非常适合集中控制 loading 状态。

示例：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

// 创建 axios 实例
const api = axios.create({ baseURL: '/api' });
<p>// 请求拦截器：发请求前显示 loading
api.interceptors.request.use(config => {
showLoading(); // 例如 document.getElementById('loading').style.display = 'block'
return config;
});</p><p>// 响应拦截器：收到响应（无论成功失败）后隐藏 loading
api.interceptors.response.use(
response => response,
error => {
// 可选：对特定错误做处理，如 token 过期
return Promise.reject(error);
}
).finally(() => hideLoading()); // 注意：interceptors.response.use 不直接支持 finally，需在每个调用处或用自定义封装</p><p>// ✅ 更稳妥的做法：在响应拦截器里统一 hideLoading
api.interceptors.response.use(
response => {
hideLoading();
return response;
},
error => {
hideLoading();
return Promise.reject(error);
}
);
</p>

注意：

拦截器中的 showLoading 和 hideLoading 必须是能影响 UI 的函数，比如修改全局变量 + 触发视图更新
如果页面有多个并发请求，简单地“请求进就 show，响应出就 hide”会导致 loading 闪退——需要计数器（见下一条）

支持并发请求的计数器方案

当多个请求同时发出时，不能每次响应就隐藏 loading，否则会提前消失。应维护一个请求计数器：

每次请求开始：loadingCount++，若从 0 变为 1，则显示 loading
每次请求结束（成功或失败）：loadingCount--，若变为 0，则隐藏 loading

用 Axios 拦截器配合计数器的写法：

let loadingCount = 0;
<p>function showLoading() {
if (loadingCount === 0) {
document.getElementById('loading').style.display = 'flex';
}
loadingCount++;
}</p><p>function hideLoading() {
loadingCount = Math.max(0, loadingCount - 1);
if (loadingCount === 0) {
document.getElementById('loading').style.display = 'none';
}
}
</p>

这样即使 3 个请求并发，也要等全部结束才隐藏 loading，体验更可靠。

在 React 中结合 useState 使用（轻量级场景）

如果只在某个组件内控制 loading，不需全局状态，可以直接用 useState：

function UserList() {
  const [loading, setLoading] = useState(false);
  const [users, setUsers] = useState([]);
<p>const fetchUsers = async () => {
setLoading(true);
try {
const res = await axios.get('/api/users');
setUsers(res.data);
} catch (err) {
console.error(err);
} finally {
setLoading(false);
}
};</p><p>return (
</p><div>
{loading && <div classname="loading">加载中...</div>}
<button onclick="{fetchUsers}">加载用户</button>
{/<em> 渲染 users </em>/}
</div>
);
}

优点是简单清晰；缺点是无法跨组件共享 loading 状态，适合局部逻辑。

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南