当前位置：首页 > web >正文

React Hooks 数据请求库——SWR使用详解

web 2025/7/17 5:47:11

简介

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	–	请求失败时的回调