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

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

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

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

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

我們可以通過js中的宏任務和微任務來進行解決。

1.注冊宏任務

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

#打印方法
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將打印任務注冊為宏任務
          setTimeout(()=>{
            this.printTables()
          },0)
        })
    }

2.注冊微任務

通過new promise 注冊一個微任務，在new promise中是同步代碼塊，而在.then中是異步的要在同步代碼塊執(zhí)行完畢后，才會去執(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()
      })
    },

總結

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

您可能感興趣的文章:

vue-virtual-scroll-list虛擬組件實現(xiàn)思路詳解
這篇文章主要給大家介紹了關于vue-virtual-scroll-list虛擬組件實現(xiàn)思路的相關資料,文中通過實例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2023-02-02
使用vue實現(xiàn)點擊按鈕滑出面板的實現(xiàn)代碼
這篇文章主要介紹了使用vue實現(xiàn)點擊按鈕滑出面板的實現(xiàn)代碼，非常不錯，具有參考借鑒價值，需要的朋友參考下
2017-01-01
vue腳手架項目創(chuàng)建步驟詳解
這篇文章主要介紹了vue腳手架項目創(chuàng)建步驟詳解，文章講解的很清晰，初學者可以跟著步驟學習下
2021-03-03
vue判斷input輸入內(nèi)容全是空格的方法
下面小編就為大家分享一篇vue判斷input輸入內(nèi)容全是空格的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-03-03
Vue指令v-for遍歷輸出JavaScript數(shù)組及json對象的常見方式小結
這篇文章主要介紹了Vue指令v-for遍歷輸出JavaScript數(shù)組及json對象的常見方式,結合實例形式總結分析了vue.js使用v-for指令遍歷輸出js數(shù)組與json對象的常見操作技巧,需要的朋友可以參考下
2019-02-02
vue3+vite自定義封裝vue組件發(fā)布到npm包的全過程
當市面上主流的組件庫不能滿足我們業(yè)務需求的時候,那么我們就有必要開發(fā)一套屬于自己團隊的組件庫,下面這篇文章主要給大家介紹了關于vue3+vite自定義封裝vue組件發(fā)布到npm包的相關資料,需要的朋友可以參考下
2022-09-09
一文帶你搞懂V8垃圾回收系統(tǒng)
在V8中，JavaScript的內(nèi)存空間分為棧（Stack）和堆（Heap）兩部分，垃圾回收的基本思路是：查找內(nèi)存中的所有變量，看哪些已經(jīng)不再需要，然后釋放這些變量所占用的內(nèi)存，本文就給大家梳理一下V8垃圾回收系統(tǒng),需要的朋友可以參考下
2023-07-07
vue拖拽組件使用方法詳解
這篇文章主要為大家詳細介紹了vue拖拽組件的使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-12-12
vue中el-form-item展開項居中的實現(xiàn)方式
這篇文章主要介紹了vue中el-form-item展開項居中的實現(xiàn)方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-10-10
Vue2中Class?Component的使用指南
Vue.js?以其簡單易用和靈活性受到了廣大開發(fā)者的喜愛,然而,隨著項目的復雜度增加,組件的管理和組織也變得越來越重要,下面我們就來看看如何通過vue-class-component編寫更加優(yōu)雅和結構化的組件
2024-11-11