说明
异步等待,通常用于两个动作都是异步触发,但一个动作需要等待另一个动作完成后,才能进行。
示例
函数定义
function<T = void>(): {
deffered: Deferred<T>
resolve: (param: T) => void
reset: () => void
waitingFor: () => Promise<T>
}
1
2
3
4
5
6
2
3
4
5
6
Demo代码
<template>
<hl-button type="primary">{{ label }}</hl-button>
</template>
<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue'
import { HlButton } from 'helper-ui'
import { useDeferred } from './'
export default defineComponent({
components: { HlButton },
setup() {
const label = ref('loading...')
const { waitingFor, resolve } = useDeferred<string>()
setTimeout(() => {
resolve('successfully')
}, 3000)
onMounted(async () => {
const result = await waitingFor()
label.value = result
})
return {
label,
}
},
})
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30