React Hooks 数据请求库——SWR使用详解
简介
SWR（stale-while-revalidate）是由 Vercel 团队推出的 React Hooks 数据请求库，专注于高效的数据获取、缓存和自动更新。它基于 HTTP 缓存的“陈旧-再验证”策略，能够让页面始终显示最新的数据，同时保证极致的性能和用户体验。
SWR 的核心优势包括：
- 自动缓存和请求去重：相同请求只会发送一次，数据自动缓存，避免重复请求。
- 实时数据更新：支持自动轮询、焦点重新获取、网络恢复自动刷新等机制，保证数据新鲜。
- 灵活的错误重试和加载状态管理：内置错误重试、加载指示等，开发体验极佳。
- 与后端无关：支持 RESTful、GraphQL、数据库等多种数据源，fetcher 可自定义。
安装 SWR
npm install swr基本用法
SWR 的核心是 useSWR Hook。最简单的用法如下：
import useSWR from "swr";const fetcher = (url) => fetch(url).then((res) => res.json());export default function SwrDemo() {const { data, error, isLoading, mutate } = useSWR("https://api.github.com/users/octocat",fetcher);if (isLoading) return <div className="container">加载中...</div>;if (error) return <div className="container">加载失败: {error.message}</div>;return (<div className="container" style={{ padding: 24 }}><h2>GitHub 用户信息（octocat）</h2><imgsrc={data.avatar_url}alt="avatar"width={80}style={{ borderRadius: 8 }}/><p><strong>用户名：</strong> {data.login}</p><p><strong>简介：</strong> {data.bio}</p><p><strong>主页：</strong>{" "}<a href={data.html_url} target="_blank" rel="noopener noreferrer">{data.html_url}</a></p><button onClick={() => mutate()}>刷新</button></div>);
}手动触发请求（mutate）
有时候你需要手动刷新数据，比如用户更新后：
import React from "react";
import useSWR from "swr";const fetcher = (url) => fetch(url).then((res) => res.json());export default function SwrDemo() {// 固定 key，不自动请求const { data, error, isLoading, mutate } = useSWR("octocat", {fetcher: () => {}, // 默认不请求revalidateOnMount: false, // 挂载时不自动请求});// 手动触发 mutateconst handleFetch = async () => {await mutate(() => fetcher("https://api.github.com/users/octocat"), {revalidate: false,});};return (<div className="container" style={{ padding: 24 }}><h2>SWR mutate 手动触发请求示例</h2><buttononClick={handleFetch}disabled={isLoading}style={{padding: "8px 16px",marginBottom: 16,backgroundColor: isLoading ? "#ccc" : "#1890ff",color: "white",border: "none",borderRadius: 4,cursor: isLoading ? "not-allowed" : "pointer",}}>{isLoading ? "请求中..." : "手动获取 GitHub 用户信息"}</button>{error && (<div style={{ color: "red", marginBottom: 16 }}>请求失败: {error.message}</div>)}{data && (<divstyle={{padding: 16,border: "1px solid #d9d9d9",borderRadius: 4,backgroundColor: "#fafafa",}}><h3>用户信息</h3><imgsrc={data.avatar_url}alt="avatar"width={80}style={{ borderRadius: 8, marginBottom: 8 }}/><p><strong>用户名：</strong> {data.login}</p><p><strong>简介：</strong> {data.bio || "暂无简介"}</p><p><strong>主页：</strong>{" "}<a href={data.html_url} target="_blank" rel="noopener noreferrer">{data.html_url}</a></p></div>)}</div>);
}自动重新请求
import useSWR from "swr";const fetcher = (url) => fetch(url).then((res) => res.json());export default function Demo() {const { data, error, isLoading } = useSWR("https://api.github.com/users/octocat",fetcher,{refreshInterval: 3000, // 每3秒自动重新请求一次revalidateOnFocus: false, // 切换标签页时不自动请求});return (<div className="container" style={{ padding: 24 }}><h2>SWR 自动重新请求（轮询）示例</h2><p style={{ color: "#888", fontSize: 12 }}>每3秒自动刷新一次数据</p>{isLoading && <div>加载中...</div>}{error && <div style={{ color: "red" }}>请求失败: {error.message}</div>}{data && (<divstyle={{padding: 16,border: "1px solid #d9d9d9",borderRadius: 4,background: "#fafafa",}}><h3>用户信息</h3><imgsrc={data.avatar_url}alt="avatar"width={80}style={{ borderRadius: 8, marginBottom: 8 }}/><p><strong>用户名：</strong> {data.login}</p><p><strong>简介：</strong> {data.bio || "暂无简介"}</p><p><strong>主页：</strong>{" "}<a href={data.html_url} target="_blank" rel="noopener noreferrer">{data.html_url}</a></p></div>)}</div>);
}分页 useSWRInfinite
import React from "react";
import useSWRInfinite from "swr/infinite";const fetcher = (url) => fetch(url).then((res) => res.json());// 获取每一页的 key
const getKey = (pageIndex, previousPageData) => {// 没有更多数据时if (previousPageData && previousPageData.length === 0) return null;// GitHub 用户分页API（每页5个）return `https://api.github.com/users?since=${pageIndex * 5}&per_page=5`;
};export default function Demo() {const { data, error, isLoading, size, setSize, isValidating } =useSWRInfinite(getKey, fetcher);// 合并所有页的数据const users = data ? [].concat(...data) : [];const isEmpty = data?.[0]?.length === 0;const isReachingEnd = isEmpty || (data && data[data.length - 1]?.length < 5);return (<div className="container" style={{ padding: 24 }}><h2>SWR useSWRInfinite 分页示例</h2><p style={{ color: "#888", fontSize: 12 }}>每页5个用户，点击加载更多</p>{isLoading && <div>加载中...</div>}{error && <div style={{ color: "red" }}>请求失败: {error.message}</div>}<ul style={{ padding: 0, listStyle: "none" }}>{users.map((user) => (<likey={user.id}style={{ display: "flex", alignItems: "center", marginBottom: 12 }}><imgsrc={user.avatar_url}alt={user.login}width={36}style={{ borderRadius: 18, marginRight: 12 }}/><a href={user.html_url} target="_blank" rel="noopener noreferrer">{user.login}</a></li>))}</ul><buttononClick={() => setSize(size + 1)}disabled={isLoading || isValidating || isReachingEnd}style={{padding: "8px 16px",backgroundColor:isLoading || isValidating || isReachingEnd ? "#ccc" : "#1890ff",color: "white",border: "none",borderRadius: 4,cursor:isLoading || isValidating || isReachingEnd? "not-allowed": "pointer",}}>{isReachingEnd ? "没有更多了" : isValidating ? "加载中..." : "加载更多"}</button></div>);
}配置选项
SWR 支持很多配置，比如自动刷新、错误重试等：
const { data, error } = useSWR("/api/user", fetcher, {refreshInterval: 5000, // 每 5 秒自动刷新revalidateOnFocus: true, // 页面聚焦时自动刷新shouldRetryOnError: false, // 出错时不自动重试
});更多配置参数
| 配置项 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| refreshInterval | number | 0 | 自动刷新间隔（毫秒），0 表示不自动刷新 |
| revalidateOnFocus | boolean | true | 页面聚焦时自动重新请求 |
| shouldRetryOnError | boolean | true | 请求出错时是否自动重试 |
| dedupingInterval | number | 2000 | 去重请求的时间间隔（毫秒） |
| errorRetryCount | number | 5 | 出错时重试的最大次数 |
| errorRetryInterval | number | 5000 | 出错重试的时间间隔（毫秒） |
| fallbackData | any | undefined | 初始数据，未请求到数据时使用 |
| suspense | boolean | false | 是否启用 React Suspense |
| onSuccess | function | – | 请求成功时的回调 |
| onError | function | – | 请求失败时的回调 |
与数据库的关系
SWR 只是前端数据请求和缓存工具，实际数据库操作由后端 API 完成。SWR 负责高效请求、缓存和自动刷新，提升用户体验。
总结
- SWR 适合前端高效请求和缓存数据
- 支持自动刷新、错误重试、手动刷新等高级用法
- 结合后端 API，可实现与数据库的数据交互
如需更复杂的用法（如分页、依赖请求等）
React Hooks 数据请求库——SWR使用详解 - 高质量源码分享平台-免费下载各类网站源码与模板及前沿动态资讯