question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

useFetch doesn't play nice with async/await (await-thenable)

See original GitHub issue

Describe 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

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:7 (4 by maintainers)

github_iconTop GitHub Comments

2reactions
francoism90commented, Mar 14, 2022

@kyranet Thanks for the fix! 😃

1reaction
wheatjscommented, Mar 5, 2022

If you are using await you need to use the Vue Suspense 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

const { data } = useFetch(url)

watch(data, () => {
  console.log(data.value)
})
Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found