在react中如何封装axios
封装 Axios 的基本结构
创建一个独立的 axios 实例，配置基础 URL 和默认请求头。通常在 src/utils 或 src/api 目录下新建 http.js 文件：
import axios from 'axios';
const http = axios.create({
baseURL: 'https://api.example.com', // 替换为实际 API 地址
timeout: 10000,
headers: { 'Content-Type': 'application/json' }
});请求拦截器
添加请求拦截器用于统一处理请求前的逻辑，例如添加认证 token：
http.interceptors.request.use(
config => {
const token = localStorage.getItem('token');
if (token) config.headers.Authorization = `Bearer ${token}`;
return config;
},
error => Promise.reject(error)
);响应拦截器
添加响应拦截器处理通用响应逻辑，例如错误状态码处理：
http.interceptors.response.use(
response => response.data,
error => {
if (error.response) {
switch (error.response.status) {
case 401:
console.error('未授权');
break;
case 404:
console.error('API 不存在');
break;
default:
console.error('其他错误');
}
}
return Promise.reject(error);
}
);封装通用请求方法
将常用的 HTTP 方法封装为统一接口：
export const get = (url, params) => http.get(url, { params });
export const post = (url, data) => http.post(url, data);
export const put = (url, data) => http.put(url, data);
export const del = url => http.delete(url);类型支持（TypeScript）
为封装增加类型定义：
interface ResponseData<T> {
code: number;
data: T;
message: string;
}
export const get = <T>(url: string, params?: any): Promise<ResponseData<T>> =>
http.get(url, { params });
export const post = <T>(url: string, data?: any): Promise<ResponseData<T>> =>
http.post(url, data);使用示例
在组件中调用封装好的方法：
import { get, post } from '@/utils/http';
// 获取数据
const fetchData = async () => {
try {
const res = await get('/endpoint', { id: 1 });
console.log(res.data);
} catch (err) {
console.error(err);
}
};
// 提交数据
const submitData = async () => {
try {
const res = await post('/endpoint', { name: 'test' });
console.log(res);
} catch (err) {
console.error(err);
}
};高级配置选项
可根据项目需求扩展更多配置：
// 取消请求功能
const CancelToken = axios.CancelToken;
let cancel;
http.get('/user', {
cancelToken: new CancelToken(c => {
cancel = c;
})
});
// 取消请求
cancel();这种封装方式提供了统一的错误处理、请求管理和类型支持，同时保持了 axios 的灵活性。根据实际项目需求，可以进一步扩展拦截器逻辑或添加更多辅助功能。
