Merge pull request alibaba#459 from alibaba/feat/useRequest_dedupingI…

…nterval

feat: useRequest add cacheTime and staleTime

package.json

@@ -49,6 +49,7 @@
     "jest": "^26.0.1",
     "jest-fetch-mock": "^3.0.3",
     "lerna": "^2.11.0",
+    "mockdate": "^3.0.2",
     "mockjs": "^1.1.0",
     "prettier": "^2.0.5",
     "pretty-quick": "^2.0.1",

packages/use-request/demo/cacheKey.tsx

@@ -1,17 +1,17 @@
 /**
  * title: Cache & SWR
- * desc: If `options.cacheKey` is set, useRequest will cache the data of the previous request, and use it as the initial  value while the next request is not returned, like SWR.
+ * desc: If `options.cacheKey` is set, useRequest will cache the data of the previous request, and use it as the initial  value while the next request is not returned, like SWR. You can set the cache data collected time through `cacheTime`, and you can set the data freshness time through `staleTime`.
+
  *
  * title.zh-CN: 缓存 & SWR
- * desc.zh-CN: 如果设置了 `options.cacheKey` ， useRequest 会将当前请求结束数据缓存起来。下次组件初始化时，如果有缓存数据，我们会优先返回缓存数据，然后在背后发送新请求，也就是 SWR 的能力。
+ * desc.zh-CN: 如果设置了 `options.cacheKey` ， useRequest 会将当前请求结束数据缓存起来。下次组件初始化时，如果有缓存数据，我们会优先返回缓存数据，然后在背后发送新请求，也就是 SWR 的能力。你可以通过 `cacheTime` 设置缓存数据回收时间，也可以通过 `staleTime` 设置数据保持新鲜时间。
  */
 
 import { useBoolean, useRequest } from 'ahooks';
 import Mock from 'mockjs';
 import React from 'react';
 
-async function getArticle(type?: string): Promise<{ data: string; time: number }> {
-  console.log(type);
+async function getArticle(): Promise<{ data: string; time: number }> {
   return new Promise((resolve) => {
     setTimeout(() => {
       resolve({

packages/use-request/index.en-US.md

@@ -158,7 +158,6 @@ All Options are optional.
 | onSuccess            | <ul><li> Triggered when the service resolved, the parameters are `data` and` params` </li><li> If `formatResult` is present,` data` is the formatted data.</li></ul>                                                                                                                                                                                                                                      | `(data: any, params: any[]) => void`    | -       |
 | onError              | Triggered when the service reports an error. The parameters are `error` and` params`.                                                                                                                                                                                                                                                                                                                      | `(error: Error, params: any[]) => void` | -       |
 | fetchKey             | According to params, get the key of the current request. After setting, we will maintain the request status of different key values ​​at the same time in fetches.                                                                                                                                                                                                                                             | `(...params: any[]) => string`          | -       |
-| cacheKey             | <ul><li> Request a unique identifier. If `cacheKey` is set, we will enable the cache mechanism</li><li> We cache `data`,` error`, `params`,` loading` for each request </li><li> Under the cache mechanism, the same request will return the data in the cache first, and a new request will be sent behind the scene. After the new data is returned, the data update will be triggered again. </li></ul> | `string`                                | -       |
 | defaultParams        | If `manual = false`, the default parameters when run is executed automatically,                                                                                                                                                                                                                                                                                                                            | `any[]`                                 | -       |
 | loadingDelay         | Set delay time for display loading to avoid flicker                                                                                                                                                                                                                                                                                                                                                        | `number`                                | -       |
 | pollingInterval      | Polling interval in milliseconds. After setting, it will enter polling mode and trigger `run` periodically.                                                                                                                                                                                                                                                                                                | `number`                                | -       |
@@ -169,6 +168,9 @@ All Options are optional.
 | throttleInterval     | throttle interval, the unit is millisecond. After setting, request to enter throttle mode.                                                                                                                                                                                                                                                                                                                 | `number`                                | -       |
 | ready     | Only when ready is `true`, will the request be initiated                                                                                                                                                                                                               | `boolean`                                | `true`       |
 | throwOnError     | If the service errors, the error will only be logged. If you want an error to be thrown, pass the throwOnError: true                                    | `boolean`                                | `false`       |
+| cacheKey             | <ul><li> Request a unique identifier. If `cacheKey` is set, we will enable the cache mechanism</li><li> We cache `data`,` error`, `params`,` loading` for each request </li><li> Under the cache mechanism, the same request will return the data in the cache first, and a new request will be sent behind the scene. After the new data is returned, the data update will be triggered again. </li></ul> | `string`                                | -       |
+| cacheTime             | <ul><li> the cache data recycling time. Default cache data is recycled after 5 minutes </li><li> If set to `-1`, it means that the cached data will never expire. </li><li> Need to be used with `cacheKey` </li></ul> | `number`                                | `300000`       |
+| staleTime             | <ul><li> The cached data keeps fresh time. Within this time interval, the data is considered fresh and the request will not be resent </li><li> If set to `-1`, it means the data is always fresh. </li><li> Need to be used with `cacheKey` </li> </ul> | `number`                                | `0`       |
 ## Advanced usage
 
 Based on the basic useRequest, we can further encapsulate and implement more advanced customization requirements. Currently useRequest has three scenarios: `Integrated Request Library`,` Pagination` and `Load More`. You can refer to the code to implement your own encapsulation. Refer to the implementation of [useRequest](./src/useRequest.ts)、[usePaginated](./src/usePaginated.ts)、[useLoadMore](./src/useLoadMore.ts) 的实现。

packages/use-request/index.zh-CN.md

@@ -158,17 +158,19 @@ const {
 | onSuccess            | <ul><li> service resolve 时触发，参数为 `data` 和 `params` </li><li> 如果有 `formatResult` ，则 `data` 为格式化后数据。</li></ul>                                                                                                                                       | `(data: any, params: any[]) => void`    | -       |
 | onError              | service 报错时触发，参数为 `error` 和 `params`。                                                                                                                                                                                                                         | `(error: Error, params: any[]) => void` | -       |
 | fetchKey             | 根据 params，获取当前请求的 key，设置之后，我们会在 `fetches` 中同时维护不同 `key` 值的请求状态。                                                                                                                                                                        | `(...params: any[]) => string`          | -       |
-| cacheKey             | <ul><li> 请求唯一标识。如果设置了 `cacheKey`，我们会启用缓存机制 </li><li> 我们会缓存每次请求的 `data` , `error` , `params` , `loading` </li><li> 在缓存机制下，同样的请求我们会先返回缓存中的数据，同时会在背后发送新的请求，待新数据返回后，重新触发数据更新</li></ul> | `string`                                | -       |
 | defaultParams        | 如果 `manual=false` ，自动执行 `run` 的时候，默认带上的参数                                                                                                                                                                                                              | `any[]`                                 | -       |
 | loadingDelay         | 设置显示 loading 的延迟时间，避免闪烁                                                                                                                                                                                                                                    | `number`                                | -       |
 | pollingInterval      | 轮询间隔，单位为毫秒。设置后，将进入轮询模式，定时触发 `run`                                                                                                                                                                                                             | `number`                                | -       |
 | pollingWhenHidden    | <ul><li> 在页面隐藏时，是否继续轮询。默认为 `true`，即不会停止轮询 </li><li> 如果设置为 `false` , 在页面隐藏时会暂时停止轮询，页面重新显示时继续上次轮询 </li></ul>                                                                                                      | `boolean`                               | `true`  |
 | refreshOnWindowFocus | <ul><li> 在屏幕重新获取焦点或重新显示时，是否重新发起请求。默认为 `false`，即不会重新发起请求。 </li><li>如果设置为 `true`，在屏幕重新聚焦或重新显示时，会重新发起请求。</li></ul>                                                                                       | `boolean`                               | `false` |
-| focusTimespan        | <ul><li> 屏幕重新聚焦，如果每次都重新发起请求，不是很好，我们需要有一个时间间隔，在当前时间间隔内，不会重新发起请求 </li><li> 需要配置 `refreshOnWindowFocus` 使用。 </li></ul>                                                                                          | `number`                                | `5000`  |
+| focusTimespan        | <ul><li> 屏幕重新聚焦，如果每次都重新发起请求，不是很好，我们需要有一个时间间隔，在当前时间间隔内，不会重新发起请求 </li><li> 需要配和 `refreshOnWindowFocus` 使用。 </li></ul>                                                                                          | `number`                                | `5000`  |
 | debounceInterval     | 防抖间隔, 单位为毫秒，设置后，请求进入防抖模式。                                                                                                                                                                                                                         | `number`                                | -       |
 | throttleInterval     | 节流间隔, 单位为毫秒，设置后，请求进入节流模式。                                                                                                                                                                                                                         | `number`                                | -       |
 | ready     | 只有当 ready 为 `true` 时，才会发起请求                                                                                                                                                                                                                         | `boolean`                                | `true`       |
 | throwOnError     | 如果 service 报错，我们会帮你捕获并打印日志，如果你需要自己处理异常，可以设置 throwOnError 为 true                                   | `boolean`                                | `false`       |
+| cacheKey             | <ul><li> 请求唯一标识。如果设置了 `cacheKey`，我们会启用缓存机制 </li><li> 我们会缓存每次请求的 `data` , `error` , `params` , `loading` </li><li> 在缓存机制下，同样的请求我们会先返回缓存中的数据，同时会在背后发送新的请求，待新数据返回后，重新触发数据更新</li></ul> | `string`                                | -       |
+| cacheTime             | <ul><li> 设置缓存数据回收时间。默认缓存数据 5 分钟后回收 </li><li> 如果设置为 `-1`, 则表示缓存数据永不过期</li><li> 需要配和 `cacheKey` 使用 </li></ul> | `number`                                | `300000`       |
+| staleTime             | <ul><li> 缓存数据保持新鲜时间。在该时间间隔内，认为数据是新鲜的，不会重新发请求 </li><li> 如果设置为 `-1`，则表示数据永远新鲜</li><li> 需要配和 `cacheKey` 使用 </li> </ul> | `number`                                | `0`       |
 ## 扩展用法
 
 基于基础的 useRequest，我们可以进一步封装，实现更高级的定制需求。当前 useRequest 内置了 `集成请求库`，`分页` 和 `加载更多` 三种场景。你可以参考代码，实现自己的封装。参考 [useRequest](https://github.com/alibaba/hooks/blob/master/packages/use-request/src/useRequest.ts)、[usePaginated](https://github.com/alibaba/hooks/blob/master/packages/use-request/src/usePaginated.ts)、[useLoadMore](https://github.com/alibaba/hooks/blob/master/packages/use-request/src/useLoadMore.ts) 的实现。