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 +``` 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 69eaa7f0..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,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