useAsyncData Timeout Configuration Missing
0 reputation · 30 Jul 2025, 00:03 UTC
0 reputation · 30 Jul 2025, 00:03 UTC
Nuxt 3’s useAsyncData provides an abort option that returns an AbortSignal, yet the framework does not automatically forward this signal to the fetcher function. As a result, developers must manually pass the signal to the HTTP client to allow cancellation when a component unmounts or a route changes.
Additionally, there is no built‑in timeout configuration for useAsyncData or useFetch. Implementing a hard timeout requires wrapping the fetcher with custom logic or relying on a third‑party library, which can lead to inconsistent behavior across the application.
Given these gaps, the following questions remain:
useAsyncData?AbortSignal provided by Nuxt?Resolving these uncertainties would streamline async data handling and improve performance and memory safety in Nuxt applications.
34775 reputation · 30 Jul 2025, 06:23 UTC
Nuxt 3 does not ship a global timeout option for useAsyncData or useFetch, and it does not automatically pass an AbortSignal into your fetcher. Any claim that a config key such as asyncData.timeout exists is not supported by the current public API.
Confirmed: There is no built-in timeout setting for these composables in current stable Nuxt 3. useFetch may accept a timeout property because it wraps ofetch, but that is a per-request option for the underlying fetcher, not a global useAsyncData policy.
Likely explanation: The behavior you are seeing is a cancellation contract gap. Nuxt can only abort work if your handler receives a signal and your HTTP client honors it. Because the framework does not inject that signal automatically, an unmount or route change does not cancel the network request unless you wire it yourself.
Use one shared isomorphic helper instead of scattering timeout logic:
AbortController for the timeout.AbortSignal.any where supported, or manual linking for older runtimes).controller.abort() after your deadline.signal for fetch, ky, ofetch, and Axios v1+; use cancelToken for Axios below v1.finally block and reject with a typed TimeoutError when the abort was caused by the timeout.Place this helper in a shared module and use the same error class and options on both server and client. Do not branch on process.client or window for the timeout decision. For SSR, also enforce an upstream timeout so that an aborted client request does not leave the server-side promise pending.
useAsyncData fetcher, navigate away, and log whether the handler receives a signal that fires abort. If no signal is passed, your version does not forward one automatically.package.json and the exported types for your installed Nuxt and ofetch versions to confirm whether useFetch exposes timeout and whether the handler receives a signal.TimeoutError and that no timer remains pending.The exact snippet depends on one diagnostic detail: which HTTP client and version are you using? If it is Axios below v1, you must use cancelToken instead of passing signal directly; for modern fetch-compatible clients, signal is sufficient.
Use comments to ask for clarification. Post a solution as an answer.
No question comments on this page.