React ahooks——useRequest

目录

简介

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 状态）
✅ 内置优化策略（防抖、节流、缓存、轮询）
✅ 灵活可控（支持手动触发、依赖刷新、乐观更新）