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-cli4.5.x快速搭建项目

    vue-cli4.5.x快速搭建项目

    vue-cli是一个官方发布vue.js项目脚手架,使用vue-cli可以快速创建vue项目。本文介绍了vue-cli4.5.x快速搭建项目,感兴趣的可以了解一下
    2021-05-05
  • vue el-table字段点击出现el-input输入框,失焦保存方式

    vue el-table字段点击出现el-input输入框,失焦保存方式

    这篇文章主要介绍了vue el-table字段点击出现el-input输入框,失焦保存方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-02-02
  • vue高德地图JS API实现海量点标记示例

    vue高德地图JS API实现海量点标记示例

    本文主要介绍了vue高德地图JS API实现海量点标记示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-08-08
  • VueJs里利用CryptoJs实现加密及解密的方法示例

    VueJs里利用CryptoJs实现加密及解密的方法示例

    这篇文章主要介绍了VueJs里利用CryptoJs实现加密及解密的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-04-04
  • vue移动端下拉刷新和上拉加载的实现代码

    vue移动端下拉刷新和上拉加载的实现代码

    这篇文章主要介绍了vue移动端下拉刷新和上拉加载的实现代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • 浅谈vue实现双向事件绑定v-model的原理

    浅谈vue实现双向事件绑定v-model的原理

    vue使用v-model实现数据的双向绑定,它会根据控件类型自动选取正确的方法来更新元素,本文就详细的介绍一下原理,感兴趣的可以了解一下
    2021-08-08
  • vue项目中使用window的onresize事件方式

    vue项目中使用window的onresize事件方式

    这篇文章主要介绍了vue项目中使用window的onresize事件方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-08-08
  • vue3中使用editor.js的详细步骤记录

    vue3中使用editor.js的详细步骤记录

    富文本编辑器作为直接与用户交互的内容输入生产工具,对大家的项目来说非常重要,下面这篇文章主要给大家介绍了关于vue3中使用editor.js的详细步骤,需要的朋友可以参考下
    2024-01-01
  • Vue单文件组件开发实现过程详解

    Vue单文件组件开发实现过程详解

    这篇文章主要介绍了Vue单文件组件开发实现过程详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-07-07
  • vue项目搭建以及全家桶的使用详细教程(小结)

    vue项目搭建以及全家桶的使用详细教程(小结)

    这篇文章主要介绍了vue项目搭建以及全家桶的使用详细教程(小结),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12

最新评论