Cancels previous in-flight requests when a new one is triggered. Ideal for search inputs and rapid UI interactions.

use-abortable-fetch.ts

export function useAbortableFetch() {
  let controller: AbortController | null = null

  return async function fetchWithAbort<T>(url: string, opts: any = {}) {
    if (controller) controller.abort()

    controller = new AbortController()

    try {
      return await $fetch<T>(url, {
        ...opts,
        signal: controller.signal,
      })
    } finally {
      controller = null
    }
  }
}