《axios封装错误请求》

在使用axios进行网络请求时，难免会遇到错误请求的情况。解决方案是通过封装axios，统一处理错误请求，从而简化业务代码中的错误处理逻辑，并且可以针对不同类型的错误做出合适的响应。

一、通过处理

我们可以利用axios的来捕获错误请求。

javascript
const axiosInstance = axios.create({
    baseURL: 'https://example.com/api',
    timeout: 5000
});</p>

<p>// 请求
axiosInstance.interceptors.request.use(
    config => {
        // 可以在发送请求之前做些什么，比如添加token等操作
        return config;
    },
    error => {
        // 对请求错误做些什么
        console.log('请求错误:', error);
        return Promise.reject(error);
    }
);</p>

<p>// 响应
axiosInstance.interceptors.response.use(
    response => {
        // 对响应数据做点什么
        return response.data;
    },
    error => {
        // 对响应错误做点什么
        if (error.response) {
            // 请求已发出，但服务器响应的状态码不在 2xx 范围内
            switch (error.response.status) {
                case 401:
                    // 处理未授权
                    break;
                case 403:
                    // 处理禁止访问
                    break;
                case 404:
                    // 处理找不到资源
                    break;
                case 500:
                    // 处理服务器内部错误
                    break;
                default:
                    console.log('其他响应错误:', error.response.data);
            }
        } else if (error.request) {
            // 请求已发出，但没有收到响应
            console.log('没有收到响应:', error.request);
        } else {
            // 其他情况
            console.log('其他错误:', error.message);
        }
        return Promise.reject(error);
    }
);

二、定义自定义错误类

为了更清晰地处理不同类型错误，还可以定义自定义错误类。

javascript
class ApiError extends Error {
    constructor(status, message) {
        super(message);
        this.status = status;
    }
}</p>

<p>axiosInstance.interceptors.response.use(response => response.data, error => {
    if (error.response) {
        const {status, data} = error.response;
        throw new ApiError(status, data.message || '未知错误');
    }
    throw error;
});

然后在调用的地方就可以根据这个自定义错误类来进行更精确的处理了。

这两种思路都可以很好地封装axios的错误请求，开发者可以根据项目的实际需求选择合适的方式，让项目中的网络请求错误处理更加规范和高效。