使用 Axios 处理 AxiosError 的三种常见方法
在使用 Axios 时处理 AxiosError 有几种常见的方法:
- 使用 try-catch 语句捕获异常:
try {const response = await axios.get('/api/data');// 处理响应数据
} catch (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);}
}
- 使用 Axios 实例的
interceptors拦截器:
const instance = axios.create();instance.interceptors.response.use((response) => {// 处理成功响应return response;},(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);}return Promise.reject(error);}
);
- 使用
axios.isAxiosError()判断错误是否来自 Axios:
axios.get('/api/data').then((response) => {// 处理响应数据}).catch((error) => {if (axios.isAxiosError(error)) {// 处理 AxiosErrorif (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);}} else {// 处理其他类型的错误console.log('Error', error);}});