optimize use-request-basic document demo

docs: optimized use-request-basic demo

Author: inhiblab

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

@@ -1,30 +1,63 @@
-import { mount } from '@vue/test-utils'
-import Demo from '../docs/basic/demo/demo.vue'
+import renderHook from 'test-utils/renderHook'
+import { sleep } from 'test-utils/sleep'
+import useRequest from '../useRequest'
 
-describe('useRequest/Basic', () => {
-  const wrapper = mount(Demo)
-
-  const currentName = wrapper.findAll('div').at(0)
-  const currentName1 = wrapper.findAll('div').at(1)
+function getUsername(params: { desc: string }): Promise<string> {
+  return new Promise(resolve => {
+    setTimeout(() => {
+      resolve(`vue-hooks-plus ${params.desc}`)
+    }, 200)
+  })
+}
 
-  it('should init work is loading', () => {
-    {
-      expect(currentName?.text()).toBe('name：loading')
-      expect(currentName1?.text()).toBe('name1：loading')
-    }
+describe('useRequest/Basic', () => {
+  it('should auto work', async () => {
+    const [hook] = renderHook(() =>
+      useRequest(getUsername, {
+        defaultParams: [
+          {
+            desc: 'nice',
+          },
+        ],
+      }),
+    )
+    await sleep(200)
+    expect(hook.data?.value).toBe('vue-hooks-plus nice')
   })
 
-  it('should auto run params is null', () => {
-    {
-      const currentAutoRunParams = wrapper.findAll('span').at(0)
-      expect(currentAutoRunParams?.text()).toBe('[]')
-    }
+  it('should manual run', async () => {
+    const [hook] = renderHook(() =>
+      useRequest(getUsername, {
+        manual: true,
+        defaultParams: [
+          {
+            desc: 'nice',
+          },
+        ],
+      }),
+    )
+
+    await sleep(200)
+    expect(hook.data?.value).toBeUndefined()
+    hook.run({ desc: 'nice1' })
+    await sleep(200)
+    expect(hook.data?.value).toBe('vue-hooks-plus nice1')
   })
 
-  it('should manual params work', () => {
-    {
-      const currentManualParams = wrapper.findAll('span').at(1)
-      expect(currentManualParams?.text()).toBe('[{"desc":"nice"}]')
-    }
+  it('should params work', async () => {
+    const [hook] = renderHook(() =>
+      useRequest(getUsername, {
+        defaultParams: [
+          {
+            desc: 'nice',
+          },
+        ],
+      }),
+    )
+    await sleep(200)
+    expect(hook.params.value[0]?.desc).toBe('nice')
+    hook.run({ desc: 'nice1' })
+    await sleep(200)
+    expect(hook.params.value[0]?.desc).toBe('nice1')
   })
 })

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

@@ -1,5 +1,5 @@
 import renderHook from 'test-utils/renderHook'
-import useRequest from '..'
+import useRequest from '../useRequest'
 
 function getUsername(): Promise<string> {
   return new Promise(resolve => {

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

@@ -1,32 +1,17 @@
 <template>
   <div>name：{{ loading ? 'loading' : data }}</div>
-  <div>name1：{{ loading ? 'loading' : data1 }}</div>
-  <br>
-  <div
-  >If the parameter is fixed, the value of params cannot be obtained--
-    <span>
-      {{ JSON.stringify(params) }}
-    </span></div
-  >
-  <div
-  >When manually-- <span>{{ JSON.stringify(params1) }}</span></div
-  >
 </template>
 
 <script lang="ts" setup>
   import { useRequest } from 'vue-hooks-plus'
 
   function getUsername(params: { desc: string }): Promise<string> {
-    return new Promise((resolve, reject) => {
+    return new Promise(resolve => {
       setTimeout(() => {
         resolve(`vue-hooks-plus ${params.desc}`)
       }, 1000)
     })
   }
 
-  const { data, loading, params } = useRequest(() => getUsername({ desc: 'good' }))
-
-  const { data: data1, params: params1, run } = useRequest(getUsername, { manual: true })
-
-  run({ desc: 'nice' })
+  const { data, loading } = useRequest(() => getUsername({ desc: 'good' }))
 </script>

packages/hooks/src/useRequest/docs/basic/demo/demo1.vue

@@ -0,0 +1,33 @@
+<template>
+  <div>name：{{ loading ? 'loading' : data }}</div>
+  <div>
+    <input v-model="value">
+    <vhp-button style="margin-left: 8px;" @click="run({ desc: value })">Edit</vhp-button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue'
+  import { useRequest } from 'vue-hooks-plus'
+
+  function getUsername(params: { desc: string }): Promise<string> {
+    return new Promise((resolve, reject) => {
+      setTimeout(() => {
+        if (Math.random() > 0.5) resolve(`vue-hooks-plus ${params.desc}`)
+        reject('error')
+      }, 1000)
+    })
+  }
+  const value = ref('vue-hooks-plus')
+  const { data: data, loading, run } = useRequest(getUsername, {
+    manual: true,
+    onSuccess: data => {
+      alert(data)
+    },
+    onError: error => {
+      alert(error)
+    },
+  })
+
+  // run({ desc: 'nice' })
+</script>

packages/hooks/src/useRequest/docs/basic/demo/demo2.vue

@@ -0,0 +1,36 @@
+<template>
+  <div>name：{{ loading ? 'loading' : data }}</div>
+  <div>
+    <input v-model="value">
+    <vhp-button style="margin-left: 8px;" @click="handleClick">Edit</vhp-button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue'
+  import { useRequest } from 'vue-hooks-plus'
+
+  function getUsername(params: { desc: string }): Promise<string> {
+    return new Promise((resolve, reject) => {
+      setTimeout(() => {
+        if (Math.random() > 0.5) resolve(`vue-hooks-plus ${params.desc}`)
+        reject('error')
+      }, 1000)
+    })
+  }
+  const value = ref('vue-hooks-plus')
+  const { data: data, loading, runAsync } = useRequest(getUsername, {
+    manual: true,
+  })
+
+  const handleClick = async () => {
+    try {
+      await runAsync({ desc: value.value })
+      alert('success')
+    } catch (error) {
+      alert('error')
+    }
+  }
+
+  // run({ desc: 'nice' })
+</script>

packages/hooks/src/useRequest/docs/basic/demo/demo3.vue

@@ -0,0 +1,42 @@
+<template>
+  <div>name：{{ loading ? 'loading' : data }}</div>
+  <div>
+    <input v-model="value">
+    <vhp-button style="margin-left: 8px;" @click="run({ desc: value })">Edit</vhp-button>
+  </div>
+  <div>
+    <p v-for="msg in step" :key="msg">{{ msg }}</p>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue'
+  import { useRequest } from 'vue-hooks-plus'
+
+  function getUsername(params: { desc: string }): Promise<string> {
+    return new Promise((resolve, reject) => {
+      setTimeout(() => {
+        if (Math.random() > 0.5) resolve(`vue-hooks-plus ${params.desc}`)
+        reject('error')
+      }, 1000)
+    })
+  }
+  const value = ref('')
+  const step = ref<string[]>([])
+  const { data: data, loading, run } = useRequest(getUsername, {
+    manual: true,
+    onBefore: () => {
+      step.value = []
+      step.value.push('start request')
+    },
+    onSuccess: () => {
+      step.value.push('start request success')
+    },
+    onError: () => {
+      step.value.push('start request error')
+    },
+    onFinally: () => {
+      step.value.push('start request finally')
+    },
+  })
+</script>

packages/hooks/src/useRequest/docs/basic/demo/demo4.vue

@@ -0,0 +1,20 @@
+<template>
+  <vhp-button style="margin-top: 16px;" @click="() => refresh()">refresh</vhp-button>
+  <div style="margin-top: 16px;">{{ loading ? 'loading..' : data }}</div>
+</template>
+
+<script lang="ts" setup>
+  import { useRequest } from 'vue-hooks-plus'
+
+  function getUsername(): Promise<string> {
+    return new Promise(resolve => {
+      setTimeout(() => {
+        resolve(String(Date.now()))
+      }, 1000)
+    })
+  }
+  const { data, run, loading, refresh } = useRequest(() => getUsername(), {
+    manual: true,
+  })
+  run()
+</script>

packages/hooks/src/useRequest/docs/basic/demo/demo5.vue

@@ -0,0 +1,37 @@
+<template>
+  <div>name：{{ data }}</div>
+  <div>
+    <input v-model="value">
+    <vhp-button style="margin-left: 8px;" @click="handleClick">Edit</vhp-button>
+  </div>
+  <div>
+    <p v-for="msg in step" :key="msg">{{ msg }}</p>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue'
+  import { useRequest } from 'vue-hooks-plus'
+
+  function getUsername(params: { desc: string }): Promise<string> {
+    return new Promise((resolve, reject) => {
+      setTimeout(() => {
+        if (Math.random() > 0.5) resolve(`request-${params.desc}`)
+        reject('error')
+      }, 2000)
+    })
+  }
+  const value = ref('')
+  const step = ref<string[]>([])
+  const { data: data, run, mutate } = useRequest(getUsername, {
+    manual: true,
+    onError: () => {
+      alert('error')
+    },
+  })
+
+  const handleClick = () => {
+    mutate(value.value)
+    run({ desc: value.value })
+  }
+</script>

packages/hooks/src/useRequest/docs/basic/demo/demo6.vue

@@ -0,0 +1,37 @@
+<template>
+  <div>name：{{ loading ? 'loading..' : data }}</div>
+  <div>
+    <input v-model="value">
+    <vhp-button style="margin-left: 8px;" @click="handleClick">Edit</vhp-button>
+    <vhp-button style="margin-left: 8px;" @click="handleCancel">Cancel</vhp-button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue'
+  import { useRequest } from 'vue-hooks-plus'
+
+  function getUsername(params: { desc: string }): Promise<string> {
+    return new Promise((resolve, reject) => {
+      setTimeout(() => {
+        if (Math.random() > 0.5) resolve(`request-${params.desc}`)
+        reject('error')
+      }, 2000)
+    })
+  }
+  const value = ref('')
+  const { data, loading, run, cancel } = useRequest(getUsername, {
+    manual: true,
+    onError: () => {
+      alert('error')
+    },
+  })
+
+  const handleClick = () => {
+    run({ desc: value.value })
+  }
+
+  const handleCancel = () => {
+    cancel()
+  }
+</script>

packages/hooks/src/useRequest/docs/basic/demo/demo7.vue

@@ -0,0 +1,30 @@
+<template>
+  <div>name：{{ loading ? 'loading' : data }}</div>
+  <div>
+    <input v-model="value">
+    <vhp-button style="margin-left: 8px;" @click="run({ desc: value })">Edit</vhp-button>
+  </div>
+  <br>
+  <div> Params: {{ JSON.stringify(params) }} </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue'
+  import { useRequest } from 'vue-hooks-plus'
+
+  function getUsername(params: { desc: string }): Promise<string> {
+    return new Promise((resolve, reject) => {
+      setTimeout(() => {
+        resolve(`vue-hooks-plus ${params.desc}`)
+      }, 1000)
+    })
+  }
+  const value = ref('vue-hooks-plus')
+  const { data: data, loading, run, params } = useRequest(getUsername, {
+    defaultParams: [
+      {
+        desc: 'nice',
+      },
+    ],
+  })
+</script>