How does Nuxt 4.2 improve async data fetching with AbortController?

Nuxt 4.2 improves async data fetching by integrating AbortController to allow request cancellation.

This prevents unnecessary network usage and handles abort errors gracefully, particularly useful during route navigations or component unmounts, leading to better resource and state management.

Code

const controller = new AbortController()

const { data, refresh } = await useAsyncData('key', () =>
  $fetch('/api/data', { signal: controller.signal })
)

// Cancel request when needed
controller.abort()