How can I use async/await in the Vue 3.0 setup() function using Typescript
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, }; },
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 () => {
An alternative is to use the promise chain, the benefit for doing so is that the code is run even before the beforeCreate
lifecycle hook:
import { defineComponent, ref } from 'vue'import { getData } from './api.js'export default defineComponent({ setup() { const users = ref([]) getData().then(({ data }) => (users.value = data)) return { users, } },})