use-async-queue

Run async tasks one after another, each receiving the previous result.

Minimal setup

Use a Vue 3.5+ project with Vue SFC compilation configured (see Vite+ integration).

vp install @vizejs/composable

Import the entry directly. Call lifecycle-bound utilities inside <script setup> so cleanup follows the component scope; consult the runtime contract for this entry's SSR and hydration behavior.

import { useAsyncQueue } from "@vizejs/composable/use-async-queue";

Try it

Run dependent steps in order

Run async steps one after another, passing each result to the next, and show the state of every step.

Open the interactive example

What to observe: Run steps moves each step from pending to fulfilled in order and ends with Uploaded photo.jpg resized to 1200 px.

Pass immediate: false to start with run(). With interrupt: true (the default) a failing step marks the rest as aborted.

Compare the initial and interacted states

Copy the example

Save this complete SFC in your Vue project. Its public imports and source are the same ones executed in the preview.

<script setup lang="ts">
import { computed } from "vue";
import { useAsyncQueue } from "@vizejs/composable/use-async-queue";

const { results, activeIndex, isFinished, run } = useAsyncQueue(
  [
    () => "photo.jpg",
    (file: string) => `${file} resized to 1200 px`,
    (resized: string) => `Uploaded ${resized}`,
  ],
  { immediate: false },
);
const steps = ["Pick a photo", "Resize it", "Upload it"];
const summary = computed(() =>
  isFinished.value ? String(results.value[2]?.data) : `Step ${activeIndex.value + 1} of 3`,
);
</script>

<template>
  <div class="composable-example">
    <p>Run dependent steps in order, passing each result to the next step.</p>
    <button type="button" @click="() => run()">Run steps</button>
    <ol aria-label="Steps">
      <li v-for="(step, index) in steps" :key="step">{{ step }}: {{ results[index]?.state }}</li>
    </ol>
    <output aria-live="polite">{{ summary }}</output>
  </div>
</template>

Runtime contract

API

useAsyncQueue

Run async tasks one after another, each receiving the previous result. Result types are inferred per position from the task tuple, and each task's previous parameter is contextually typed as the preceding task's result (up to six tasks; longer queues use the mapped-tuple signature with annotated parameters). Every task gets an AbortSignal; abort() (or the external signal) stops the queue and marks unfinished tasks "aborted". A new run() aborts the one in flight. Starts on the server too when immediate, but nothing awaits it there, so markup shows the pending state on both sides.

function useAsyncQueue<R1>( tasks: readonly [AsyncQueueTask<undefined, R1>], options?: UseAsyncQueueOptions, ): AsyncQueue<[R1]>

const { results } = useAsyncQueue([
  async () => fetchUser(),
  async (user) => fetchOrders(user.id),
]);

useAsyncQueue

function useAsyncQueue<R1, R2>( tasks: readonly [AsyncQueueTask<undefined, R1>, AsyncQueueTask<R1, R2>], options?: UseAsyncQueueOptions, ): AsyncQueue<[R1, R2]>

useAsyncQueue

function useAsyncQueue<R1, R2, R3>( tasks: readonly [AsyncQueueTask<undefined, R1>, AsyncQueueTask<R1, R2>, AsyncQueueTask<R2, R3>], options?: UseAsyncQueueOptions, ): AsyncQueue<[R1, R2, R3]>

useAsyncQueue

function useAsyncQueue<R1, R2, R3, R4>( tasks: readonly [ AsyncQueueTask<undefined, R1>, AsyncQueueTask<R1, R2>, AsyncQueueTask<R2, R3>, AsyncQueueTask<R3, R4>, ], options?: UseAsyncQueueOptions, ): AsyncQueue<[R1, R2, R3, R4]>

useAsyncQueue

function useAsyncQueue<R1, R2, R3, R4, R5>( tasks: readonly [ AsyncQueueTask<undefined, R1>, AsyncQueueTask<R1, R2>, AsyncQueueTask<R2, R3>, AsyncQueueTask<R3, R4>, AsyncQueueTask<R4, R5>, ], options?: UseAsyncQueueOptions, ): AsyncQueue<[R1, R2, R3, R4, R5]>

useAsyncQueue

function useAsyncQueue<R1, R2, R3, R4, R5, R6>( tasks: readonly [ AsyncQueueTask<undefined, R1>, AsyncQueueTask<R1, R2>, AsyncQueueTask<R2, R3>, AsyncQueueTask<R3, R4>, AsyncQueueTask<R4, R5>, AsyncQueueTask<R5, R6>, ], options?: UseAsyncQueueOptions, ): AsyncQueue<[R1, R2, R3, R4, R5, R6]>

useAsyncQueue

function useAsyncQueue<Results extends readonly unknown[]>( tasks: AsyncQueueTasks<Results>, options?: UseAsyncQueueOptions, ): AsyncQueue<Results>

useAsyncQueue

function useAsyncQueue( tasks: readonly ErasedTask[], options: UseAsyncQueueOptions = {}, ): AsyncQueue<readonly unknown[]>

Types

AsyncQueueTaskResult

Outcome record of one queued task.

AsyncQueueContext

Context passed to every queued task.

UseAsyncQueueOptions

Options for useAsyncQueue.

AsyncQueue

Queue state and controls returned by useAsyncQueue.