react公用组件如何请求接口
公用组件请求接口的实现方法
在React中，公用组件请求接口通常需要考虑组件的复用性、状态管理以及接口调用的封装。以下是几种常见的实现方式：
使用自定义Hook封装接口请求
自定义Hook可以封装接口请求逻辑，便于在多个组件中复用：
import { useState, useEffect } from 'react';
import axios from 'axios';
function useApi(url) {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);
useEffect(() => {
const fetchData = async () => {
setLoading(true);
try {
const response = await axios.get(url);
setData(response.data);
} catch (err) {
setError(err);
} finally {
setLoading(false);
}
};
fetchData();
}, [url]);
return { data, loading, error };
}通过Props传递API调用方法
父组件可以传递API调用方法给公用组件：
function ParentComponent() {
const fetchData = async () => {
const response = await fetch('/api/data');
return response.json();
};
return <CommonComponent fetchData={fetchData} />;
}
function CommonComponent({ fetchData }) {
const [data, setData] = useState(null);
useEffect(() => {
const loadData = async () => {
const result = await fetchData();
setData(result);
};
loadData();
}, [fetchData]);
// 渲染逻辑...
}使用Context共享API服务
通过Context可以全局共享API服务：
const ApiContext = React.createContext();
function ApiProvider({ children }) {
const api = {
get: async (url) => {
const response = await fetch(url);
return response.json();
},
post: async (url, data) => {
// POST请求实现...
}
};
return <ApiContext.Provider value={api}>{children}</ApiContext.Provider>;
}
function CommonComponent() {
const api = useContext(ApiContext);
const [data, setData] = useState(null);
useEffect(() => {
const loadData = async () => {
const result = await api.get('/api/data');
setData(result);
};
loadData();
}, [api]);
// 渲染逻辑...
}使用高阶组件封装
高阶组件可以增强公用组件的API调用能力：
function withApi(WrappedComponent, apiConfig) {
return function(props) {
const [apiData, setApiData] = useState(null);
const [loading, setLoading] = useState(false);
useEffect(() => {
const fetchData = async () => {
setLoading(true);
try {
const response = await fetch(apiConfig.url);
const data = await response.json();
setApiData(data);
} finally {
setLoading(false);
}
};
fetchData();
}, []);
return <WrappedComponent {...props} apiData={apiData} loading={loading} />;
};
}注意事项
- 公用组件应尽量保持纯净，避免直接包含API调用细节
- 考虑错误处理和加载状态的统一管理
- 对于需要认证的API，确保正确处理授权头
- 在组件卸载时取消未完成的请求，避免内存泄漏
以上方法可以根据具体项目需求和技术栈选择最适合的实现方式。
