axios 错误统一拦截处理

原创

mob64ca12d52440 2024-08-30 08:07:32 ©著作权

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

Axios 错误统一拦截处理

在现代前端开发中，API 请求是不可避免的一部分。而在进行 API 请求时，错误处理非常重要，因为它能帮助我们更好地捕获问题，提供更友好的用户体验。同时，使用 Axios 这样的 HTTP 客户端库可以使我们更方便地进行请求和响应的处理。在这篇文章中，我们将探讨如何通过 Axios 的拦截器实现统一的错误处理，让你的网络请求更加健壮。

什么是 Axios

Axios 是一个基于 Promise 的 HTTP 客户端，旨在向浏览器和 Node.js 提供一种简易的方式来进行 HTTP 请求。借助于 Axios，我们可以轻松地处理请求和响应, 并通过拦截器来统一处理错误。

Axios 错误处理的基础

在使用 Axios 进行 API 请求时，错误的处理是必须的。常见的错误包括网络断开、HTTP 状态码错误等。我们可以通过 Axios 提供的 interceptors 来统一处理这些错误。

设置 Axios 拦截器

以下是一个简单的 Axios 错误处理示例。

import axios from 'axios';

// 创建 Axios 实例
const instance = axios.create({
    baseURL: '
    timeout: 10000,
});

// 添加请求拦截器
instance.interceptors.request.use(
    config => {
        // 在请求发送之前做某些事情
        return config;
    },
    error => {
        // 对请求错误做些什么
        return Promise.reject(error);
    }
);

// 添加响应拦截器
instance.interceptors.response.use(
    response => {
        // 任何状态码都在 2xx 范围内时都会触发此函数
        return response.data; // 直接返回需要的数据
    },
    error => {
        // 对响应错误做些什么
        const { response } = error;

        // 统一处理错误
        if (response) {
            switch (response.status) {
                case 400:
                    console.error('请求错误，请检查请求参数');
                    break;
                case 401:
                    console.error('未授权，请登录');
                    break;
                case 404:
                    console.error('请求的资源未找到');
                    break;
                default:
                    console.error('出现了错误', response.status);
            }
        } else {
            console.error('网络错误或请求超时');
        }
        // 将错误抛出，方便后续处理
        return Promise.reject(error);
    }
);

在上述代码中，我们首先创建了一个 Axios 实例，并通过 interceptors 添加了请求和响应的拦截器。在响应拦截器中，我们根据 HTTP 状态码进行了对应的错误处理，并利用 console.error 输出了错误信息。

错误处理逻辑关系图

为了更直观地展示 Axios 错误处理的逻辑，我们可以使用 ER 图表示不同组件之间的关系：

erDiagram
    axios_instance {
        string baseURL
        int timeout
    }
    request_interceptor {
        string method
        string url
    }
    response_interceptor {
        string status
        string data
    }
    axios_instance ||--o{ request_interceptor : sends
    axios_instance ||--o{ response_interceptor : receives

错误处理的状态图

除了逻辑关系图，状态图也能帮助我们理清不同状态下的错误处理流程。以下是一个示例的状态图：

stateDiagram
    [*] --> Sending
    Sending --> Responded : receive response
    Responded --> Success : status code 2xx
    Responded --> ClientError : status code 4xx
    Responded --> ServerError : status code 5xx
    ClientError --> [*]
    ServerError --> [*]

在状态图中，我们展示了请求的不同状态以及可能的转态跃迁。所有的请求最终都可能形成一个成功或错误的响应。