在 Vue 项目中，我们经常会使用 axios 库来进行网络请求。但是在实际开发中，我们需要处理各种异常情况，例如网络连接失败、接口异常等。为了提高开发效率和代码可维护性，我们可以封装 axios 并实现统一异常处理。
为什么要封装 axios？
封装 axios 的目的主要有以下几点：
提高代码可重用性：封装 axios 可以让我们在多个组件中复用相同的网络请求代码，避免在每个组件中都写一遍相同的代码。
实现统一异常处理：封装 axios 可以让我们在一个地方处理所有网络请求的异常情况，例如网络连接失败、接口异常等。
便于接口管理：封装 axios 可以让我们将所有接口都放在一个文件中管理，方便查找和维护。
封装 axios
下面是封装 axios 的代码：
// javascriptcn.com 代码示例
import axios from 'axios'
const instance = axios.create({
baseURL: process.env.VUE_APP_BASE_API,
timeout: 10000
})
// 请求拦截器
instance.interceptors.request.use(
config => {
// 在请求发送之前做一些处理，例如设置请求头信息
config.headers.Authorization = 'Bearer ' + localStorage.getItem('token')
return config
},
error => {
return Promise.reject(error)
}
)
// 响应拦截器
instance.interceptors.response.use(
response => {
// 在响应成功后做一些处理，例如解析响应数据
if (response.status === 200) {
return response.data
} else {
return Promise.reject(response)
}
},
error => {
// 在响应失败后做一些处理，例如统一异常处理
if (error.response) {
switch (error.response.status) {
case 401:
// 未登录，跳转到登录页
break
case 403:
// 权限不足，跳转到错误页
break
case 404:
// 接口不存在，跳转到错误页
break
case 500:
// 服务器错误，跳转到错误页
break
default:
// 其他错误，跳转到错误页
break
}
} else {
// 网络连接失败，跳转到错误页
}
return Promise.reject(error)
}
)
export default instance在上面的代码中，我们使用了 axios.create() 方法来创建一个 axios 实例，然后通过请求拦截器和响应拦截器来实现统一处理。在请求拦截器中，我们可以对请求进行一些处理，例如设置请求头信息；在响应拦截器中，我们可以对响应进行一些处理，例如解析响应数据，同时也可以处理异常情况。
使用封装后的 axios
在组件中使用封装后的 axios 与使用原始的 axios 没有太大区别，只需要将原来的 axios 替换为封装后的 axios 即可。
import axios from '@/utils/request'
export default {
getUserInfo() {
return axios.get('/user/info')
}
}上面的代码中，我们导入了封装后的 axios，并使用它来发送 GET 请求。
总结
封装 axios 并实现统一异常处理可以提高代码可重用性和可维护性，同时也可以让我们在一个地方处理所有网络请求的异常情况。在实际开发中，我们可以根据具体的需求来对封装后的 axios 进行调整和扩展，以达到更好的效果。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65534c67d2f5e1655dd09fe3