react如何封装axios
封装axios的基本步骤
在React中封装axios可以提高代码复用性、统一错误处理和请求配置。以下是一个常见的封装方法：
创建独立的axios实例文件（如api.js）：
import axios from 'axios';
const instance = axios.create({
baseURL: 'https://api.example.com',
timeout: 10000,
headers: {'Content-Type': 'application/json'}
});请求拦截器处理
添加请求拦截器用于统一处理token等认证信息：
instance.interceptors.request.use(
config => {
const token = localStorage.getItem('token');
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
},
error => Promise.reject(error)
);响应拦截器处理
添加响应拦截器统一处理响应数据和错误：
instance.interceptors.response.use(
response => {
if (response.data.code === 200) {
return response.data;
}
return Promise.reject(response.data);
},
error => {
if (error.response) {
switch (error.response.status) {
case 401:
// 处理未授权
break;
case 404:
// 处理未找到
break;
default:
console.error('请求错误');
}
}
return Promise.reject(error);
}
);封装常用请求方法
封装GET、POST等常用方法：
export const get = (url, params) => instance.get(url, { params });
export const post = (url, data) => instance.post(url, data);
export const put = (url, data) => instance.put(url, data);
export const del = url => instance.delete(url);使用示例
在组件中使用封装好的方法：
import { get, post } from './api';
// GET请求
get('/users', { page: 1 })
.then(data => console.log(data))
.catch(err => console.error(err));
// POST请求
post('/login', { username, password })
.then(data => console.log(data))
.catch(err => console.error(err));高级配置选项
可添加更多自定义配置：
export const request = (options) => {
return instance({
method: options.method || 'get',
url: options.url,
params: options.params,
data: options.data,
...options.config
});
};类型安全（TypeScript）
使用TypeScript增加类型定义：
interface ResponseData<T = any> {
code: number;
data: T;
message: string;
}
export const get = <T>(url: string, params?: any): Promise<ResponseData<T>> => {
return instance.get(url, { params });
};这种封装方式提供了统一的错误处理、请求配置和响应处理，使项目中的HTTP请求更加规范且易于维护。
