Skip to content

Commit 990fe98

Browse files
NelsonYongNelsonYong
committed
docs: optimized use-request demo
1 parent b2fd6f8 commit 990fe98

File tree

20 files changed

+528
-55
lines changed

20 files changed

+528
-55
lines changed

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

Lines changed: 2 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,17 @@
11
<template>
22
<div>name：{{ loading ? 'loading' : data }}</div>
3-
<div>name1：{{ loading ? 'loading' : data1 }}</div>
4-
<br>
5-
<div
6-
>If the parameter is fixed, the value of params cannot be obtained--
7-
<span>
8-
{{ JSON.stringify(params) }}
9-
</span></div
10-
>
11-
<div
12-
>When manually-- <span>{{ JSON.stringify(params1) }}</span></div
13-
>
143
</template>
154

165
<script lang="ts" setup>
176
import { useRequest } from 'vue-hooks-plus'
187
198
function getUsername(params: { desc: string }): Promise<string> {
20-
return new Promise((resolve, reject) => {
9+
return new Promise(resolve => {
2110
setTimeout(() => {
2211
resolve(`vue-hooks-plus ${params.desc}`)
2312
}, 1000)
2413
})
2514
}
2615
27-
const { data, loading, params } = useRequest(() => getUsername({ desc: 'good' }))
28-
29-
const { data: data1, params: params1, run } = useRequest(getUsername, { manual: true })
30-
31-
run({ desc: 'nice' })
16+
const { data, loading } = useRequest(() => getUsername({ desc: 'good' }))
3217
</script>

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

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<template>
2+
<div>name：{{ loading ? 'loading' : data }}</div>
3+
<div>
4+
<input v-model="value">
5+
<vhp-button style="margin-left: 8px;" @click="run({ desc: value })">Edit</vhp-button>
6+
</div>
7+
</template>
8+
9+
<script lang="ts" setup>
10+
import { ref } from 'vue'
11+
import { useRequest } from 'vue-hooks-plus'
12+
13+
function getUsername(params: { desc: string }): Promise<string> {
14+
return new Promise((resolve, reject) => {
15+
setTimeout(() => {
16+
if (Math.random() > 0.5) resolve(`vue-hooks-plus ${params.desc}`)
17+
reject('error')
18+
}, 1000)
19+
})
20+
}
21+
const value = ref('vue-hooks-plus')
22+
const { data: data, loading, run } = useRequest(getUsername, {
23+
manual: true,
24+
onSuccess: data => {
25+
alert(data)
26+
},
27+
onError: error => {
28+
alert(error)
29+
},
30+
})
31+
32+
// run({ desc: 'nice' })
33+
</script>

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

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<template>
2+
<div>name：{{ loading ? 'loading' : data }}</div>
3+
<div>
4+
<input v-model="value">
5+
<vhp-button style="margin-left: 8px;" @click="handleClick">Edit</vhp-button>
6+
</div>
7+
</template>
8+
9+
<script lang="ts" setup>
10+
import { ref } from 'vue'
11+
import { useRequest } from 'vue-hooks-plus'
12+
13+
function getUsername(params: { desc: string }): Promise<string> {
14+
return new Promise((resolve, reject) => {
15+
setTimeout(() => {
16+
if (Math.random() > 0.5) resolve(`vue-hooks-plus ${params.desc}`)
17+
reject('error')
18+
}, 1000)
19+
})
20+
}
21+
const value = ref('vue-hooks-plus')
22+
const { data: data, loading, runAsync } = useRequest(getUsername, {
23+
manual: true,
24+
})
25+
26+
const handleClick = async () => {
27+
try {
28+
await runAsync({ desc: value.value })
29+
alert('success')
30+
} catch (error) {
31+
alert('error')
32+
}
33+
}
34+
35+
// run({ desc: 'nice' })
36+
</script>

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

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<template>
2+
<div>name：{{ loading ? 'loading' : data }}</div>
3+
<div>
4+
<input v-model="value">
5+
<vhp-button style="margin-left: 8px;" @click="run({ desc: value })">Edit</vhp-button>
6+
</div>
7+
<div>
8+
<p v-for="msg in step" :key="msg">{{ msg }}</p>
9+
</div>
10+
</template>
11+
12+
<script lang="ts" setup>
13+
import { ref } from 'vue'
14+
import { useRequest } from 'vue-hooks-plus'
15+
16+
function getUsername(params: { desc: string }): Promise<string> {
17+
return new Promise((resolve, reject) => {
18+
setTimeout(() => {
19+
if (Math.random() > 0.5) resolve(`vue-hooks-plus ${params.desc}`)
20+
reject('error')
21+
}, 1000)
22+
})
23+
}
24+
const value = ref('')
25+
const step = ref<string[]>([])
26+
const { data: data, loading, run } = useRequest(getUsername, {
27+
manual: true,
28+
onBefore: () => {
29+
step.value = []
30+
step.value.push('start request')
31+
},
32+
onSuccess: () => {
33+
step.value.push('start request success')
34+
},
35+
onError: () => {
36+
step.value.push('start request error')
37+
},
38+
onFinally: () => {
39+
step.value.push('start request finally')
40+
},
41+
})
42+
</script>

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

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<template>
2+
<vhp-button style="margin-top: 16px;" @click="() => refresh()">refresh</vhp-button>
3+
<div style="margin-top: 16px;">{{ loading ? 'loading..' : data }}</div>
4+
</template>
5+
6+
<script lang="ts" setup>
7+
import { useRequest } from 'vue-hooks-plus'
8+
9+
function getUsername(): Promise<string> {
10+
return new Promise(resolve => {
11+
setTimeout(() => {
12+
resolve(String(Date.now()))
13+
}, 1000)
14+
})
15+
}
16+
const { data, run, loading, refresh } = useRequest(() => getUsername(), {
17+
manual: true,
18+
})
19+
run()
20+
</script>

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

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<template>
2+
<div>name：{{ data }}</div>
3+
<div>
4+
<input v-model="value">
5+
<vhp-button style="margin-left: 8px;" @click="handleClick">Edit</vhp-button>
6+
</div>
7+
<div>
8+
<p v-for="msg in step" :key="msg">{{ msg }}</p>
9+
</div>
10+
</template>
11+
12+
<script lang="ts" setup>
13+
import { ref } from 'vue'
14+
import { useRequest } from 'vue-hooks-plus'
15+
16+
function getUsername(params: { desc: string }): Promise<string> {
17+
return new Promise((resolve, reject) => {
18+
setTimeout(() => {
19+
if (Math.random() > 0.5) resolve(`request-${params.desc}`)
20+
reject('error')
21+
}, 2000)
22+
})
23+
}
24+
const value = ref('')
25+
const step = ref<string[]>([])
26+
const { data: data, run, mutate } = useRequest(getUsername, {
27+
manual: true,
28+
onError: () => {
29+
alert('error')
30+
},
31+
})
32+
33+
const handleClick = () => {
34+
mutate(value.value)
35+
run({ desc: value.value })
36+
}
37+
</script>

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

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<template>
2+
<div>name：{{ loading ? 'loading..' : data }}</div>
3+
<div>
4+
<input v-model="value">
5+
<vhp-button style="margin-left: 8px;" @click="handleClick">Edit</vhp-button>
6+
<vhp-button style="margin-left: 8px;" @click="handleCancel">Cancel</vhp-button>
7+
</div>
8+
</template>
9+
10+
<script lang="ts" setup>
11+
import { ref } from 'vue'
12+
import { useRequest } from 'vue-hooks-plus'
13+
14+
function getUsername(params: { desc: string }): Promise<string> {
15+
return new Promise((resolve, reject) => {
16+
setTimeout(() => {
17+
if (Math.random() > 0.5) resolve(`request-${params.desc}`)
18+
reject('error')
19+
}, 2000)
20+
})
21+
}
22+
const value = ref('')
23+
const { data, loading, run, cancel } = useRequest(getUsername, {
24+
manual: true,
25+
onError: () => {
26+
alert('error')
27+
},
28+
})
29+
30+
const handleClick = () => {
31+
run({ desc: value.value })
32+
}
33+
34+
const handleCancel = () => {
35+
cancel()
36+
}
37+
</script>

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

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<template>
2+
<div>name：{{ loading ? 'loading' : data }}</div>
3+
<div>
4+
<input v-model="value">
5+
<vhp-button style="margin-left: 8px;" @click="run({ desc: value })">Edit</vhp-button>
6+
</div>
7+
<br>
8+
<div> Params: {{ JSON.stringify(params) }} </div>
9+
</template>
10+
11+
<script lang="ts" setup>
12+
import { ref } from 'vue'
13+
import { useRequest } from 'vue-hooks-plus'
14+
15+
function getUsername(params: { desc: string }): Promise<string> {
16+
return new Promise((resolve, reject) => {
17+
setTimeout(() => {
18+
resolve(`vue-hooks-plus ${params.desc}`)
19+
}, 1000)
20+
})
21+
}
22+
const value = ref('vue-hooks-plus')
23+
const { data: data, loading, run, params } = useRequest(getUsername, {
24+
defaultParams: [
25+
{
26+
desc: 'nice',
27+
},
28+
],
29+
})
30+
</script>

0 commit comments

Comments
 (0)