fix: useRequest useLoadingDelay plugin bug (#198)

* docs: update COMMIT.md and COMMIT-zh-CN.md

* fix: fix useRequest useLoadingDelay plugin bug

* docs: opt

---------

Co-authored-by: YongGit <1013588891@qq.com>

Author: XiaoDaiGua-Ray

.github/COMMIT-zh-CN.md

@@ -22,3 +22,18 @@
 feat: your commit
 
 ```
+
+### 📌 可能存在的问题
+
+如果运行 `pnpm docs:dev` 提示报错，可以尝试一下以下操作:
+
+- 检查 `node` 版本: 建议使用 `node 16`, `node 18` 版本开发
+- 构建包后再运行: `pnpm build` 后再运行 `pnpm docs:dev`
+
+```bash
+# 构建包
+pnpm build
+
+# 运行文档
+pnpm docs:dev
+```

.github/COMMIT.md

@@ -20,3 +20,18 @@
 feat: your commit
 
 ```
+
+### 📌 Possible Problems
+
+If running 'pnpm docs:dev' prompts an error, try the following:
+
+- Check 'node' version: It is recommended to use 'node 16', 'node 18' version development
+- build and run: 'pnpm build and run' pnpm docs:dev '
+
+```bash
+# build project
+pnpm build
+
+# run docs
+pnpm docs:dev
+```

packages/hooks/src/useRequest/__tests__/delay.spec.ts

@@ -1,18 +1,27 @@
 import { sleep } from 'test-utils/sleep'
-import { mount } from '@vue/test-utils'
+import useRequest from '../useRequest'
+
+function getUsername(): Promise<string> {
+  return new Promise(resolve => {
+    setTimeout(() => {
+      resolve(`vue-hooks-plus useRequest A ${new Date().getTime()}`)
+    }, 1)
+  })
+}
 
-import Demo from '../docs/loadingDelay/demo/demo.vue'
 
 describe('useRequest/LoadingDelay', () => {
   it(' should data work ', async () => {
-    const wrapper = mount(Demo)
-    const text = wrapper.findAll('div').at(1)
+    const { loading, run: runData } = useRequest(() => getUsername())
+    const { loading: loading1, run: runData1 } = useRequest(() => getUsername(), {
+      loadingDelay: 300,
+    })
+    runData()
+    runData1()
+    await sleep(10)
+    expect(loading.value).toBe(false)
+    expect(loading1.value).toBe(true)
 
-    expect(text?.text()).toBe('Username：')
-    await sleep(301)
-    expect(text?.text()).toBe('Username：loading...')
 
-    await sleep(1000)
-    expect(text?.text()).toBe('Username：vue-hooks-plus useRequest A')
   })
 })

packages/hooks/src/useRequest/__tests__/polling.spec.ts

@@ -32,7 +32,7 @@ describe('polling', () => {
     result.run()
     expect(result.loading.value).toBeTruthy()
     expect(result.data?.value).toBeUndefined()
-    await sleep(1000)
+    await sleep(1050)
     expect(result.data?.value).toBe(data)
     expect(result.loading.value).toBeFalsy()
   })

packages/hooks/src/useRequest/docs/loadingDelay/demo/demo.vue

@@ -1,6 +1,7 @@
 <template>
-  <div>Username：{{ data }}</div>
-  <div>Username：{{ loading ? 'loading...' : data1 }}</div>
+  <div>Username：{{ loading ? 'loading' : data }}</div>
+  <div>Username：{{ loading1 ? 'loading...' : data1 }}</div>
+  <vhp-button @click="run">run</vhp-button>
 </template>
 
 <script lang="ts" setup>
@@ -9,21 +10,18 @@
   function getUsername(): Promise<string> {
     return new Promise(resolve => {
       setTimeout(() => {
-        resolve('vue-hooks-plus useRequest')
-      }, 1000)
+        resolve(`vue-hooks-plus useRequest A ${new Date().getTime()}`)
+      }, 1)
     })
   }
 
-  function getUsername1(): Promise<string> {
-    return new Promise(resolve => {
-      setTimeout(() => {
-        resolve('vue-hooks-plus useRequest A')
-      }, 1000)
-    })
-  }
-
-  const { data } = useRequest(() => getUsername())
-  const { data: data1, loading } = useRequest(() => getUsername1(), {
+  const { data, loading, run: runData } = useRequest(() => getUsername())
+  const { data: data1, loading: loading1, run: runData1 } = useRequest(() => getUsername(), {
     loadingDelay: 300,
   })
+
+  const run = () => {
+    runData()
+    runData1()
+  }
 </script>

packages/hooks/src/useRequest/plugins/useLoadingDelayPlugin.ts

@@ -1,44 +1,28 @@
-import { unref, ref } from "vue";
-import type { UseRequestPlugin, Timeout } from "../types";
-
-const useLoadingDelayPlugin: UseRequestPlugin<unknown, unknown[]> = (
-  fetchInstance,
-  { loadingDelay }
-) => {
-  const timerRef = ref<Timeout>();
-  if (!unref(loadingDelay)) {
-    return {};
-  }
-
-  const cancelTimeout = () => {
-    if (timerRef.value) {
-      clearTimeout(timerRef.value);
-    }
-  };
-
+import { ref, unref } from 'vue'
+import { Timeout, UseRequestPlugin } from '../types'
 
+const useLoadingDelayPlugin: UseRequestPlugin<unknown, unknown[]> = (inst, { loadingDelay }) => {
+  const delayRef = ref<Timeout>()
 
   return {
-    name: "loadingDelayPlugin",
-    onBefore: () => {
-      cancelTimeout();
-      timerRef.value = setTimeout(() => {
-        fetchInstance.setState({
-          loading: true,
-        });
-      }, (unref(loadingDelay)) as number);
-
-      return {
-        loading: false,
-      };
-    },
+    name: 'loadingDelayPlugin',
     onFinally: () => {
-      cancelTimeout();
-    },
-    onCancel: () => {
-      cancelTimeout();
+      if (delayRef.value) {
+        clearTimeout(unref(delayRef.value))
+
+        delayRef.value = undefined
+      }
+
+      inst.setState({
+        loading: true,
+      })
+      setTimeout(() => {
+        inst.setState({
+          loading: false,
+        })
+      }, unref(loadingDelay))
     },
-  };
-};
+  }
+}
 
-export default useLoadingDelayPlugin;
+export default useLoadingDelayPlugin