React 数据请求 — Fetch API 实战
在 React 中发送 HTTP 请求，处理加载、错误、成功三种状态 · 难度：进阶 · +20XP
React 中请求数据
在 React 组件中，通常在 useEffect 中发起 API 请求。处理三种状态是必须的：
| 状态 | UI |
|---|---|
| loading | 加载中... / 骨架屏 |
| error | 错误提示 + 重试按钮 |
| success | 展示数据 |
完整请求模式
function PostList() {
const [posts, setPosts] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
fetch("/api/posts")
.then(r => { if (!r.ok) throw new Error("请求失败"); return r.json(); })
.then(data => setPosts(data))
.catch(e => setError(e.message))
.finally(() => setLoading(false));
}, []);
if (loading) return <div>⏳ 加载中...</div>;
if (error) return <div>❌ {error} <button onClick={retry}>重试</button></div>;
return <ul>{posts.map(p => <li key={p.id}>{p.title}</li>)}</ul>;
}