vue中解决异步交互数据出现延迟问题
更新时间:2025年04月09日 14:39:26 作者:baozaoderenlei
这篇文章主要介绍了vue中解决异步交互数据出现延迟问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue解决异步交互数据出现延迟
在我们开发中会遇到一些关于数据异步交互的问题,比如打印一些东西先从一个地方拿到数据然后在进行打印,有时候小伙伴们可能会遇到我的打印页面出来了,或者数据还没有传输过来就打印出来了。
我们可以通过js中的宏任务和微任务来进行解决。
1.注册宏任务
一般可以将打印任务注册为宏任务 而数据交互放在宏任务外
#打印方法
printTables(){
print({
printable: 'printJS-form',
type: 'html',
// scanStyles: false,
style: 'table tr td,th { border-collapse: collapse;padding: 0 10px;border:1px solid}',
targetStyles: ['*'],
maxWidth:1100
})
},
//数据交互方法
CreateOneFormPage(msg) {
this.printData=msg
priceSlips.queryAllDetails(this.printData.oId,this.queryPriceSheet.pName,
this.queryPriceSheet.odType,0,0)
.then(res=>{
this.priceSheetList=res.list
//通过settimeout将打印任务注册为宏任务
setTimeout(()=>{
this.printTables()
},0)
})
}2.注册微任务
通过new promise 注册一个微任务,在new promise中是同步代码块,而在.then中是异步的要在同步代码块执行完毕后,才会去执行。
CreateOneFormPage(msg) {
new Promise((resolve,reject)=>{
this.printData=msg
priceSlips.queryAllDetails(this.printData.oId,this.queryPriceSheet.pName,
this.queryPriceSheet.odType,0,0)
.then(res=>{
this.priceSheetList=res.list
resolve()
})
}).then(()=>{
this.printTables()
})
},总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
vue-virtual-scroll-list虚拟组件实现思路详解
这篇文章主要给大家介绍了关于vue-virtual-scroll-list虚拟组件实现思路的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2023-02-02
Vue指令v-for遍历输出JavaScript数组及json对象的常见方式小结
这篇文章主要介绍了Vue指令v-for遍历输出JavaScript数组及json对象的常见方式,结合实例形式总结分析了vue.js使用v-for指令遍历输出js数组与json对象的常见操作技巧,需要的朋友可以参考下2019-02-02
vue3+vite自定义封装vue组件发布到npm包的全过程
当市面上主流的组件库不能满足我们业务需求的时候,那么我们就有必要开发一套属于自己团队的组件库,下面这篇文章主要给大家介绍了关于vue3+vite自定义封装vue组件发布到npm包的相关资料,需要的朋友可以参考下2022-09-09


最新评论