Axios 如何实现全局请求 loading

Axios 如何实现全局请求 loading

Axios 的全局请求 Loading 是一种非常实用的功能，特别是在提高用户体验方面。通过添加请求拦截器和响应拦截器、利用全局状态管理工具、或是使用第三方库来实现。拥有良好的全局请求 Loading 机制，能够让用户明确知道页面数据正在加载中，减少因等待而产生的不确定感。

在众多实现方法中，添加请求拦截器和响应拦截器是一种最直接且易于理解的方式。通过在发送请求前展示 Loading 状态，在请求完成后隐藏 Loading 状态，实现全局的数据加载提示。这种方法不仅能提升用户体验，还能给开发者一个处理请求前后逻辑的好机会。

一、添加请求和响应拦截器

在 Axios 中，请求拦截器允许我们在发送请求之前执行一些操作，响应拦截器则让我们在请求响应之后执行操作。利用这两个拦截器，可以很容易地实现全局 Loading。

首先，我们需要定义一个显示和隐藏 Loading 状态的方法。这可以是简单的 DOM 操作，也可以是调用 UI 框架提供的 Loading 组件方法。

其次，设置请求拦截器。在每次发送请求之前，通过拦截器显示 Loading 状态。这简单几行代码即可实现：

axios.interceptors.request.use(config => {  

  // 显示 Loading  
  showLoading();  
  return config;  
}, error => {  
  // 错误处理  
  return Promise.reject(error);  
});  

紧接着，设置响应拦截器。无论请求成功还是失败，在接收到响应后，隐藏 Loading 状态：

axios.interceptors.response.use(response => {  

  // 隐藏 Loading  
  hideLoading();  
  return response;  
}, error => {  
  // 隐藏 Loading  
  hideLoading();  
  // 错误处理  
  return Promise.reject(error);  
});  

二、利用全局状态管理工具

当项目内容复杂，或是需要在多个地方管理 Loading 状态时，单纯通过拦截器可能不够灵活。这时，引入全局状态管理工具（如 Vuex、Redux）会是一个更佳的选择。

首先，在全局状态管理工具中定义 Loading 状态，以及改变该状态的 actions 或 mutations。

然后，在请求拦截器和响应拦截器中不再直接操作 DOM 或调用 UI 组件，而是通过改变全局状态来控制 Loading 的显示与隐藏。这种方式的好处在于，Loading 状态的管理被集中，便于维护和测试。

三、使用第三方库

对于希望减少工作量的开发者，使用第三方库来管理 Axios 的全局请求 Loading 是一个不错的选择。有些库专门为此设计，能够无缝集成到项目中，例如 nprogress、axios-progress-bar 等。

使用第三方库，通常只需要简单的配置即可使用。例如，如果使用 axios-progress-bar，其基本使用方式是：

import { loadProgressBar } from 'axios-progress-bar'  

import 'axios-progress-bar/dist/nprogress.css'  
loadProgressBar();  

通过上面的代码，就可以在每次 Axios 请求时自动显示进度条，无需手动控制 Loading 状态。

四、总结

实现 Axios 的全局请求 Loading 不仅能提升用户体验，还有助于开发者更好地管理应用的加载状态。无论是通过添加请求拦截器和响应拦截器的基础方式，利用全局状态管理工具进行状态管理，还是使用第三方库来简化实现过程，每种方法都有其适用场景和优缺点。关键是根据项目的实际需要和团队的技术栈，选择最合适的实现方式。