useAsyncQueue

类别

Utilities

导出体积

505 B

上次更改

6 minutes ago

依次执行每个异步任务，并将当前任务的结果传递给下一个任务。

示例

源码playground (beta)

activeIndex: -1

result: [ { "state": "pending", "data": null }, { "state": "pending", "data": null } ]

用法

TypeScript

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) // 当前待处理任务的索引

console.log(result) // 任务结果

import { useAsyncQueue } from '@vueuse/core'
function p1() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(1000)
    }, 10)
  })
}
function p2(result) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(1000 + result)
    }, 20)
  })
}
const { activeIndex, result } = useAsyncQueue([p1, p2])
console.log(activeIndex.value) // 当前待处理任务的索引
console.log(result) // 任务结果

结果状态

结果数组中的每个任务都有一个 state 和一个 data 属性：

TypeScript

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

失败时中断

默认情况下，如果一个任务失败，后续任务将不会执行。设置 interrupt: false 可使即使失败后仍继续执行。

const { result } = useAsyncQueue([p1, p2], {
  interrupt: false, // 即使 p1 失败也继续执行
})

回调函数

const { result } = useAsyncQueue([p1, p2], {
  onError() {
    console.log('某个任务失败了')
  },
  onFinished() {
    console.log('所有任务完成（或被中断）')
  },
})

中止信号

你可以传入一个 AbortSignal 来取消队列的执行。

const controller = new AbortController()

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

// 之后，取消队列
controller.abort()

类型声明

export type UseAsyncQueueTask<T> = (...args: any[]) => T | Promise<T>
type MapQueueTask<T extends any[]> = {
  [K in keyof T]: UseAsyncQueueTask<T[K]>
}
export interface UseAsyncQueueResult<T> {
  state: "aborted" | "fulfilled" | "pending" | "rejected"
  data: T | null
}
export interface UseAsyncQueueReturn<T> {
  activeIndex: ShallowRef<number>
  result: T
}
export interface UseAsyncQueueOptions {
  /**
   * 当当前任务失败时，是否中断任务队列。
   *
   * @default true
   */
  interrupt?: boolean
  /**
   * 当任务失败时触发。
   *
   */
  onError?: () => void
  /**
   * 当任务结束时触发。
   *
   */
  onFinished?: () => void
  /**
   * 可用于中止任务的 AbortSignal。
   */
  signal?: AbortSignal
}
/**
 * 异步任务队列控制器
 *
 * @see https://vueuse.org/useAsyncQueue
 * @param tasks
 * @param options
 */
export declare function useAsyncQueue<T extends any[], S = MapQueueTask<T>>(
  tasks: S & Array<UseAsyncQueueTask<any>>,
  options?: UseAsyncQueueOptions,
): UseAsyncQueueReturn<{
  [P in keyof T]: UseAsyncQueueResult<T[P]>
}>

源码

源码 • 演示 • 文档

贡献者

一纸忘忧

更新日志

没有最近的更新日志