新聞中心
本文實例為大家分享了微信小程序異步處理的具體方法,供大家參考,具體內(nèi)容如下
10年積累的網(wǎng)站設(shè)計、成都網(wǎng)站建設(shè)經(jīng)驗,可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認識你,你也不認識我。但先網(wǎng)站設(shè)計后付款的網(wǎng)站建設(shè)流程,更有石家莊免費網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。
直接看問題:

然后看打印的結(jié)果:
.png)
根據(jù)上面兩圖可以看出,代碼上先執(zhí)行的網(wǎng)絡(luò)請求,再執(zhí)行打印的變量,但是從下面打印的結(jié)果來看,先出結(jié)果的是執(zhí)行打印變量的函數(shù)(aafn函數(shù)),再打印出網(wǎng)絡(luò)請求success的回調(diào)里返回的數(shù)據(jù)和賦值后的變量的值;
為什么先執(zhí)行的aafn,并且打印的值沒有賦值上?
因為wx.request是一個異步的請求,所以數(shù)據(jù)請求的同時,可以繼續(xù)向下執(zhí)行函數(shù)。所以這里值還沒有賦值上就開始打印了變量的值;
這種情況,怎么解決呢?
方法一:
嵌套
在wx.request的success回調(diào)里執(zhí)行aafn函數(shù)

然后運行結(jié)果

這里就取到值了
但是如果邏輯很復(fù)雜,需要用到很多層異步,就像這樣:
asyncFn1(function(){
//...
asyncFn2(function(){
//...
asyncFn3(function(){
//...
asyncFn4(function(){
//...
asyncFn5(function(){
//...
});
});
});
});
});
這樣代碼看起來就很不好看,代碼的可讀性和可維護性就不好了
那怎么解決這個問題呢?Promise這種概念的產(chǎn)生,很好地解決了這一切,Promise是什么?這里我就不多說了有興趣的自己去看一看,Promise介紹鏈接
先看看Promise的方式:
function asyncFn1(){
return new Promise(function (resolve, reject) {
//...
})
}
// asyncFn2,3,4,5也實現(xiàn)成跟asyncFn1一樣的方式...
調(diào)用
asyncFn1() .then(asyncFn2) .then(asyncFn3) .then(asyncFn4) .then(asyncFn5);
這樣的話,異步函數(shù)就可以依次執(zhí)行了
微信小程序的異步API怎么支持Promise呢?我們可以一個一個的用Promise去包裝這些API,但是這個還是比較麻煩的。不過,小程序的API的參數(shù)格式都比較統(tǒng)一,只接受一個object參數(shù),回調(diào)都是在這個參數(shù)中設(shè)置,所以,這為了統(tǒng)一處理提供了便利,寫一個工具方法,來完成這樣的工作
首先需要引用一個叫bluebird.js的文件;
進入bluebird官網(wǎng)下載:
.png)
這個好像是不能下載的,但是你可以點擊進入,然后復(fù)制,在小程序里創(chuàng)建一個js文件,將代碼復(fù)制到這個js里面,然后引用。
然后再寫一個JS,里面寫工具方法:
.png)
下面是prom.js

然后需要使用的那個頁面的js里引入prom.js:
.png)
調(diào)用:

打印結(jié)果

這樣就可以了,完結(jié)。
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。
分享題目:微信小程序異步處理詳解
本文網(wǎng)址:http://www.dlmjj.cn/article/pjhdei.html


咨詢
建站咨詢
