Can you explain how to incorporate async/await within the setup() function of Vue 3.0 using Typescript?

Question

Can you explain how to incorporate async/await within the setup() function of Vue 3.0 using Typescript?

(This particular inquiry pertains to TypeScript, not JavaScript. Despite a resolved JavaScript query below, this issue remains specific to TypeScript).

I am attempting to implement async functionality in Vue 3.0 using TypeScript.

The following code operates effectively without async:

// 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() { // <-- works fine without 'async'
    const test = 'test'

    // await doSomethingAsynchronous()

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

Upon implementing async setup(), the element "HelloWorld" vanishes from the page, accompanied by an error message within the Firefox console:

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

Transitioning async setup() to setup() allows the code to function properly, albeit inhibiting async/await usage within the setup function.

Therefore, my inquiry revolves around utilizing async/await within the setup() function while employing TypeScript.

UPDATE:

A response regarding the question posed at why i got blank when use async setup() in Vue3 demonstrates that async setup() functions adequately with JavaScript, suggesting it should similarly work seamlessly with TypeScript as well.

typescript vue.js vuejs3 vue-composition-api vue-script-setup

Answer 1

Answer №1

Utilize the onMounted hook for handling asynchronous calls like this:

 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

As mentioned in the official documentation, the recommended approach is to use async setup in the child component and wrap it with a Suspense component in the parent component:

UserList.vue

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
    async setup() {
        //fetch 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

Utilize the onMounted hook for handling asynchronous calls like this:

 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

As mentioned in the official documentation, the recommended approach is to use async setup in the child component and wrap it with a Suspense component in the parent component:

UserList.vue

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
    async setup() {
        //fetch 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 3

Answer №2

A different approach to accomplish this task:

 let userList = ref([]);

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

 return {
   userList,
 }

You don't need to wait for it to mount, similar to utilizing created() in the options API.

Note: Always remember to end a statement with a semicolon ";" before declaring a function; otherwise, JavaScript might misinterpret it as the previous statement intending to return a function. For instance, missing the semicolon could lead to the bug "ref([]) is not a function":

const userList = ref([]) // Missing semicolon here

(async () => {

To prevent this issue, another effective practice is placing the semicolon on the same line as the function definition, like so:

;(async () => {

Answer 4

A different approach to accomplish this task:

 let userList = ref([]);

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

 return {
   userList,
 }

You don't need to wait for it to mount, similar to utilizing created() in the options API.

Note: Always remember to end a statement with a semicolon ";" before declaring a function; otherwise, JavaScript might misinterpret it as the previous statement intending to return a function. For instance, missing the semicolon could lead to the bug "ref([]) is not a function":

const userList = ref([]) // Missing semicolon here

(async () => {

To prevent this issue, another effective practice is placing the semicolon on the same line as the function definition, like so:

;(async () => {

Answer 5

Answer №3

If you want to invoke the API even before the beforeCreate() lifecycle hook, there are a few approaches you can take:

Utilize a helper function (which is more elegant than using ;(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() will be called before beforeCreate()
    users.value = await getUsers()
    // ...
  })
</script>

Employ promise chaining method:

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

  const users = ref([])

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

Answer 6

If you want to invoke the API even before the beforeCreate() lifecycle hook, there are a few approaches you can take:

Utilize a helper function (which is more elegant than using ;(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() will be called before beforeCreate()
    users.value = await getUsers()
    // ...
  })
</script>

Employ promise chaining method:

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

  const users = ref([])

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

Answer 7

Answer №4

Here is an alternative approach. It bears resemblance to gustavodacrvi's solution. However, if you are not a fan of self-invoking functions like myself, you may appreciate this version more:

<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 implementation takes the loading state into consideration, as the users array starts empty and then gets populated.

Answer 8

Here is an alternative approach. It bears resemblance to gustavodacrvi's solution. However, if you are not a fan of self-invoking functions like myself, you may appreciate this version more:

<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 implementation takes the loading state into consideration, as the users array starts empty and then gets populated.

Can you explain how to incorporate async/await within the setup() function of Vue 3.0 using Typescript?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Angular is experiencing difficulty locating the routing path for the auxiliary `router-outlet`

``Can someone provide guidance on how to showcase the validation check result for a text-field in the snackbar using Vuet

What is the reason behind the absence of compile time errors when using 'string' functions on an 'any' field type variable in TypeScript?

What is the best way to incorporate Twitter Bootstrap CSS and Javascript into a basic VueJS project?

Is it possible for Typescript to utilize Webpack's UMD feature for importing

The readline interface in Node that echoes each character multiple times

Angular Material: Enhanced search input with a universal clear button

What is the role of authguard in securing routes?

Oops! Looks like the code encountered an error: Home is not defined in Laravel Vue.js

What causes the v-for in a template to only update when the input text changes?

Perform a child component function in Angular

What is the best way to organize my NPM package with separate directories for types and functions?

Importing ES Module is a requirement when making updates to Angular framework

Vue - Additional loading may be required to manage the output of these loaders

unable to establish initial boundaries for vuemapbox map

Tips for resolving the error: finding the right loader for handling specific file types in React hooks

Typescript inheritance results in an undefined value being returned

Angular 5 encountering issue with @Injectable annotation causing TypeScript error

Encountered error code 422 Unprocessable_entity upon submitting form to Rails API via Vue.js application

Displaying nested web service array data in Angular 4