useAsyncQueue

Category

Utilities

Export Size

691 B

Last Changed

5 days ago

Executes each asynchronous task sequentially and passes the current task result to the next task

Demo

Usage

import { useAsyncQueue } from '@reause/core'

function p1() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(1000)
    }, 10)
  })
}

function p2(result: number) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(1000 + result)
    }, 20)
  })
}

const { activeIndex, result } = useAsyncQueue([p1, p2])

console.log(activeIndex) // current pending task index (number)

console.log(result) // the tasks result

Result State

Each task in the result array has a state and data property:

interface UseAsyncQueueResult<T> {
  state: 'aborted' | 'fulfilled' | 'pending' | 'rejected'
  data: T | null
}

Interrupt on Failure

By default, if a task fails, subsequent tasks will not be executed. Set interrupt: false to continue executing even after failures.

const { result } = useAsyncQueue([p1, p2], {
  interrupt: false, // continue even if p1 fails
})

Callbacks

const { result } = useAsyncQueue([p1, p2], {
  onError() {
    console.log('A task failed')
  },
  onFinished() {
    console.log('All tasks completed (or interrupted)')
  },
})

Abort Signal

You can pass an AbortSignal to cancel the queue execution.

const controller = new AbortController()

const { result } = useAsyncQueue([p1, p2], {
  signal: controller.signal,
})

// Later, abort the queue
controller.abort()

Type Declarations

export type UseAsyncQueueTask<T> = (...args: any[]) => T | Promise<T>

export interface UseAsyncQueueResult<T> {
    state: 'aborted' | 'fulfilled' | 'pending' | 'rejected';
    data: T | null;
}

export interface UseAsyncQueueReturn<T> {
    activeIndex: number;
    result: T;
}

export interface UseAsyncQueueOptions {
    interrupt?: boolean;
    onError?: () => void;
    onFinished?: () => void;
    signal?: AbortSignal;
}

type MapQueueTask<T extends any[]> = {
    [K in keyof T]: UseAsyncQueueTask<T[K]>;
}

export function useAsyncQueue<T extends any[], S = MapQueueTask<T>>(tasks: S & Array<UseAsyncQueueTask<any>>, options?: UseAsyncQueueOptions): UseAsyncQueueReturn<{
    [P in keyof T]: UseAsyncQueueResult<T[P]>;
}>

Source

Source · Demo · VueUse

Contributors

Changelog

v0.1.0 on

e608a - feat(ci): align CI, packaging and release with VueUse

04c4f - fix(core): resolve useAsyncQueue audit findings (#520)

6db4b - feat(core): add useAsyncQueue (#77)