react如何封装请求
封装请求的常见方法
在React中封装HTTP请求通常涉及创建可复用的函数或钩子，以减少重复代码并统一处理错误、loading状态等。以下是几种典型实现方式：
使用axios实例封装
创建基础的axios实例，配置拦截器和默认参数：
// utils/request.js
import axios from 'axios';
const instance = axios.create({
baseURL: 'https://api.example.com',
timeout: 10000,
});
// 请求拦截器
instance.interceptors.request.use(config => {
config.headers.Authorization = `Bearer ${localStorage.getItem('token')}`;
return config;
});
// 响应拦截器
instance.interceptors.response.use(
response => response.data,
error => {
console.error('API Error:', error);
return Promise.reject(error);
}
);
export default instance;自定义hook封装
创建useFetch钩子管理请求状态：
// hooks/useFetch.js
import { useState, useEffect } from 'react';
import request from '../utils/request';
function useFetch(url) {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);
useEffect(() => {
const fetchData = async () => {
setLoading(true);
try {
const result = await request.get(url);
setData(result);
} catch (err) {
setError(err);
} finally {
setLoading(false);
}
};
fetchData();
}, [url]);
return { data, loading, error };
}
export default useFetch;高阶组件封装
通过HOC包装组件提供请求能力：
// hocs/withRequest.js
import React from 'react';
import request from '../utils/request';
function withRequest(WrappedComponent) {
return function WithRequest(props) {
const [data, setData] = React.useState(null);
const fetchData = async (url) => {
try {
const result = await request.get(url);
setData(result);
} catch (error) {
console.error(error);
}
};
return <WrappedComponent {...props} data={data} fetchData={fetchData} />;
};
}
export default withRequest;请求工厂函数
创建不同类型的请求方法：
// services/api.js
import request from '../utils/request';
export const getUsers = (params) => request.get('/users', { params });
export const createUser = (data) => request.post('/users', data);
export const updateUser = (id, data) => request.put(`/users/${id}`, data);关键优化点
- 错误处理：统一在拦截器中处理HTTP错误码和业务错误码
- 取消请求：使用AbortController避免组件卸载后的内存泄漏
- TypeScript支持：为请求函数添加类型定义
- 缓存策略：根据需要实现SWR或缓存去重
- Mock适配：开发环境注入Mock服务拦截请求
使用示例
组件内调用自定义hook：
function UserList() {
const { data, loading, error } = useFetch('/users');
if (loading) return <div>Loading...</div>;
if (error) return <div>Error!</div>;
return (
<ul>
{data?.map(user => <li key={user.id}>{user.name}</li>)}
</ul>
);
}
