docs: async cache example

packages/hooks/src/useRequest/docs/cache/demo/asyncDemo.vue

@@ -0,0 +1,58 @@
+<template>
+  <div>
+    <vhp-button @click="() => toggle()">show/hidden</vhp-button>
+    <div v-if="state" style="padding: 16px;">
+      <p>{{ data ?? cacheData }}</p>
+      <div> cacheData: {{ cacheData }} </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { useRequest, useToggle } from 'vue-hooks-plus'
+  const cacheKey = 'cacheKey-async-storage'
+
+  const asyncStorage = {
+    setItem: (key: string, value: any) => {
+      return new Promise((resolve, reject) => {
+        setTimeout(() => {
+          localStorage.setItem(key, value)
+          resolve(value)
+        }, 200)
+      })
+    },
+    getItem: (key: string) => {
+      return new Promise((resolve, reject) => {
+        setTimeout(() => {
+          resolve(localStorage.getItem(key))
+        }, 100)
+      })
+    },
+  }
+
+  const [state, { toggle }] = useToggle()
+
+  const { data: cacheData, refresh } = useRequest(
+    () => asyncStorage.getItem(cacheKey) as Promise<string>,
+    {
+      cacheKey,
+      debugKey: cacheKey,
+    },
+  )
+
+  function getUsername(refresh: VoidFunction): Promise<string> {
+    return new Promise(resolve => {
+      setTimeout(() => {
+        asyncStorage.setItem(cacheKey, String(Date.now())).then(() => {
+          refresh()
+        })
+        resolve(String(Date.now()))
+      }, 1000)
+    })
+  }
+
+  const { data } = useRequest(() => getUsername(refresh), {
+    ready: state,
+    cacheKey: 'cacheKey-get-username',
+  })
+</script>

packages/hooks/src/useRequest/docs/cache/index.en-US.md

@@ -54,7 +54,7 @@ The cached data includes `data` and `params`. Through the `params` caching mecha
 
 provides a `clearCache` method, which can clear the cache data of the specified `cacheKey`.
 
-## Custom cache
+## Custom sync cache
 
 By setting `setCache` and `getCache`, you can customize the cache, for example, you can store data in `localStorage, IndexDB`, etc.
 
@@ -70,6 +70,15 @@ By setting `setCache` and `getCache`, you can customize the cache, for example,
   title=""
   desc=""> </demo>
 
+## Custom async cache
+
+Example `localforage` 、 `indexDB`.
+
+<demo src="./demo/asyncDemo.vue"
+  language="vue"
+  title=""
+  desc="Use async cache"> </demo>
+
 ## API
 
 ```ts

packages/hooks/src/useRequest/docs/cache/index.zh-CN.md

@@ -54,9 +54,9 @@ source:
 
 提供了一个 `clearCache` 方法，可以清除指定 `cacheKey` 的缓存数据。 这里就不做展示
 
-## 自定义缓存
+## 自定义同步缓存
 
-通过配置 `setCache` 和 `getCache`，可以自定义数据缓存，比如可以将数据存储到 `localStorage`、`IndexDB` 等。
+通过配置 `setCache` 和 `getCache`，可以自定义数据缓存，比如可以将数据存储到 `localStorage` 等。
 
 ::: tip 请注意
 
@@ -70,6 +70,15 @@ source:
   title=""
   desc=""> </demo>
 
+## 自定义异步缓存
+
+如 `localforage` 、 `indexDB` 等。
+
+<demo src="./demo/asyncDemo.vue"
+  language="vue"
+  title=""
+  desc="使用异步缓存"> </demo>
+
 ## API
 
 ```ts