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.

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>

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 () => {

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>

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.