【移動(dòng)應(yīng)用開發(fā)技術(shù)】如何在微信小程序中使用async或await

【移動(dòng)應(yīng)用開發(fā)技術(shù)】如何在微信小程序中使用async或await？

微信小程序中有大量接口是異步調(diào)用，比如wx.login()、wx.request()、wx.getUserInfo()等，都是使用一個(gè)對(duì)象作為參數(shù)，并定義了success()、fail()和complete()作為異步調(diào)用不同情況下的回調(diào)。但是，以回調(diào)的方式來(lái)寫程序，真的很傷，如果有一個(gè)過(guò)程需要依次干這些事情：那么，代碼大概會(huì)長(zhǎng)這樣wx.getStorage({

fail:()=>{

wx.getSetting({

success:settings=>{

wx.login({

success:({code})=>{

wx.getUesrInfo({

code,

success:(userInfo)=>{

wx.request({

success:()=>{

//dosomething

}

});

}

});

}

});

}

});

}

});顯然，async/await可以同樣邏輯的代碼看起來(lái)舒服得多。不過(guò)默認(rèn)情況下，“微信開發(fā)者工具”并不支持async/await。如何啟用？1.用上async/await如果有心，在微信小程序官方文檔中搜索async可以找到“工具?開發(fā)輔助?代碼編譯”頁(yè)面中提到了對(duì)async/await的支持情況，是在“增加編譯”小節(jié)的一個(gè)表格中，摘錄一段：在1.02.1904282以及之后版本的開發(fā)工具中，增加了增強(qiáng)編譯的選項(xiàng)來(lái)增強(qiáng)ES6轉(zhuǎn)ES5的能力，啟用后會(huì)使用新的編譯邏輯以及提供額外的選項(xiàng)供開發(fā)者使用。特性原有邏輯增強(qiáng)編譯Async/Await不支持支持支持async/await語(yǔ)法，按需注入regeneratorRuntime，目錄位置與輔助函數(shù)一致在1.02.1904282以及之后版本的開發(fā)工具中，增加了增強(qiáng)編譯的選項(xiàng)來(lái)增強(qiáng)ES6轉(zhuǎn)ES5的能力，啟用后會(huì)使用新的編譯邏輯以及提供額外的選項(xiàng)供開發(fā)者使用?？傊?，就是，只要把“微信開發(fā)者工具”更新到v1.02.1904282以上，就不需要干npminstallregenerator這之類的事情，只需要修改一個(gè)配置項(xiàng)就能使用async/await特性了。這個(gè)配置就在“工具欄?詳情?本地設(shè)置”頁(yè)面中。為了快速驗(yàn)證async/await可用，在app.js的onLaunch()事件函數(shù)中加一段代碼：(async()=>{

constp=awaitnewPromise(resolve=>{

setTimeout(()=>resolve("helloasync/await"),1000);

});

console.log(p);

})();在短暫的自動(dòng)編譯運(yùn)行之后，在調(diào)試器界面的Console頁(yè)簽中可以看到輸出：helloasync/await如果不行，請(qǐng)先檢查“微信開發(fā)者工具”的版本——至少，去下載一個(gè)最新版本總不會(huì)有問(wèn)題的。2.改造wx.abcd異步方法雖然async/await得到了支持，但是還得把wx.abcd()封裝成Promise風(fēng)格才行。Node.js在util模塊中提供了promisify來(lái)把Node.js風(fēng)格的回調(diào)轉(zhuǎn)換成Promise風(fēng)格，但顯然它不適用于wx風(fēng)格。還是自己動(dòng)手吧，也不用考慮太多，比如wx風(fēng)格的異步調(diào)用在形式上都是一致的，它們的特征如下：所以，如果wx.abcd()改成了Promise風(fēng)格，通過(guò)async/await來(lái)編寫，大概應(yīng)該是這個(gè)樣子try{

constres=wx.abcd();

//doanythinginsuccesscallback

}catch(err){

//doanythinginfailcallback

}finally{

//doanythingincompletecallback

}當(dāng)然，catch和finally這兩個(gè)部分并不是必須，也就是說(shuō)，不一定非得用try語(yǔ)句塊。但是，如果不用catch，會(huì)有一個(gè)神坑存在，這個(gè)問(wèn)題后面再說(shuō)?，F(xiàn)在首先要做的是改造。2.1.定義promisify()promisify()就是一個(gè)封裝函數(shù)，傳入原來(lái)的wx.abcd作為參加，返回一個(gè)Promise風(fēng)格的新函數(shù)。代碼和解釋如下：由于51cto博客在顯示代碼時(shí)，部分字體不是等寬字體，純代碼張貼出來(lái)的標(biāo)記不能對(duì)準(zhǔn)，所以先貼圖。但為了方便試驗(yàn)，接著貼代碼。由于51cto博客在顯示代碼時(shí)，部分字體不是等寬字體，純代碼張貼出來(lái)的標(biāo)記不能對(duì)準(zhǔn)，所以先貼圖。但為了方便試驗(yàn)，接著貼代碼。functionpromisify(fn){

//promisify()返回的是一個(gè)函數(shù)，

//這個(gè)函數(shù)跟傳入的fn（即wx.abcd）簽名相同（或兼容）

returnasyncfunction(args){

//

^^^^接受一個(gè)單一參數(shù)對(duì)象

returnnewPromise((resolve,reject)=>{

//

^^^^^^^^^^^返回一個(gè)Promise對(duì)象

fn({

//

^^^調(diào)用原函數(shù)并使用改造過(guò)的新的參數(shù)對(duì)象

...(args||{}),

//

^^^^^^^^

這個(gè)新參數(shù)對(duì)象得有原本傳入的參數(shù)，

//

^^

當(dāng)然得兼容沒(méi)有傳入?yún)?shù)的情況

success:res=>resolve(res),

//

^^^^^^^^^^^^^^^^^^^^^^^^^^^^

注入success回調(diào)，resovle它

fail:err=>reject(err)

//

^^^^^^^^^^^^^^^^^^^^^^^^注入fail回調(diào)，reject它

});

});

};

}舉例使用它：constasyncLogin=promisify(wx.login);

//注意別寫成wx.login()，為什么，我不說(shuō)

try{

constres=asyncLogin();

constcode=res.code;

//dosomethingwithcode

}catch(err){

//loginerror

}finally{

//promisify里沒(méi)有專門注入complete回調(diào)，

//因?yàn)閏omplete的內(nèi)容可以寫在這里

}2.2.定義wx.async()不過(guò)老實(shí)說(shuō)，把要用的異步方法通過(guò)promisify一個(gè)個(gè)處理，寫起來(lái)還是挺煩的，不如寫個(gè)工具函數(shù)把要用的方法一次性轉(zhuǎn)換出來(lái)。不過(guò)一查，wx下定義了不知道多少異步方法，還是退而求其次，用到啥轉(zhuǎn)啥，不過(guò)可以批量轉(zhuǎn)，轉(zhuǎn)出來(lái)的結(jié)果還是封裝在一個(gè)對(duì)象中。整個(gè)過(guò)程就是迭代處理，最后把每個(gè)處理結(jié)果聚焦在一起：functiontoAsync(names){

//這里names期望是一個(gè)數(shù)組

return(names||[])

.map(name=>(

{

name,

member:wx[name]

}

))

.filter(t=>typeoft.member==="function")

.reduce((r,t)=>{

r[]=promisify(wx[]);

returnr;

},{});

}這個(gè)toAsync的用法大致是這樣的constawx=toAsync(["login","request"]);

awaitawx.login();

awaitawx.request({...});有些人可能更習(xí)慣單個(gè)參數(shù)傳入的方式，像這樣constawx=toAsync("login","request");那么在toAsync的定義中，參數(shù)改為...names就好，即functiontoAsync(...names){...}還沒(méi)完，因?yàn)槲也幌朐诿恳粋€(gè)JS文件中去import{toAsync}from...。所以把它在App.onLaunch()中把它注入到wx對(duì)象中去，就像這樣App({

onLaunch:function(){

//...

wx.async=toAsync;

//...

}

});3.await帶來(lái)的神坑工具準(zhǔn)備好了，代碼也大刀闊斧地進(jìn)行了改造，看起來(lái)舒服多了，一運(yùn)行卻報(bào)錯(cuò)！為什么？？？先來(lái)看一段原來(lái)的代碼，是這樣的wx.getStorage({

key:"blabla",

success:res=>{

//dowithres

}

});改造之后是這樣constres=awaitawx.getStorage({key:"blabla"});

//<==runtimeerror

//dowithresawx.getStorage拋了個(gè)異常，原因是叫"blabal"的這個(gè)數(shù)據(jù)不存在。為什么原來(lái)沒(méi)有錯(cuò)，現(xiàn)在卻報(bào)錯(cuò)？因?yàn)樵瓉?lái)沒(méi)有定義fail回調(diào)，所以錯(cuò)誤被忽略了。但是promisify()把fail回調(diào)封裝成了reject()，所以awx.getStorage()返回的Promise對(duì)象上，需要通過(guò)catch()來(lái)處理。我們沒(méi)有直接使用Promise對(duì)象，而是用的await語(yǔ)法，所以reject()會(huì)以拋出異常的形式體現(xiàn)出來(lái)。用人話說(shuō)，代碼得這樣改：try{

constres=awaitawx.getStorage({key:"blabla"});

//<==runtimeerror

//dowithres

}catch(err){

//我知道有錯(cuò)，就是當(dāng)它不存在！

}傷心了不是？如果沒(méi)有傷心，你想想，每一個(gè)調(diào)用都要用try...catch...代碼塊，還能不傷心嗎？3.1.忽略不需要處理的錯(cuò)誤處理錯(cuò)誤真的是個(gè)好習(xí)慣，但真的不是所有錯(cuò)誤情況都需要處理。其實(shí)要忽略錯(cuò)誤也很簡(jiǎn)單，直接在每個(gè)Promise形式的異步調(diào)后面加句話就行，比如constres=awaitawx

.getStorage({key:"blabla"})

.catch(()=>{});

//

^^^^^^^^^^^^^^^^捕捉錯(cuò)誤，但什么也不干稍微解釋一下，在這里awx.getStorage()返回一個(gè)Promise對(duì)象，對(duì)該對(duì)象調(diào)用.catch()會(huì)封裝reject的情況，同時(shí)它會(huì)返回一個(gè)新的Promise對(duì)象，這個(gè)對(duì)象才是await等待的Promise。不過(guò)感覺(jué).catch(()=>{})寫起來(lái)怪怪的，那就封裝成一個(gè)方法吧，這得改Promise類的原形Ptot