react如何封装axios
封装axios的基本步骤
在React项目中封装axios可以提高代码复用性、统一处理错误和请求配置。以下是一个常见的封装方法：
创建axios实例
import axios from 'axios';
const instance = axios.create({
baseURL: 'https://api.example.com',
timeout: 10000,
headers: {
'Content-Type': 'application/json'
}
});添加请求拦截器
instance.interceptors.request.use(
config => {
const token = localStorage.getItem('token');
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
},
error => {
return Promise.reject(error);
}
);添加响应拦截器
instance.interceptors.response.use(
response => {
return response.data;
},
error => {
if (error.response) {
switch (error.response.status) {
case 401:
// 处理未授权
break;
case 404:
// 处理未找到
break;
default:
console.error('请求错误:', error);
}
}
return Promise.reject(error);
}
);封装常用请求方法
export const get = (url, params) => {
return instance.get(url, { params });
};
export const post = (url, data) => {
return instance.post(url, data);
};
export const put = (url, data) => {
return instance.put(url, data);
};
export const del = url => {
return instance.delete(url);
};使用封装的请求
import { get, post } from './api';
// 获取数据
const fetchData = async () => {
try {
const response = await get('/users');
console.log(response);
} catch (error) {
console.error(error);
}
};
// 提交数据
const submitData = async data => {
try {
const response = await post('/users', data);
console.log(response);
} catch (error) {
console.error(error);
}
};高级封装选项
可以进一步封装为自定义hook：
import { useState, useEffect } from 'react';
import { get } from './api';
const useApi = (url, params) => {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
const fetchData = async () => {
try {
const result = await get(url, params);
setData(result);
} catch (err) {
setError(err);
} finally {
setLoading(false);
}
};
fetchData();
}, [url, params]);
return { data, loading, error };
};
export default useApi;使用时：
const { data, loading, error } = useApi('/users');
