Snippet

Cascading Timeout Cancellation with AbortSignal.any in Next.js Data Fetching

Using AbortSignal.any allows clean composition of fixed request timeouts with external route navigation cancellation signals in Next.js fetch pipelines without event-listener boilerplate.

snippet.js

javascript

export async function fetchWithCompositeTimeout(url: string, userSignal?: AbortSignal) {
  const timeoutSignal = AbortSignal.timeout(3000);
  const combinedSignal = userSignal ? AbortSignal.any([timeoutSignal, userSignal]) : timeoutSignal;
 
  const response = await fetch(url, {
    signal: combinedSignal,
    next: { revalidate: 60 }
  });
  return response.json();
}

nextjs

Breakdown

const timeoutSignal = AbortSignal.timeout(3000);

Creates an AbortSignal instance that automatically aborts after a maximum threshold of 3000 milliseconds.

const combinedSignal = userSignal ? AbortSignal.any([timeoutSignal, userSignal]) : timeoutSignal;

Combines multiple AbortSignal instances into a unified signal that fires as soon as any component signal triggers.

Previous snippet Next snippet

More Expert JavaScript exercises →

Cascading Timeout Cancellation with AbortSignal.any in Next.js Data Fetching

Related