useFetch doesn't play nice with async/await (await-thenable)
See original GitHub issueDescribe the bug
// Valid
const { data } = await api(`books/${id}`);
// Not valid
const { data } = await api(`books/${id}`).get().json<BookResponse>();
Note: This is TS/eslint ruling, bit difficult to reproduce this using a link.
Reproduction
https://stackblitz.com/edit/vitejs-vite-rptfks/
System Info
$ npx envinfo --system --npmPackages '{vue,@vueuse/*}' --binaries --browsers
System:
OS: Linux 5.16 Arch Linux
Container: Yes
Binaries:
Node: 17.6.0 - /usr/bin/node
Yarn: 1.22.17 - /usr/bin/yarn
npm: 8.5.2 - /usr/bin/npm
npmPackages:
@vueuse/core: ^7.6.2 => 7.7.0
vue: ^3.2.31 => 3.2.31
Used Package Manager
yarn
Validations
- Follow our Code of Conduct
- Read the Contributing Guidelines.
- Read the docs.
- Check that there isn’t already an issue that reports the same bug to avoid creating a duplicate.
- Make sure this is a VueUse issue and not a framework-specific issue. For example, if it’s a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/core instead.
- Check that this is a concrete bug. For Q&A open a GitHub Discussion.
- The provided reproduction is a minimal reproducible example of the bug.
Issue Analytics
- State:
- Created 2 years ago
- Comments:7 (4 by maintainers)
Top Results From Across the Web
How to Use Fetch with async/await - Dmitri Pavlutin
How to use fetch() with async/await syntax in JavaScript: fetch JSON data, handle errors, make parallel requests, cancel requests.
Read more >Aync/Await doesn't work on my fetch Api function [duplicate]
I am fetching an API service by using async await which one doesn't work properly because the reason I couldn't figure out.
Read more >Complete Guide to fetch - with async await - YouTube
Your browser can't play this video. ... Towards the end, we will look at how we can use fetch to create domain-specific functions...
Read more >Use async-await with done does not work since v27. #11404
Regression Report Test functions cannot both take a 'done' callback and return something. Either use a 'done' callback, or return a promise.
Read more >"Synchronous" fetch with async/await - DEV Community
Program with asynchronous requests using async/await. ... To make it work, you need to wrap it inside an async function!
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
@kyranet Thanks for the fix! 😃
If you are using
await
you need to use the VueSuspense
API as well.isFetching
will also be useless when using await. If you don’t use await you can instead just watch the data and you won’t have to use the Suspense api, like this