axios拦截器错误信息处理
在前端开发中，我们经常使用axios作为HTTP请求库来发送请求和接收响应。而axios拦截器则为我们提供了一种方便的方式来在请求发送和响应返回之前进行一些处理。在本文中，我们将重点关注如何在axios拦截器中处理错误信息。
什么是axios拦截器？
axios拦截器是一种机制，可以在请求发送之前和响应返回之后对其进行拦截和处理。它提供了两个拦截器类型：请求拦截器和响应拦截器。
- 请求拦截器：在请求发送之前可以对请求进行一些处理，例如添加headers、验证token等。
- 响应拦截器：在响应返回之后可以对响应进行一些处理，例如统一处理错误信息、格式化数据等。
使用axios拦截器可以帮助我们简化代码，提高开发效率和代码可读性。
错误信息处理
在实际开发中，我们经常需要处理请求过程中可能出现的错误。例如，当请求返回状态码为4xx或5xx时，我们通常需要给用户展示一个错误提示信息。
在axios中，我们可以使用响应拦截器来统一处理错误信息。下面是一个示例：
import axios from 'axios';
// 创建一个axios实例
const instance = axios.create({
baseURL: '
timeout: 5000,
});
// 响应拦截器
instance.interceptors.response.use(
response => {
// 对响应数据进行处理
return response.data;
},
error => {
// 对响应错误进行处理
if (error.response) {
// 请求已发出，但服务器响应状态码不在 2xx 范围内
console.log(error.response.data);
console.log(error.response.status);
console.log(error.response.headers);
} else if (error.request) {
// 请求已发出，但没有收到响应
console.log(error.request);
} else {
// 发生了一些错误，在设置请求时触发
console.log('Error', error.message);
}
console.log(error.config);
return Promise.reject(error);
}
);
// 发送请求
instance.get('/data')
.then(response => {
console.log(response);
})
.catch(error => {
console.log(error);
});
在上面的示例中，我们创建了一个axios实例，并使用响应拦截器来处理错误信息。在错误处理函数中，我们可以根据不同的错误类型进行不同的处理。
- 如果error.response存在，说明服务器已经返回了响应，但是响应状态码不在2xx范围内。我们可以通过error.response.data来获取服务器返回的错误信息，通过error.response.status来获取状态码，通过error.response.headers来获取响应头。
- 如果error.request存在，说明请求已经发送成功，但是没有接收到响应。这种情况可能是网络问题、服务器宕机等原因导致的。
- 如果error.message存在，说明在设置请求时发生了一些错误，例如超时、无效的URL等。
错误信息展示
实际项目中，我们经常需要将错误信息展示给用户。根据项目的需求和UI设计，我们可以将错误信息以弹窗、提示框或者页面提示的形式展示出来。
下面是一个使用Element UI组件库来展示错误信息的示例：
import axios from 'axios';
import { Message } from 'element-ui';
// 创建一个axios实例
const instance = axios.create({
baseURL: '
timeout: 5000,
});
// 响应拦截器
instance.interceptors.response.use(
response => {
// 对响应数据进行处理
return response.data;
},
error => {
// 对响应错误进行处理
if (error.response) {
// 请求已发出，但服务器响应状态码不在 2xx 范围内
Message({
type: 'error',
message: error.response.data.message || '服务器错误',
});
} else if (error.request) {
// 请求已发出，但没有收到响应
Message({
type: 'error',
message: '网络错误，请检查网络连接',
});
} else
