如何缓存useRequest响应？

Question

我正在使用来自useRequest库的ahooks。我在选项中指定了cacheKey，但是当应该从缓存中检索相同的请求时，会一次又一次地重复该请求。

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

通过select字段更新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
  },
);