VueUseuseAsyncQueue
Executes each asynchronous task sequentially and passes the current task result to the next task
Demo
activeIndex: -1
result: [
{
"state": "pending",
"data": null
},
{
"state": "pending",
"data": null
}
]
Usage
ts
import { useAsyncQueue } from '@vueuse/core'
const p1 = () => {
return new Promise((resolve) => {
setTimeout(() => {
resolve(1000)
}, 10)
})
}
const p2 = (result: number) => {
return new Promise((resolve) => {
setTimeout(() => {
resolve(1000 + result)
}, 20)
})
}
const { activeIndex, result } = useAsyncQueue([p1, p2])
console.log(activeIndex.value) // current pending task index
console.log(result) // the tasks result
import { useAsyncQueue } from '@vueuse/core'
const p1 = () => {
return new Promise((resolve) => {
setTimeout(() => {
resolve(1000)
}, 10)
})
}
const p2 = (result: number) => {
return new Promise((resolve) => {
setTimeout(() => {
resolve(1000 + result)
}, 20)
})
}
const { activeIndex, result } = useAsyncQueue([p1, p2])
console.log(activeIndex.value) // current pending task index
console.log(result) // the tasks result
Type Declarations
Show Type Declarations
typescript
export declare type UseAsyncQueueTask<T> = (...args: any[]) => T | Promise<T>
export interface UseAsyncQueueResult<T> {
state: "pending" | "fulfilled" | "rejected"
data: T | null
}
export interface UseAsyncQueueReturn<T> {
activeIndex: Ref<number>
result: T
}
export interface UseAsyncQueueOptions {
/**
* Interrupt tasks when current task fails.
*
* @default true
*/
interrupt?: boolean
/**
* Trigger it when the tasks fails.
*
*/
onError?: () => void
/**
* Trigger it when the tasks ends.
*
*/
onFinished?: () => void
}
/**
* Asynchronous queue task controller.
*
* @see https://vueuse.org/useAsyncQueue
* @param tasks
* @param options
*/
export declare function useAsyncQueue<T1>(
tasks: [UseAsyncQueueTask<T1>],
options?: UseAsyncQueueOptions
): UseAsyncQueueReturn<[UseAsyncQueueResult<T1>]>
export declare function useAsyncQueue<T1, T2>(
tasks: [UseAsyncQueueTask<T1>, UseAsyncQueueTask<T2>],
options?: UseAsyncQueueOptions
): UseAsyncQueueReturn<[UseAsyncQueueResult<T1>, UseAsyncQueueResult<T2>]>
export declare function useAsyncQueue<T1, T2, T3>(
tasks: [UseAsyncQueueTask<T1>, UseAsyncQueueTask<T2>, UseAsyncQueueTask<T3>],
options?: UseAsyncQueueOptions
): UseAsyncQueueReturn<
[UseAsyncQueueResult<T1>, UseAsyncQueueResult<T2>, UseAsyncQueueResult<T3>]
>
export declare function useAsyncQueue<T1, T2, T3, T4>(
tasks: [
UseAsyncQueueTask<T1>,
UseAsyncQueueTask<T2>,
UseAsyncQueueTask<T3>,
UseAsyncQueueTask<T4>
],
options?: UseAsyncQueueOptions
): UseAsyncQueueReturn<
[
UseAsyncQueueResult<T1>,
UseAsyncQueueResult<T2>,
UseAsyncQueueResult<T3>,
UseAsyncQueueResult<T4>
]
>
export declare function useAsyncQueue<T1, T2, T3, T4, T5>(
tasks: [
UseAsyncQueueTask<T1>,
UseAsyncQueueTask<T2>,
UseAsyncQueueTask<T3>,
UseAsyncQueueTask<T4>,
UseAsyncQueueTask<T5>
],
options?: UseAsyncQueueOptions
): UseAsyncQueueReturn<
[
UseAsyncQueueResult<T1>,
UseAsyncQueueResult<T2>,
UseAsyncQueueResult<T3>,
UseAsyncQueueResult<T4>,
UseAsyncQueueResult<T5>
]
>
export declare function useAsyncQueue<T>(
tasks: UseAsyncQueueTask<T>[],
options?: UseAsyncQueueOptions
): UseAsyncQueueReturn<UseAsyncQueueResult<T>[]>
export declare type UseAsyncQueueTask<T> = (...args: any[]) => T | Promise<T>
export interface UseAsyncQueueResult<T> {
state: "pending" | "fulfilled" | "rejected"
data: T | null
}
export interface UseAsyncQueueReturn<T> {
activeIndex: Ref<number>
result: T
}
export interface UseAsyncQueueOptions {
/**
* Interrupt tasks when current task fails.
*
* @default true
*/
interrupt?: boolean
/**
* Trigger it when the tasks fails.
*
*/
onError?: () => void
/**
* Trigger it when the tasks ends.
*
*/
onFinished?: () => void
}
/**
* Asynchronous queue task controller.
*
* @see https://vueuse.org/useAsyncQueue
* @param tasks
* @param options
*/
export declare function useAsyncQueue<T1>(
tasks: [UseAsyncQueueTask<T1>],
options?: UseAsyncQueueOptions
): UseAsyncQueueReturn<[UseAsyncQueueResult<T1>]>
export declare function useAsyncQueue<T1, T2>(
tasks: [UseAsyncQueueTask<T1>, UseAsyncQueueTask<T2>],
options?: UseAsyncQueueOptions
): UseAsyncQueueReturn<[UseAsyncQueueResult<T1>, UseAsyncQueueResult<T2>]>
export declare function useAsyncQueue<T1, T2, T3>(
tasks: [UseAsyncQueueTask<T1>, UseAsyncQueueTask<T2>, UseAsyncQueueTask<T3>],
options?: UseAsyncQueueOptions
): UseAsyncQueueReturn<
[UseAsyncQueueResult<T1>, UseAsyncQueueResult<T2>, UseAsyncQueueResult<T3>]
>
export declare function useAsyncQueue<T1, T2, T3, T4>(
tasks: [
UseAsyncQueueTask<T1>,
UseAsyncQueueTask<T2>,
UseAsyncQueueTask<T3>,
UseAsyncQueueTask<T4>
],
options?: UseAsyncQueueOptions
): UseAsyncQueueReturn<
[
UseAsyncQueueResult<T1>,
UseAsyncQueueResult<T2>,
UseAsyncQueueResult<T3>,
UseAsyncQueueResult<T4>
]
>
export declare function useAsyncQueue<T1, T2, T3, T4, T5>(
tasks: [
UseAsyncQueueTask<T1>,
UseAsyncQueueTask<T2>,
UseAsyncQueueTask<T3>,
UseAsyncQueueTask<T4>,
UseAsyncQueueTask<T5>
],
options?: UseAsyncQueueOptions
): UseAsyncQueueReturn<
[
UseAsyncQueueResult<T1>,
UseAsyncQueueResult<T2>,
UseAsyncQueueResult<T3>,
UseAsyncQueueResult<T4>,
UseAsyncQueueResult<T5>
]
>
export declare function useAsyncQueue<T>(
tasks: UseAsyncQueueTask<T>[],
options?: UseAsyncQueueOptions
): UseAsyncQueueReturn<UseAsyncQueueResult<T>[]>
Source
Contributors
Anthony Fu
Okoro Redemption
donotloveshampo
Yugang Cao
webfansplz