react公用组件如何请求接口
公用组件请求接口的实现方法
公用组件在React中请求接口需要遵循高内聚、低耦合原则，确保组件可复用且不依赖特定业务逻辑。以下是几种常见实现方式：
使用自定义Hook封装请求逻辑
创建可复用的数据请求Hook，组件通过调用Hook获取数据：
// useApiData.js
import { useState, useEffect } from 'react';
import axios from 'axios';
function useApiData(url) {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);
useEffect(() => {
setLoading(true);
axios.get(url)
.then(response => setData(response.data))
.catch(err => setError(err))
.finally(() => setLoading(false));
}, [url]);
return { data, loading, error };
}
// 组件中使用
function UserList() {
const { data, loading, error } = useApiData('/api/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>;
}通过Props注入请求方法
父组件传递API请求函数作为props，保持组件与具体请求实现解耦：
// UserList.jsx
function UserList({ fetchData }) {
const [users, setUsers] = useState([]);
useEffect(() => {
fetchData().then(data => setUsers(data));
}, [fetchData]);
return <ul>{users.map(user => <li key={user.id}>{user.name}</li>)}</ul>;
}
// 父组件中
function ParentComponent() {
const fetchUsers = () => axios.get('/api/users').then(res => res.data);
return <UserList fetchData={fetchUsers} />;
}使用Context提供API服务
通过React Context全局提供API服务，任意组件均可消费：
// ApiContext.js
const ApiContext = createContext();
function ApiProvider({ children }) {
const get = (url) => axios.get(url).then(res => res.data);
return (
<ApiContext.Provider value={{ get }}>
{children}
</ApiContext.Provider>
);
}
// 组件中使用
function UserList() {
const { get } = useContext(ApiContext);
const [users, setUsers] = useState([]);
useEffect(() => {
get('/api/users').then(data => setUsers(data));
}, [get]);
return <ul>{users.map(user => <li key={user.id}>{user.name}</li>)}</ul>;
}注意事项
- 错误处理应统一封装，避免每个组件重复处理
- 考虑添加请求取消逻辑，防止组件卸载后仍更新状态
- 对于需要参数化的请求，可通过高阶函数生成特定请求方法
- 使用TypeScript时明确定义API响应类型，增强类型安全
// TypeScript示例
interface User {
id: number;
name: string;
}
function useApiData<T>(url: string) {
const [data, setData] = useState<T | null>(null);
// ...其余实现
}
// 使用时指定类型
const { data } = useApiData<User[]>('/api/users');
