useRequest缓存 --- 数据保持新鲜

[JeromeD3]

在cacheKey的基础上，指定数据新鲜时间。在这个时间内，不会重新发起请求，例如：设置了五秒钟，在五秒内切换组件，不会重新请求。（一般情况下组件的切换代表数据的重新获取，那么这个怎么实现呢？）

[JeromeD3]

首先在测试代码添加staleTime: 5000,，具体案例看官方文档。

useCachePlugin

ok，我们返回到插件中，新增如下代码

onBefore: params => {
const cacheData = _getCache(cacheKey, params);
if (!cacheData || !Object.hasOwnProperty.call(cacheData, 'data')) {
return {};
}
+     if (staleTime === -1 || new Date().getTime() - cacheData.time <= staleTime) {
+       return {
+         loading: false,
+         data: cacheData?.data,
+         returnNow: true
+       };
+     } else {
return {
data: cacheData?.data
};
+     }
},

Fetch

  runAsync = async (...params) => {
    this.count += 1;
    const currentCount = this.count;
+   const { stopNow = false, returnNow = false, ...state } = this.runPluginHandler('onBefore', params);
    if (stopNow) {
      return new Promise(() => { });
    }
    this.setState({ loading: true, params, ...state });
+   if (returnNow) {
+     return Promise.resolve(state.data);
+   }

[JeromeD3]

实现原理

1. 由于需要判断数据是否在规定时间内更新，我们可以在onBefore这个钩子中进行判断
2. 我们外部传递了一个staleTime，我们可以获取当前时间 - 缓存时间 进行计算是否在规定时间内
3. 如果在规定时间内，返回loading = false 这样页面就不会因为去判断loading而产生页面闪烁（顺带返回缓存数据）
4. 另外还返回returnNow 这个字段，用于执行请求函数的时候立即返回缓存数据，而不用进行发起真正的请求。
5. 否则还是返回缓存数据，做swr操作（上篇说到），然后请求获取最新数据，替换旧数据