From 37ff9110b635497ef2972f544837c303a650fbfe Mon Sep 17 00:00:00 2001 From: XiaoDaiGua-Ray <443547225@qq.com> Date: Sun, 12 May 2024 17:15:44 +0800 Subject: [PATCH 1/3] docs: update COMMIT.md and COMMIT-zh-CN.md --- .github/COMMIT-zh-CN.md | 15 +++++++++++++++ .github/COMMIT.md | 15 +++++++++++++++ 2 files changed, 30 insertions(+) diff --git a/.github/COMMIT-zh-CN.md b/.github/COMMIT-zh-CN.md index dad7645c..20cfcda1 100644 --- a/.github/COMMIT-zh-CN.md +++ b/.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 +``` diff --git a/.github/COMMIT.md b/.github/COMMIT.md index 5907f20a..2b3dcff5 100644 --- a/.github/COMMIT.md +++ b/.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 +``` From c34bbc6f717cb065674b59d2cfee0c30002d75ee Mon Sep 17 00:00:00 2001 From: XiaoDaiGua-Ray <443547225@qq.com> Date: Sun, 12 May 2024 17:17:00 +0800 Subject: [PATCH 2/3] fix: fix useRequest useLoadingDelay plugin bug --- .../docs/loadingDelay/demo/demo.vue | 5 +- .../plugins/useLoadingDelayPlugin.ts | 60 +++++++------------ 2 files changed, 25 insertions(+), 40 deletions(-) diff --git a/packages/hooks/src/useRequest/docs/loadingDelay/demo/demo.vue b/packages/hooks/src/useRequest/docs/loadingDelay/demo/demo.vue index 69eaa7f0..f0f7fb4f 100644 --- a/packages/hooks/src/useRequest/docs/loadingDelay/demo/demo.vue +++ b/packages/hooks/src/useRequest/docs/loadingDelay/demo/demo.vue @@ -1,6 +1,7 @@ diff --git a/packages/hooks/src/useRequest/plugins/useLoadingDelayPlugin.ts b/packages/hooks/src/useRequest/plugins/useLoadingDelayPlugin.ts index 0d3684ae..33c5db38 100644 --- a/packages/hooks/src/useRequest/plugins/useLoadingDelayPlugin.ts +++ b/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 = ( - fetchInstance, - { loadingDelay } -) => { - const timerRef = ref(); - 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 = (inst, { loadingDelay }) => { + const delayRef = ref() 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 From 270c1fbab0d3408cabd34027893dd7e3a263c0bb Mon Sep 17 00:00:00 2001 From: YongGit <1013588891@qq.com> Date: Sun, 12 May 2024 20:46:57 +0800 Subject: [PATCH 3/3] docs: opt --- .../src/useRequest/__tests__/delay.spec.ts | 27 ++++++++++++------- .../src/useRequest/__tests__/polling.spec.ts | 2 +- .../docs/loadingDelay/demo/demo.vue | 27 +++++++++---------- 3 files changed, 31 insertions(+), 25 deletions(-) diff --git a/packages/hooks/src/useRequest/__tests__/delay.spec.ts b/packages/hooks/src/useRequest/__tests__/delay.spec.ts index 954a64f7..9025e294 100644 --- a/packages/hooks/src/useRequest/__tests__/delay.spec.ts +++ b/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 { + 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') }) }) diff --git a/packages/hooks/src/useRequest/__tests__/polling.spec.ts b/packages/hooks/src/useRequest/__tests__/polling.spec.ts index 9deb0966..6f682e1a 100644 --- a/packages/hooks/src/useRequest/__tests__/polling.spec.ts +++ b/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() }) diff --git a/packages/hooks/src/useRequest/docs/loadingDelay/demo/demo.vue b/packages/hooks/src/useRequest/docs/loadingDelay/demo/demo.vue index f0f7fb4f..97269a56 100644 --- a/packages/hooks/src/useRequest/docs/loadingDelay/demo/demo.vue +++ b/packages/hooks/src/useRequest/docs/loadingDelay/demo/demo.vue @@ -1,6 +1,6 @@ @@ -10,21 +10,18 @@ function getUsername(): Promise { return new Promise(resolve => { setTimeout(() => { - resolve('vue-hooks-plus useRequest') - }, 1000) + resolve(`vue-hooks-plus useRequest A ${new Date().getTime()}`) + }, 1) }) } - function getUsername1(): Promise { - return new Promise(resolve => { - setTimeout(() => { - resolve('vue-hooks-plus useRequest A') - }, 1000) - }) - } - - const { data } = useRequest(() => getUsername()) - const { data: data1, loading, run } = useRequest(() => getUsername1(), { - loadingDelay: 2000, + const { data, loading, run: runData } = useRequest(() => getUsername()) + const { data: data1, loading: loading1, run: runData1 } = useRequest(() => getUsername(), { + loadingDelay: 300, }) + + const run = () => { + runData() + runData1() + }