目录
简介
1. 核心功能
2. 基本用法
3. 高级用法
（1）轮询请求（Polling）
（2）防抖（Debounce）
（3）依赖刷新（refreshDeps）
（4）数据缓存（cacheKey）
（5）分页请求
4. 返回值详解
5. 适用场景
6. 总结
简介
useRequest 是 ahooks 提供的一个 强大的异步数据请求管理 Hook，它封装了请求的 加载状态（loading）、数据（data）、错误处理（error）、缓存、轮询、防抖/节流 等常见功能，极大简化了 React 中的异步逻辑处理。
1. 核心功能
| 功能 | 说明 |
|---|---|
| 自动/手动请求 | 默认自动发送请求，也可手动触发（manual: true） |
| 状态管理 | 自动管理 loading、data、error 状态 |
| 生命周期钩子 | onSuccess、onError、onFinally 回调 |
| 轮询请求 | pollingInterval 定时刷新数据 |
| 防抖/节流 | debounceWait、throttleWait 控制请求频率 |
| 依赖刷新 | refreshDeps 依赖变化时自动重新请求 |
| 数据缓存 | cacheKey 缓存数据，避免重复请求 |
| 屏幕聚焦刷新 | refreshOnWindowFocus 窗口重新聚焦时刷新数据 |
| 分页支持 | pagination 轻松管理分页数据 |
| 请求取消 | cancel 方法可取消进行中的请求 |
2. 基本用法
import React from "react";
import { useRequest } from "ahooks";
export default function App() {const fetchData = async (params) => {await new Promise((r) => setTimeout(r, 1000)); // 正常的请求return params; // 这里决定 返回的 data 的值};const { data, loading, error, run } = useRequest(fetchData, {manual: true, // true：触发手动请求，默认自动请求onSuccess: (result) => {// 请求成功时的处理逻辑，对应于fetchData的返回值console.log("请求成功获取的数据", result);},onError: (err) => {// 请求发生错误时的处理逻辑console.log("请求失败获取的数据", err);},});const clickButton = () => {// 在需要的时候手动触发请求，并传递参数run({ name: 123 });};console.log(data);return (<div><div>{loading ? "加载中" : "加载完成"}</div><button onClick={clickButton}>点击请求</button><div>名字:{data?.name}</div></div>);
}
3. 高级用法
（1）轮询请求（Polling）
const { data } = useRequest(getRealTimeData, {pollingInterval: 3000, // 每 3 秒请求一次
});（2）防抖（Debounce）
const { run } = useRequest(searchKeyword, {debounceWait: 500, // 500ms 防抖manual: true,
});<input onChange={(e) => run(e.target.value)} />（3）依赖刷新（refreshDeps）
const [userId, setUserId] = useState(1);
const { data } = useRequest(() => getUser(userId), {refreshDeps: [userId], // userId 变化时自动重新请求
});（4）数据缓存（cacheKey）
const { data } = useRequest(getData, {cacheKey: 'user-data', // 缓存 key
});// ------------获取缓存数据--------
import { getCache } from 'ahooks';const cachedData = getCache('user-data');
console.log(cachedData); // { data: ..., timestamp: ... }// ------------设置缓存数据--------
import { setCache } from 'ahooks';// 手动更新缓存
setCache('user-data', { data: { name: '手动更新' }, timestamp: Date.now() });// ------------清除缓存数据--------
import { clearCache } from 'ahooks';clearCache('user-data'); // 删除指定缓存
clearCache(); // 清空所有缓存（5）分页请求
const { data, pagination } = useRequest(({ current, pageSize }) => fetchData({ current, pageSize }),{paginated: true, // 启用分页模式defaultPageSize: 10,}
);<TabledataSource={data?.list}pagination={pagination}
/>4. 返回值详解
useRequest 返回一个对象，包含以下属性：
| 属性 | 类型 | 说明 |
|---|---|---|
data | any | 请求返回的数据 |
loading | boolean | 是否正在加载 |
error | Error | 请求错误信息 |
run | function | 手动触发请求（自动处理 loading） |
runAsync | function | 手动触发请求（返回 Promise） |
refresh | function | 重新发起上一次请求 |
mutate | function | 直接修改 data（如乐观更新） |
cancel | function | 取消当前请求 |
5. 适用场景
-
数据获取（GET 请求）
-
表单提交（POST/PUT/DELETE）
-
搜索建议（防抖优化）
-
实时数据（轮询）
-
分页/无限加载
-
缓存优化（减少重复请求）
6. 总结
useRequest 是 ahooks 最强大的 Hook 之一，它：
✅ 减少样板代码（不用手动写 loading、error 状态）
✅ 内置优化策略（防抖、节流、缓存、轮询）
✅ 灵活可控（支持手动触发、依赖刷新、乐观更新）
