vue3.0中setup中异步转同步的实现
更新时间：2022年06月24日 14:44:56 作者：搬砖工KO水泥匠
这篇文章主要介绍了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的响应式被替换成了不能响应的数据
把数据压入原来的设置成响应式的数组就可以检测到了
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
NProgress.js是轻量级的进度条组件，使用简便，可以很方便集成到单页面应用中。这篇文章主要介绍了在vue项目中使用Nprogress.js进度条的方法,需要的朋友可以参考下2018-01-01
这篇文章主要介绍了vue输入框使用模糊搜索功能，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-05-05
这篇文章主要介绍了解决vue内存溢出报错的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了Vue 实现显示/隐藏层的思路（加全局点击事件）,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-12-12
这篇文章主要介绍了vue实现PC端录音功能的实例代码，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-06-06
el-table的高度不能适应不同电脑的分辨率,也不能跟随浏览器的高度变化而变化的问题,本文就来解决一下Element Table 自适应高度,感兴趣的可以了解一下2024-07-07
vue3项目+element-plus:时间选择器格式化方式
这篇文章主要介绍了vue3项目+element-plus:时间选择器格式化方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要为大家介绍了vue3使用Vite打包组件库从0搭建过程详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-02-02
本篇文章主要介绍了Vue+Element使用富文本编辑器的示例代码，具有一定的参考价值，有兴趣的可以了解一下2017-08-08
这篇文章主要介绍了在WebStorm中配置Vu3项目的详细步骤,还解决了ElementPlus与Sass版本兼容性问题,并提供了详细的配置和运行步骤,需要的朋友可以参考下2025-02-02
最新评论