vue3.0 中setup中 异步转同步
vue3.0 中setup中 异步转同步Vue3中的setup前加上async后页面不显示**问题描述 **在开发 vue3 中,因为通过接口数据为异步函数获取,导致最后数据无法成功赋值进 return 中的数据。所以需要setup函数异步转同步,后设置了async 后异步转同步,结果导致页面空白不显示。解决问题 在Vue3中,如果当前组件的setup使用了async/await,那么其调用组件的
·
vue3.0 中setup中 异步转同步
Vue3中的setup前加上async后页面不显示
**问题描述
**在开发 vue3 中,因为通过接口数据为异步函数获取,导致最后数据无法成功赋值进 return 中的数据。所以需要setup函数异步转同步,后设置了async 后异步转同步,结果导致页面空白不显示。
解决问题
在Vue3中,如果当前组件的setup使用了async/await,那么其调用组件的父组件的外层需要嵌套一个suspense标签,例如:
异步组件:
子组件
HTML
<template>
<div>······</div>
</template>
JS
export default {
async setup () {
let ···
// 接口A
await getAAA().then(() => {
···
}).catch(() => {
···
})
// 接口B
await getBBB().then(() => {
···
}).catch(() => {
···
})
return {
···
}
}
}
父组件中需要单独设置
<suspense>
<async-component/>
</suspense>
更多推荐
已为社区贡献2条内容
所有评论(0)