在 Vue 项目中，我们经常会使用 axios 进行后端 API 请求。在请求数据时，我们通常会在页面上添加一个 loading 状态，以便用户知道请求正在进行中。如果每个请求都手动添加 loading，那么将会非常繁琐和重复。因此，我们可以使用 axios 拦截器来实现全局 loading 的功能。
什么是 axios 拦截器？
axios 拦截器是 axios 提供的一种机制，可以在请求或响应被处理之前对它们进行拦截和处理。axios 拦截器包括请求拦截器和响应拦截器，它们可以用来做很多有用的事情，比如添加请求头、添加 loading 状态、处理错误等。
全局 loading 的实现方法
我们可以在 axios 的请求拦截器和响应拦截器中分别添加 loading 状态。在请求开始时，我们可以添加一个 loading 状态，在请求结束时，我们可以移除这个 loading 状态。下面是一个实现全局 loading 的示例代码：
// javascriptcn.com 代码示例
import axios from 'axios'
import { Loading } from 'element-ui'
// 创建 axios 实例
const instance = axios.create({
baseURL: process.env.VUE_APP_BASE_API,
timeout: 5000
})
// 定义 loading 变量
let loading
// 请求拦截器
instance.interceptors.request.use(config => {
// 在请求开始前显示 loading
loading = Loading.service({
text: '正在加载中......'
})
return config
}, error => {
// 请求错误时
loading.close()
return Promise.reject(error)
})
// 响应拦截器
instance.interceptors.response.use(response => {
// 在响应结束后关闭 loading
loading.close()
return response
}, error => {
// 响应错误时
loading.close()
return Promise.reject(error)
})
export default instance在上面的代码中，我们首先创建了一个 axios 实例，然后定义了一个 loading 变量。在请求拦截器中，我们使用 element-ui 的 Loading 组件创建了一个 loading 状态，并在请求结束时关闭它。在响应拦截器中，我们也是同样的做法。
总结
通过使用 axios 拦截器，我们可以很方便地实现全局 loading 的功能，而不需要在每个请求中手动添加 loading 状态。这样可以减少代码的重复性，提高开发效率。同时，我们还可以在拦截器中做很多其他有用的事情，比如添加请求头、处理错误等。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/655826dcd2f5e1655d25fd41