快捷導(dǎo)航

vue中解決異步交互數(shù)據(jù)出現(xiàn)延遲問題

更新時(shí)間：2025年04月09日 14:39:26 作者：baozaoderenlei

這篇文章主要介紹了vue中解決異步交互數(shù)據(jù)出現(xiàn)延遲問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

vue解決異步交互數(shù)據(jù)出現(xiàn)延遲

在我們開發(fā)中會(huì)遇到一些關(guān)于數(shù)據(jù)異步交互的問題，比如打印一些東西先從一個(gè)地方拿到數(shù)據(jù)然后在進(jìn)行打印，有時(shí)候小伙伴們可能會(huì)遇到我的打印頁面出來了，或者數(shù)據(jù)還沒有傳輸過來就打印出來了。

我們可以通過js中的宏任務(wù)和微任務(wù)來進(jìn)行解決。

1.注冊(cè)宏任務(wù)

一般可以將打印任務(wù)注冊(cè)為宏任務(wù) 而數(shù)據(jù)交互放在宏任務(wù)外

#打印方法
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
        })
    },
//數(shù)據(jù)交互方法
    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將打印任務(wù)注冊(cè)為宏任務(wù)
          setTimeout(()=>{
            this.printTables()
          },0)
        })
    }

2.注冊(cè)微任務(wù)

通過new promise 注冊(cè)一個(gè)微任務(wù)，在new promise中是同步代碼塊，而在.then中是異步的要在同步代碼塊執(zhí)行完畢后，才會(huì)去執(zhí)行。

  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()
      })
    },

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue-cli4.5.x快速搭建項(xiàng)目
vue-cli是一個(gè)官方發(fā)布vue.js項(xiàng)目腳手架,使用vue-cli可以快速創(chuàng)建vue項(xiàng)目。本文介紹了vue-cli4.5.x快速搭建項(xiàng)目，感興趣的可以了解一下
2021-05-05
vue el-table字段點(diǎn)擊出現(xiàn)el-input輸入框,失焦保存方式
這篇文章主要介紹了vue el-table字段點(diǎn)擊出現(xiàn)el-input輸入框,失焦保存方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-02-02
vue高德地圖JS API實(shí)現(xiàn)海量點(diǎn)標(biāo)記示例
本文主要介紹了vue高德地圖JS API實(shí)現(xiàn)海量點(diǎn)標(biāo)記示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-08-08
VueJs里利用CryptoJs實(shí)現(xiàn)加密及解密的方法示例
這篇文章主要介紹了VueJs里利用CryptoJs實(shí)現(xiàn)加密及解密的方法示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2019-04-04
vue移動(dòng)端下拉刷新和上拉加載的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue移動(dòng)端下拉刷新和上拉加載的實(shí)現(xiàn)代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-09-09
淺談vue實(shí)現(xiàn)雙向事件綁定v-model的原理
vue使用v-model實(shí)現(xiàn)數(shù)據(jù)的雙向綁定，它會(huì)根據(jù)控件類型自動(dòng)選取正確的方法來更新元素，本文就詳細(xì)的介紹一下原理，感興趣的可以了解一下
2021-08-08
vue項(xiàng)目中使用window的onresize事件方式
這篇文章主要介紹了vue項(xiàng)目中使用window的onresize事件方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-08-08
vue3中使用editor.js的詳細(xì)步驟記錄
富文本編輯器作為直接與用戶交互的內(nèi)容輸入生產(chǎn)工具,對(duì)大家的項(xiàng)目來說非常重要,下面這篇文章主要給大家介紹了關(guān)于vue3中使用editor.js的詳細(xì)步驟,需要的朋友可以參考下
2024-01-01
Vue單文件組件開發(fā)實(shí)現(xiàn)過程詳解
這篇文章主要介紹了Vue單文件組件開發(fā)實(shí)現(xiàn)過程詳解,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-07-07
vue項(xiàng)目搭建以及全家桶的使用詳細(xì)教程(小結(jié))
這篇文章主要介紹了vue項(xiàng)目搭建以及全家桶的使用詳細(xì)教程(小結(jié))，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-12-12