W3cubDocs

/VueUse

useAsyncQueue

Category	Utilities
Export Size	391 B
Last Changed	last year

Usage

import { useAsyncQueue } from '@vueuse/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.value) // current pending task index

console.log(result) // the tasks result

Type Declarations

Show Type Declarations

export 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

Source • Demo • Docs

No recent changes