Skip to Content
🎉 Nextra 4.0 is released. dimaMachina is looking for a new job or consulting .
请求useRequest依赖刷新

在部分业务场景下，当我们使用 useRequest（或类似的请求 Hook）与页面/组件状态结合时，常常需要在依赖发生变化时自动触发请求。通过将依赖项传递给 options.params，useRequest 可以在参数变化时自动重新发起请求（并携带最新的参数），从而减少手动调用的繁琐流程。

依赖参数自动刷新

示例 1：使用 params 字段

const [userId, setUserId] = useState('1');
const { data } = useRequest(getUserSchool, {
  // 当 userId 改变时，自动触发新的请求
  params: userId,
});

在以上示例中：

  • useRequest 在初始渲染时会调用 getUserSchool('1')。
  • 当 userId 更新（例如，通过 setUserId('2')）后，useRequest 会自动检测到依赖的 params 发生变化，再次调用 getUserSchool('2')。

等同于下方的手动实现逻辑，只不过无需自行设置 useEffect 来监听依赖变化并调用 run 方法：

const [userId, setUserId] = useState('1');
const { data, run } = useRequest((id) => getUserSchool(id));
 
// 当 userId 变化时，手动触发请求
useEffect(() => {
  run(userId);
}, [userId]);

使用 options.params 时，可显著简化代码书写，减少不必要的 useEffect 与回调逻辑。

收集依赖自动刷新示例

收集单一类型依赖

Username: loading...
const [userId, setUserId] = useState<number>(0);
const { data, loading } = useRequest(getUsername, {
  // 直接将数值类型的 userId 作为 params
  params: userId,
});
 
return (
  <div className="flex flex-col gap-2">
    <p>Username: {loading ? 'loading...' : data}</p>
    <Button onClick={() => setUserId(Math.random())}>只改变参数</Button>
  </div>
);
  • 在这里，userId 是一个简单的 number 类型，更新后即会重新请求。
  • 该示例演示了 useRequest 如何在参数数值变化时，自动触发请求刷新并显示最新数据。

收集对象依赖

Username: loading...
const [userId, setUserId] = useState<number>(0);
 
const { data, loading } = useRequest(getUsername, {
  // 将对象 { id: userId } 作为依赖
  params: { id: userId },
  onBefore: () => {
    toast(`改变了参数 { id: ${userId} }`, {
      position: 'top-center'
    });
  }
});
 
return (
  <div className="flex flex-col gap-2">
    <p>Username: {loading ? 'loading...' : data}</p>
    <Button onClick={() => setUserId(Math.random())}>只改变参数</Button>
  </div>
);
  • 在这里，我们将 params 设置为一个对象 { id: userId }。只要这个对象里任意字段（如 id）发生变化，则会再次触发请求。
  • 另外，通过 onBefore 回调可以在请求发出前进行一些额外操作（如埋点、提示等）。

API

Options

参数说明类型默认值
params依赖参数，在参数变化时自动发起请求any{}

提示：

  1. 如果想要传入对象，请确保对象在依赖变化时会生成新的引用或值，否则 React 的浅比较可能导致无法正确触发重新请求。
  2. 如果只想针对部分键值的变化进行监听，可以手动编写逻辑或确保对比产生新对象（如 Object.assign({}, old, new)）。

备注

  • 若设置 options.manual = true，则 不会 根据依赖变化自动请求，也意味着 refreshDeps 和 refreshDepsAction 等机制不再生效，需要通过 run 或 runAsync 手动触发。
  • 结合常用的 onBefore、onSuccess、onError 等回调，可以在请求发出前后执行相应逻辑（如埋点统计、错误提示等）。
  • useRequest 的其他配置项（如 throttleWait、debounceWait 等）也可以与 params 依赖结合使用，以实现更精细化的请求节流与去抖。

通过上述方式，你可以轻松地利用依赖变化自动刷新请求逻辑，避免繁琐的手动调用，让业务代码更为简洁易维护。

Last updated on
基础用法