useAsyncQueue

类别

Utilities

导出大小

505 B

最近修改

2 days ago

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

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

示例

源代码在线运行

activeIndex: -1

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

用法

🌐 Usage

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) // current pending task index

console.log(result) // the tasks 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) // current pending task index
console.log(result) // the tasks result

结果状态

🌐 Result State

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

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

TypeScript

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

失败时中断

🌐 Interrupt on Failure

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

🌐 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

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

🌐 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()