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虚拟组件实现思路详解

    这篇文章主要给大家介绍了关于vue-virtual-scroll-list虚拟组件实现思路的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2023-02-02
  • 使用vue实现点击按钮滑出面板的实现代码

    使用vue实现点击按钮滑出面板的实现代码

    这篇文章主要介绍了使用vue实现点击按钮滑出面板的实现代码,非常不错,具有参考借鉴价值,需要的朋友参考下
    2017-01-01
  • vue脚手架项目创建步骤详解

    vue脚手架项目创建步骤详解

    这篇文章主要介绍了vue脚手架项目创建步骤详解,文章讲解的很清晰,初学者可以跟着步骤学习下
    2021-03-03
  • vue判断input输入内容全是空格的方法

    vue判断input输入内容全是空格的方法

    下面小编就为大家分享一篇vue判断input输入内容全是空格的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • Vue指令v-for遍历输出JavaScript数组及json对象的常见方式小结

    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包的全过程

    当市面上主流的组件库不能满足我们业务需求的时候,那么我们就有必要开发一套属于自己团队的组件库,下面这篇文章主要给大家介绍了关于vue3+vite自定义封装vue组件发布到npm包的相关资料,需要的朋友可以参考下
    2022-09-09
  • 一文带你搞懂V8垃圾回收系统

    一文带你搞懂V8垃圾回收系统

    在V8中,JavaScript的内存空间分为栈(Stack)和堆(Heap)两部分,垃圾回收的基本思路是:查找内存中的所有变量,看哪些已经不再需要,然后释放这些变量所占用的内存,本文就给大家梳理一下V8垃圾回收系统,需要的朋友可以参考下
    2023-07-07
  • vue拖拽组件使用方法详解

    vue拖拽组件使用方法详解

    这篇文章主要为大家详细介绍了vue拖拽组件的使用方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-12-12
  • vue中el-form-item展开项居中的实现方式

    vue中el-form-item展开项居中的实现方式

    这篇文章主要介绍了vue中el-form-item展开项居中的实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • Vue2中Class Component的使用指南

    Vue2中Class Component的使用指南

    Vue.js 以其简单易用和灵活性受到了广大开发者的喜爱,然而,随着项目的复杂度增加,组件的管理和组织也变得越来越重要,下面我们就来看看如何通过vue-class-component编写更加优雅和结构化的组件
    2024-11-11

最新评论