使用 Axios 处理 AxiosError 的三种常见方法

在使用 Axios 时处理 AxiosError 有几种常见的方法:

1. 使用 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);}
}

2. 使用 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);}
);

3. 使用 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);}});