computedAsync

v0.0.15testeddemo

Computed value driven by an async (promise-returning) evaluation callback. The value updates reactively when its dependencies change, exposing an optional `evaluating` ref for pending state, an `onError` handler, lazy evaluation, and a default value used until the first resolution settles. Out-of-order resolutions are discarded so only the latest run wins, and an `onCancel` hook lets callbacks abort stale work.

Source Tests

Examples

const id = ref(1);
const user = computedAsync(async () => {
  const res = await fetch(`/api/users/${id.value}`);
  return res.json();
}, null);

const evaluating = ref(false);
const data = computedAsync(async () => fetchData(), [], { evaluating });
// evaluating.value is true while the promise is pending

// Abort stale requests when dependencies change mid-flight
const result = computedAsync(async (onCancel) => {
  const controller = new AbortController();
  onCancel(() => controller.abort());
  const res = await fetch(url.value, { signal: controller.signal });
  return res.json();
}, undefined, { lazy: true });

Demo

Loading demo…

Signatures

export function computedAsync<T>(
  evaluationCallback: (onCancel: AsyncComputedOnCancel) => T | Promise<T>,
  initialState: T,
  optionsOrRef: UseComputedAsyncOptions<true>,
): ComputedRef<T>;

export function computedAsync<T>(
  evaluationCallback: (onCancel: AsyncComputedOnCancel) => T | Promise<T>,
  initialState: undefined,
  optionsOrRef: UseComputedAsyncOptions<true>,
): ComputedRef<T | undefined>;

export function computedAsync<T>(
  evaluationCallback: (onCancel: AsyncComputedOnCancel) => T | Promise<T>,
  initialState: T,
  optionsOrRef?: Ref<boolean> | UseComputedAsyncOptions,
): Ref<T>;

export function computedAsync<T>(
  evaluationCallback: (onCancel: AsyncComputedOnCancel) => T | Promise<T>,
  initialState?: undefined,
  optionsOrRef?: Ref<boolean> | UseComputedAsyncOptions,
): Ref<T | undefined>;

Type Parameters

T

Parameters

Parameter	Type	Default	Description
`evaluationCallback`	`(onCancel: AsyncComputedOnCancel) => T \| Promise<T>`	—	Promise-returning function producing the value
`initialState`?	`T \| undefined`	—	Value used until the first evaluation resolves
`optionsOrRef`?	`Ref<boolean, boolean> \| UseComputedAsyncOptions<boolean> \| undefined`	—	Options object, or a `Ref<boolean>` used as the `evaluating` ref

Returns

UseComputedAsyncReturn<T> | UseComputedAsyncReturn<T | undefined>A ref holding the latest resolved value (a `ComputedRef` when `lazy`)