这篇文章主要介绍了vue3.0中setup中异步转同步的实现方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
vue3 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>
使用vue3中的异步
在vue3中使用ajax请求数据的时候,由于不能在setup前面使用async,使用后会导致return的返回值全部变成promise的返回值,所以在执行的时候得使用一些特定的钩子来发送请求
和vue2一样,选择在dom节点渲染完成的时候发送请求,
(getdata为封装的数据)
这样写完之后会发现
页面显示没有数据,但是tableData却可以显示数来数据,但是因为vue的承诺是相应式数据发生改变,页面就会重新渲染,所以是tabledata的响应式被替换成了不能响应的数据
把数据压入原来的设置成响应式的数组就可以检测到了
原文链接:https://blog.csdn.net/WangYC_/article/details/115730233
© 版权声明
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 [email protected] 进行投诉反馈,一经查实,立即处理!
THE END
暂无评论内容