How can I use async/await in the Vue 3.0 setup() function using Typescript

Question

(This question has been answered for JavaScript, see below, but this question is specific for TypeScript, which behaves differently)

I'm trying to use async functionality in Vue3.0 using typescript.

Without async this code works nice:

// file: components/HelloWorld.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script lang="ts">
import {defineComponent} from 'vue'

export default defineComponent({
  name: 'HelloWorld',
  props: {
    msg: String,
  },
  async setup() { // <-- this works without 'async'
    const test = 'test'

    // await doSomethingAsynchronous()

    return {
      test,
    }
  },
})
</script>

With async setup() the component "HelloWorld" disappears from the page, and the Firefox console tells me

"Uncaught (in promise) TypeError: node is null (runtime-dom.esm-bundler.js)"

When I change async setup() to setup(), the code works, but then I would not be able to use async/await inside the setup function.

So my question: how do I use async/await inside the setup() function using Typescript?

EDIT:

The answer to this question: why i got blank when use async setup() in Vue3 shows that async setup() does work with JavaScript, so I would expect it to work in TypeScript as well.

Calamondin

Answer 1

Try to use onMounted hook to manipulate asynchronous call :

 setup() {
    const users = ref([]);
    onMounted(async () => {
      const res = await axios.get("https://jsonplaceholder.typicode.com/users");
      users.value = res.data;
      console.log(res);
    });

    return {
      users,
    };
  },

LIVE DEMO

According to official docs the Best approach is to use async setup in child component and wrap that component by Suspense component in the parent one :

UserList.vue

<script  lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
    async setup() {
        //get users from jsonplacerholder using await fetch api 
        const users = await fetch("https://jsonplaceholder.typicode.com/users").then(res => res.json());

        return {
            users
        }
    }
})
</script>
<template>
    <div>
        <!-- list users -->
        <ul>
            <li v-for="user in users">{{ user.name }}</li>
        </ul>
    </div>
</template>

Parent component:

<script lang="ts">

import UserList from "../components/tmp/UserList.vue";
...
</script>

   <div>
            <!-- Suspense component  to show users  -->
            <Suspense>
                <template #fallback>
                    <div>loading</div>
                </template>

                <UserList />
            </Suspense>
        </div>

Subarid

Why is that the 'best approach'? – Terisateriyaki

@LeeGoddard I guess that's because it is the recommended approach from Vue documentation. vuejs.org/api/composition-api-setup.html#basic-usage – Interrogation

Such information might be best placed within the answer. – Terisateriyaki

Great answer. However, as of January 2023, the doc says Suspense is an experimental feature, which means it probably isn't the best. – Testament

Agree with @joshua <Suspense> is an experimental feature and its API will likely change. – Eudo

@SimonKlimek it can change internally but it will keep consumed in the same way, I see Evan You said it will be stable very soon – Subarid

@BoussadjraBrahim Can you help point us to where he said that? I couldn't find anything with a quick Google. Meanwhile the official Vue docs at vuejs.org/guide/built-ins/suspense.html still warn: "It is not guaranteed to reach stable status and the API may change before it does." I personally wouldn't use it until that's updated. – Testament

youtu.be/I5mGNB-4f0o?t=1094 – Subarid

Answer 2

Another way of doing this:

 const users = ref([]);
 
 (async () => {
   const res = await axios.get("https://jsonplaceholder.typicode.com/users");
   users.value = res.data;
   console.log(res);
 })()

 return {
   users,
 }

And you don't have to wait for it to mount, this is similar to using created() with the options API.

Note: Don't forget to always have a semicolon ";" before the function statement, otherwise, JavaScript would think that the previous statement was supposed to return a function, the following code, for example, would cause a bug "ref([]) is not a function":

const users = ref([]) // No semicolon here

(async () => {

Another way of preventing this bug is to always have the semicolon on the same line of the function definition, the following code also works:

;(async () => {

Fractostratus

Much cleaner! And beware not to put the executing brackets inside the grouping brackets: you will get a TS1128: Declaration or statement expected. – Kelsy

When you create a immediately invoked function you split the thread into two running in parallel. This answer will always return an empty users and THEN update it. You should be using suspense and async setup instead. Unless you want this buggy experience of updating the UI. – Undersell

Keep in mind that suspense is still considered an "Experimental feature" though. vuejs.org/guide/built-ins/suspense.html – Fractostratus

Answer 3

To call API even before the beforeCreate() lifecycle hook, there're a couple of ways:

1. Use a helper function (more elegant than ;(async () => {})()):

// utils.ts
export const run = (asyncFn: () => Promise<void>) => asyncFn()

// component.vue
<script lang="ts" setup>
  import { ref } from 'vue'
  import { run } from './utils.ts'
  import { getUsers } from './api.ts'

  const users = ref([])

  run(async () => {
    // getUsers() gets called before beforeCreate()
    users.value = await getUsers()
    // ...
  })
</script>

2. Use promise chaining:

// component.vue
<script lang="ts" setup>
  import { ref } from 'vue'
  import { getUsers } from './api.ts'

  const users = ref([])

  // getUsers() gets called before beforeCreate()
  getUsers().then(users => {
    users.value = users
    // ...
  })
</script>

Weakness

same problem as with @Fractostratus answer. In fact, even though the code runs before the beforeCreate, the data is resolved later than onMounted because any api call needs time and setup will not wait. It seems the closest "standard" thing to call api before mounting is to call it in async onBeforeMount – Phenomenalism

I can say further, even though commands inside async onBeforeMount will start in the proper moment, they again will be finished after the entire setup will be completed and the page will be mounted. And it's visible as "flashing". So it seems there is no way to do anything inside synchronous setup what should be done before the page will be mounted. Either to use their "experimental" suspense or to execute the code in the beforeEnter router guard. The latter one will not fire if the params are just changed (e.g. user Id) so I basically don't know what to do. – Phenomenalism

@Phenomenalism In most use cases, there's no point for the request to must finish before mounted. – Weakness

You're right. No point to stop rendering to await API. Proper way to show e.g. placeholder or spinner and then replace it with actual data as soon as it was received. – Phenomenalism

Answer 4

Here is another way. It's very similar to gustavodacrvi' answer, but if you don't like self-invoking functions as much as I do, you may find this version a bit nicer:

<script setup lang="ts">
const users = ref<User[]>([])
const isLoading = ref(true)

async function fetchUsers() {
  users.value = await getUsers()
  isLoading.value = false
}

fetchUsers()
</script>

This requires you to take loading state into account, because users array will initially be empty and then updated.

Plenitude