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>
Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐