react如何调取数据
React 数据调取方法
在 React 中调取数据可以通过多种方式实现，以下是一些常见的方法：
使用 fetch API
useEffect(() => {
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => setData(data))
.catch(error => console.error('Error:', error));
}, []);使用 axios 库
import axios from 'axios';
useEffect(() => {
axios.get('https://api.example.com/data')
.then(response => setData(response.data))
.catch(error => console.error('Error:', error));
}, []);使用 async/await 语法
useEffect(() => {
const fetchData = async () => {
try {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
setData(data);
} catch (error) {
console.error('Error:', error);
}
};
fetchData();
}, []);使用 React Query
import { useQuery } from 'react-query';
const { data, isLoading, error } = useQuery('data', () =>
fetch('https://api.example.com/data').then(res => res.json())
);使用 SWR
import useSWR from 'swr';
const { data, error } = useSWR('https://api.example.com/data', url =>
fetch(url).then(res => res.json())
);注意事项
- 确保在组件卸载时取消未完成的请求以避免内存泄漏
- 处理加载状态和错误状态以提升用户体验
- 考虑使用缓存策略优化性能
- 对于复杂应用，可以考虑使用状态管理库如Redux来管理数据
