fix(nuxt): respect custom timeout in useFetch

[luc122c]

🔗 Linked issue

Fixes #24354

❓ Type of change

• 📖 Documentation (updates to the documentation, readme or JSdoc annotations)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality like performance)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

Implemented timeout option in useFetch as outlined in @danielroe's comment

Tested using the provided reproduction in the playground:

Before:

After:

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[codecov-commenter]

Codecov Report

All modified and coverable lines are covered by tests ✅

❗ No coverage uploaded for pull request base (main@7cce0ef). Click here to learn what that means.

Additional details and impacted files

@@           Coverage Diff           @@
##             main   #24364   +/-   ##
=======================================
  Coverage        ?   58.76%           
=======================================
  Files           ?        5           
  Lines           ?      861           
  Branches        ?       46           
=======================================
  Hits            ?      506           
  Misses          ?      355           
  Partials        ?        0           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[nuxt-studio]

✅ Live Preview ready!

Name	Edit	Preview	Latest Commit
Nuxt Docs	Edit on Studio ↗︎	View Live Preview	abc60d3

[luc122c]

I've added a test to cover the change. I tried registering a new endpoint with a delay, however since internal requests don't make network requests, there was no effect. Therefore, this test does need to make a network request to an external URL. Is there a better one to use than this?

[manniL]

Is there a better one to use than this?

You could probably use useAsyncData + an own custom promise? 🤔

const { pending, status, error } = await useAsyncData(
  () => new Promise(resolve => setTimeout(resolve, 5000)), 
  { timeout: 1 }
)

[pi0]

Thanks for this!

I made an upstream tracker (unjs/ofetch#326) would you please add a TODO comment above about the migration plan and why we need this workaround today? 🙏🏼

For ofetch, we are considering AbortSignal.timeout (unjs/ofetch#309). Nuxt can opt-in sooner for this while you are at it.

[luc122c]

Thanks for your notes @manniL and @pi0. Please take a look at the latest changes and see if they're ok for you?

[pi0]

Other than small comment LGTM thanks

[danielroe]

Thank you ❤️