Vue3中可以使用async/await和Promise来处理异步操作。
- async/await:异步函数返回一个Promise对象,使用async关键字标记函数为异步函数,使用await关键字等待异步操作的完成。例如:
async function getData(){
const res = await fetch('https://api.example.com/data')
const data = await res.json()
return data
}
export default{
data(){
return{
data: null
}
},
async created(){
this.data = await getData()
}
}
- Promise:使用Promise对象的then()方法来处理异步操作的结果。例如:
export default{
data(){
return{
data: null
}
},
created(){
fetch('https://api.example.com/data')
.then(res => res.json())
.then(data => this.data = data)
}
}
需要注意的是,在Vue3中,推荐使用setup()函数来替代Vue2中的created()函数,使用异步函数时也要在setup()里使用async关键字标记。例如:
import { ref } from 'vue'
async function getData(){
const res = await fetch('https://api.example.com/data')
const data = await res.json()
return data
}
export default{
setup(){
const data = ref(null)
getData().then(d => data.value = d)
return {
data
}
}
}