目录
简介
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,
}
);
<Table
dataSource={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 状态）
✅ 内置优化策略（防抖、节流、缓存、轮询）
✅ 灵活可控（支持手动触发、依赖刷新、乐观更新）