1---
2category: Utilities
3---
4 
5# useAsyncQueue
6 
7Executes each asynchronous task sequentially and passes the current task result to the next task.
8 
9## Usage
10 
11```ts
12import { useAsyncQueue } from '@vueuse/core'
13 
14function p1() {
15  return new Promise((resolve) => {
16    setTimeout(() => {
17      resolve(1000)
18    }, 10)
19  })
20}
21 
22function p2(result: number) {
23  return new Promise((resolve) => {
24    setTimeout(() => {
25      resolve(1000 + result)
26    }, 20)
27  })
28}
29 
30const { activeIndex, result } = useAsyncQueue([p1, p2])
31 
32console.log(activeIndex.value) // current pending task index
33 
34console.log(result) // the tasks result
35```
36 
37### Result State
38 
39Each task in the result array has a `state` and `data` property:
40 
41```ts
42interface UseAsyncQueueResult<T> {
43  state: 'aborted' | 'fulfilled' | 'pending' | 'rejected'
44  data: T | null
45}
46```
47 
48### Interrupt on Failure
49 
50By default, if a task fails, subsequent tasks will not be executed. Set `interrupt: false` to continue executing even after failures.
51 
52```ts
53const { result } = useAsyncQueue([p1, p2], {
54  interrupt: false, // continue even if p1 fails
55})
56```
57 
58### Callbacks
59 
60```ts
61const { result } = useAsyncQueue([p1, p2], {
62  onError() {
63    console.log('A task failed')
64  },
65  onFinished() {
66    console.log('All tasks completed (or interrupted)')
67  },
68})
69```
70 
71### Abort Signal
72 
73You can pass an `AbortSignal` to cancel the queue execution.
74 
75```ts
76const controller = new AbortController()
77 
78const { result } = useAsyncQueue([p1, p2], {
79  signal: controller.signal,
80})
81 
82// Later, abort the queue
83controller.abort()
84```
85 
86## Type Declarations
87 
88```ts
89export type UseAsyncQueueTask<T> = (...args: any[]) => T | Promise<T>
90type MapQueueTask<T extends any[]> = {
91  [K in keyof T]: UseAsyncQueueTask<T[K]>
92}
93export interface UseAsyncQueueResult<T> {
94  state: "aborted" | "fulfilled" | "pending" | "rejected"
95  data: T | null
96}
97export interface UseAsyncQueueReturn<T> {
98  activeIndex: ShallowRef<number>
99  result: T
100}
101export interface UseAsyncQueueOptions {
102  /**
103   * Interrupt tasks when current task fails.
104   *
105   * @default true
106   */
107  interrupt?: boolean
108  /**
109   * Trigger it when the tasks fails.
110   *
111   */
112  onError?: () => void
113  /**
114   * Trigger it when the tasks ends.
115   *
116   */
117  onFinished?: () => void
118  /**
119   * A AbortSignal that can be used to abort the task.
120   */
121  signal?: AbortSignal
122}
123/**
124 * Asynchronous queue task controller.
125 *
126 * @see https://vueuse.org/useAsyncQueue
127 * @param tasks
128 * @param options
129 */
130export declare function useAsyncQueue<T extends any[], S = MapQueueTask<T>>(
131  tasks: S & Array<UseAsyncQueueTask<any>>,
132  options?: UseAsyncQueueOptions,
133): UseAsyncQueueReturn<{
134  [P in keyof T]: UseAsyncQueueResult<T[P]>
135}>
136```
137