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

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

• 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.

[francoism90]

@kyranet Thanks for the fix! 😃

[wheatjs]

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)
})