网络指示器驱动更新：让开发更高效的实用技巧

做前端开发的时候，经常遇到页面加载状态不明确的问题。用户点了个按钮，页面没反应，到底是卡了还是在加载？这时候，一个清晰的网络指示器就特别关键。但很多人忽略了背后的驱动逻辑——指示器的状态控制其实依赖于底层的驱动更新机制。

什么是网络指示器驱动更新

网络指示器不是简单地加个旋转图标就完事了。它需要和实际的网络请求联动，比如发起请求时显示，请求结束时隐藏。这个“联动”就是靠驱动更新来实现的。说白了，就是通过代码监听请求生命周期，动态修改指示器的显隐状态。

举个常见的场景：你在写一个数据看板，每次切换标签都要拉新数据。如果网络慢，用户可能连点好几次，导致重复请求。这时候如果你的指示器没有及时响应请求状态，用户根本不知道系统其实在干活。

用 Axios 拦截器自动控制指示器

实际项目中，可以用 Axios 的拦截器统一处理。请求发出前开启指示器，响应回来后关闭。这样不用每个接口都手动写显隐逻辑，省事还不容易漏。

axios.interceptors.request.use(config => {
  // 请求开始，显示指示器
  showNetworkIndicator();
  return config;
});

axios.interceptors.response.use(response => {
  // 请求完成，隐藏指示器
  hideNetworkIndicator();
  return response;
}, error => {
  // 出错也得关指示器
  hideNetworkIndicator();
  return Promise.reject(error);
});

这段代码一加，所有用 Axios 发的请求都会自动带上指示器控制。你不需要在每个 fetchData() 里写 setLoading(true) 和 setLoading(false)，维护起来轻松多了。

注意边界情况

有时候多个请求同时发，一个回来了就把指示器关了，其他还在跑的请求就没提示了。解决办法是用计数器，每发起一个请求 +1，每完成一个 -1，归零才隐藏。

let requestCount = 0;

function showNetworkIndicator() {
  if (requestCount === 0) {
    document.getElementById('indicator').style.display = 'block';
  }
  requestCount++;
}

function hideNetworkIndicator() {
  requestCount--;
  if (requestCount <= 0) {
    requestCount = 0;
    document.getElementById('indicator').style.display = 'none';
  }
}

这种小改进，能让体验更稳。尤其是在复杂页面，数据来源多，异步任务交错，靠单个布尔值控制很容易翻车。

现在不少 UI 框架也内置了类似能力，比如 Vue Use 里的 useNetworkStatus，React Query 也能自动管理加载状态。但理解底层怎么驱动更新，才能在框架之外灵活应对各种定制需求。