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