axios响应拦截器处理错误

原创

mob649e8168b406 2024-05-10 04:28:12 ©著作权

©著作权归作者所有：来自51CTO博客作者mob649e8168b406的原创作品，请联系作者获取转载授权，否则将追究法律责任

实现axios响应拦截器处理错误

介绍

作为一名经验丰富的开发者，我将向你介绍如何在axios中实现响应拦截器处理错误的功能。这对于提高代码的健壮性和用户体验至关重要。

流程图

flowchart TD
    A[发送请求] --> B{请求成功？}
    B -->|是| C[返回响应数据]
    B -->|否| D[错误处理]

类图

classDiagram
    class Axios {
        + interceptors
        + request()
        + response()
    }

实现步骤

首先，让我们来看看整个实现的步骤：

步骤	操作
1	创建axios实例并设置响应拦截器
2	在拦截器中处理错误信息

代码示例

1. 创建axios实例并设置响应拦截器
```javascript
// 引入axios
import axios from 'axios';

// 创建axios实例
const instance = axios.create();

// 设置响应拦截器
instance.interceptors.response.use(response => {
    // 处理响应数据
    return response.data;
}, error => {
    // 处理错误信息
    return Promise.reject(error);
});

2. 在拦截器中处理错误信息
```javascript
// 处理错误信息
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 {
        // 请求没有发出，网络错误、服务器无响应等
        console.log('Error', error.message);
    }
    return Promise.reject(error);
});