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 不仅能提升用户体验，还有助于开发者更好地管理应用的加载状态。无论是通过添加请求拦截器和响应拦截器的基础方式，利用全局状态管理工具进行状态管理，还是使用第三方库来简化实现过程，每种方法都有其适用场景和优缺点。关键是根据项目的实际需要和团队的技术栈，选择最合适的实现方式。
相关问答FAQs：
如何在 Axios 发送请求时实现全局的 loading 动画？
Axios 默认并没有提供全局请求 loading 的功能，但是我们可以通过拦截器来实现这个功能。首先，我们需要创建一个 loading 动画组件，并将其放置在页面的顶层。然后，我们可以使用 Axios 的请求拦截器来在发送每个请求前触发 loading 动画，使用响应拦截器在请求完成后隐藏 loading 动画。具体步骤如下：
- 创建一个 loading 动画组件，可以使用 CSS 或动画库来实现动画效果。
- 在发送请求前，通过请求拦截器在请求的 headers 中添加一个标记，表示正在发送请求。
- 在请求完成后，通过响应拦截器移除请求的标记，表示请求已完成。
- 在页面的顶层组件中引入 loading 动画组件，并使用一个状态变量来控制其显示与隐藏。
- 根据请求的标记状态，来控制 loading 动画的显示与隐藏。
Axios 如何处理请求错误？
在使用 Axios 发送请求时，我们可以通过 Promise 的 catch 方法来处理请求错误。在请求失败时，Axios 会返回一个错误对象，其中包含了错误的状态码、错误信息等相关信息。我们可以捕获这个错误对象，并根据不同的错误情况做出相应的处理。常见的错误处理方式包括：
- 提示用户请求失败的信息，例如网络连接失败或服务器错误。
- 根据错误状态码进行不同的操作，例如未授权的请求跳转到登录页面，或者重定向到错误页面。
- 打印错误信息到控制台，方便开发人员进行调试和排查问题。
Axios 如何取消请求？
在某些情况下，我们可能需要取消 Axios 发送的请求，例如用户在请求发送过程中进行了其他操作，导致当前请求不再需要。Axios 提供了 CancelToken 的机制来取消请求。具体操作如下：
- 创建一个 CancelToken 实例，并将其作为请求的 cancelToken 参数传递给 Axios。
- 当需要取消请求时，调用 CancelToken 实例的 cancel 方法。
- 在请求拦截器中，检查请求的 cancelToken 是否被取消，若被取消则终止请求。
通过这种方式，我们可以及时取消不需要的请求，避免浪费网络资源和服务器资源。
