如何缓存 useRequest 响应？

Question

我正在使用useRequest图书馆的内容ahooks。我cacheKey在选项中指定了，但是当应该从缓存中检索相同的请求时，它会一遍又一遍地重复。

let someVar = 'someValue'
const { data, loading } = useRequest(
    async () => someRequestThatDependOnVariable(someVar),
    {
      refreshDeps: [someVar],
      cacheKey: `request-${someVar}`,
    },
  );

someVar 通过选择字段更新

Answer 1

但是当应该从缓存中检索相同的请求时，它会一遍又一遍地重复。

这是设计好的。

根据文档：

如果options.cacheKey设置，useRequest将缓存成功的数据。下次组件初始化时，如果有缓存数据，我们会先返回缓存数据，然后在后台发送新的请求

因此，这里的重点cacheKey是通过在获取最新数据时显示以前缓存的数据来隐藏数据的加载。这不会阻止加载数据。

但是，如果您还使用该staleTime属性，则可以告诉它在上次成功请求后的几秒内不要进行新查询。

您可以通过设置数据保留时间options.staleTime。在此期间，我们认为数据是新鲜的，不会重新发起请求。

const { data, loading } = useRequest(
  async () => someRequestThatDependOnVariable(someVar),
  {
    refreshDeps: [someVar],
    cacheKey: `request-${someVar}`,
    staleTime: 10 * 60 * 1000 // 10 minutes in milliseconds
  },
);