React Axios 二次封装：自定义拦截器、Promise 和 错误处理

本文将详细介绍如何在 React 应用中二次封装 axios 请求，包含自定义请求拦截器、使用 Promise 进行封装，以及完善的错误处理机制，并附带简易代码示例和注释。

基本实现

import axios from 'axios';
// 创建一个axios实例
const instance = axios.create({
baseURL: 'https://api.example.com', // API的基础URL
timeout: 5000, // 请求超时时间
});
// 请求拦截器
instance.interceptors.request.use(
config => {
// 在请求发送之前做一些处理，例如添加token到请求头
const token = localStorage.getItem('token');
if (token) {
config.headers['Authorization'] = Bearer ${token};
}
return config;
},
error => {
// 请求错误处理
console.error('请求发生错误:', error);
return Promise.reject(error);
}
);
// 响应拦截器
instance.interceptors.response.use(
response => {
// 在这里对返回的数据进行处理，例如统一处理错误状态码
const data = response.data;
if (data.code !== 0) {
console.error('请求返回错误:', data);
return Promise.reject(data);
}
return data;
},
error => {
// 响应错误处理
console.error('响应发生错误:', error);
return Promise.reject(error);
}
);
// 封装GET请求
export const get = (url, params) => {
return new Promise((resolve, reject) => {
instance
.get(url, { params })
.then(response => {
resolve(response);
})
.catch(error => {
reject(error);
});
});
};
// 封装POST请求
export const post = (url, data) => {
return new Promise((resolve, reject) => {
instance
.post(url, data)
.then(response => {
resolve(response);
})
.catch(error => {
reject(error);
});
});
};

代码说明

• 创建 axios 实例：使用 axios.create() 方法创建 axios 实例，并设置基础 URL 和超时时间。
• 请求拦截器：使用 instance.interceptors.request.use() 设置请求拦截器，可以在请求发送之前进行一些处理，例如添加 token 到请求头。
• 响应拦截器：使用 instance.interceptors.response.use() 设置响应拦截器，可以在响应返回之后进行一些处理，例如统一处理错误状态码。
• 封装 GET 和 POST 请求：封装 get 和 post 方法，使用 Promise 进行封装，方便异步操作和错误处理。

使用方法

import { get, post } from './api';

// 发送GET请求
get('/users', { page: 1, limit: 10 })
.then(response => {
console.log('GET请求成功:', response);
// 处理返回的数据
})
.catch(error => {
console.error('GET请求失败:', error);
// 处理请求错误
});
// 发送POST请求
post('/login', { username: 'admin', password: '123456' })
.then(response => {
console.log('POST请求成功:', response);
// 处理返回的数据
})
.catch(error => {
console.error('POST请求失败:', error);
// 处理请求错误
});

代码说明

• 导入 get 和 post 方法：从 api 模块导入封装的 get 和 post 方法。
• 发送 GET 请求：使用 get() 方法发送 GET 请求，并通过 .then() 和 .catch() 分别处理请求成功和失败的情况。
• 发送 POST 请求：使用 post() 方法发送 POST 请求，并通过 .then() 和 .catch() 分别处理请求成功和失败的情况。

通过以上步骤，您就可以在 React 应用中方便地使用二次封装的 axios 请求，并进行自定义拦截、错误处理和 Promise 封装，使代码更加简洁、易于维护。