axios 失败统一处理

原创

mob64ca12d1e6a9 2024-11-05 08:54:48 ©著作权

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

Axios 失败统一处理的实现方法

在现代前端开发中，HTTP 请求是不可或缺的部分，而使用 Axios 发送请求时，我们经常需要对错误进行处理。为了避免在每一个请求中重复代码，可以通过统一处理的方式，提升代码的可维护性和可读性。接下来，我们将介绍如何实现 Axios 失败的统一处理，具体流程如下：

步骤	描述
1	安装 Axios
2	创建 Axios 实例
3	设置请求拦截器
4	设置响应拦截器
5	封装错误处理函数
6	使用 Axios 实例进行请求

步骤详解

1. 安装 Axios

首先，你需要在项目中安装 Axios。可以使用 npm 或 yarn 安装：

npm install axios
# 或者
yarn add axios

2. 创建 Axios 实例

创建一个 Axios 实例，以便于我们在项目中使用和管理：

import axios from 'axios';

// 创建 Axios 实例
const axiosInstance = axios.create({
    baseURL: ' // 设置基础 URL
    timeout: 10000, // 设置超时时间
});

3. 设置请求拦截器

请求拦截器用于在请求发送前进行一些处理，比如添加 token：

axiosInstance.interceptors.request.use(
    (config) => {
        // 在请求头中添加 Authorization 字段
        const token = localStorage.getItem('token');
        if (token) {
            config.headers['Authorization'] = `Bearer ${token}`;
        }
        return config; // 一定要返回 config
    },
    (error) => {
        return Promise.reject(error); // 请求错误时，直接返回错误
    }
);

4. 设置响应拦截器

响应拦截器用于统一处理请求返回的数据或错误响应：

axiosInstance.interceptors.response.use(
    (response) => {
        // 直接返回响应数据
        return response.data;
    },
    (error) => {
        handleError(error); // 统一错误处理
        return Promise.reject(error); // 返回 Promise 的拒绝状态
    }
);

5. 封装错误处理函数

封装一个专门的错误处理函数，用于处理不同的错误类型：

function handleError(error) {
    if (error.response) {
        // 请求已发出，但服务器响应状态码不在 2xx 范围内
        console.error(`Error: ${error.response.status} - ${error.response.data.message}`);
        alert('请求失败: ' + error.response.data.message);
    } else if (error.request) {
        // 请求已发出，但没有收到响应
        console.error('Error: 请求未收到响应');
        alert('请求未收到响应');
    } else {
        // 其他错误
        console.error('Error:', error.message);
        alert('发生错误: ' + error.message);
    }
}

6. 使用 Axios 实例进行请求

现在你可以使用这个配置好的 Axios 实例进行请求，如下所示：

axiosInstance.get('/endpoint')
    .then((data) => {
        console.log('请求成功:', data);
    })
    .catch((error) => {
        // 错误处理已在拦截器中完成
    });

journey
    title Axios 失败统一处理流程
    section 安装 Axios
      安装npm或yarn: 5: user
    section 创建 Axios 实例
      创建实例并设置baseURL和timeout: 5: user
    section 设置请求拦截器
      添加请求拦截器增加token: 5: user
    section 设置响应拦截器
      处理响应数据和错误: 5: user
    section 封装错误处理函数
      处理不同类型的错误: 5: user
    section 使用 Axios 实例进行请求
      发起请求并处理响应: 5: user