微信小程序異步處理詳解

本文實(shí)例為大家分享了微信小程序異步處理的具體方法，供大家參考，具體內(nèi)容如下

10年積累的網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶(hù)對(duì)網(wǎng)站的新想法和需求。提供各種問(wèn)題對(duì)應(yīng)的解決方案。讓選擇我們的客戶(hù)得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先網(wǎng)站設(shè)計(jì)后付款的網(wǎng)站建設(shè)流程，更有石家莊免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

直接看問(wèn)題：

微信小程序異步處理詳解

然后看打印的結(jié)果：

微信小程序異步處理詳解

根據(jù)上面兩圖可以看出，代碼上先執(zhí)行的網(wǎng)絡(luò)請(qǐng)求，再執(zhí)行打印的變量，但是從下面打印的結(jié)果來(lái)看，先出結(jié)果的是執(zhí)行打印變量的函數(shù)（aafn函數(shù)），再打印出網(wǎng)絡(luò)請(qǐng)求success的回調(diào)里返回的數(shù)據(jù)和賦值后的變量的值；

為什么先執(zhí)行的aafn，并且打印的值沒(méi)有賦值上？

因?yàn)閣x.request是一個(gè)異步的請(qǐng)求，所以數(shù)據(jù)請(qǐng)求的同時(shí)，可以繼續(xù)向下執(zhí)行函數(shù)。所以這里值還沒(méi)有賦值上就開(kāi)始打印了變量的值；

這種情況，怎么解決呢？

方法一：

嵌套

在wx.request的success回調(diào)里執(zhí)行aafn函數(shù)

微信小程序異步處理詳解

然后運(yùn)行結(jié)果

微信小程序異步處理詳解

這里就取到值了

但是如果邏輯很復(fù)雜，需要用到很多層異步，就像這樣：

asyncFn1(function(){
 //...
 asyncFn2(function(){
  //...
  asyncFn3(function(){
   //...
   asyncFn4(function(){
    //...
    asyncFn5(function(){
      //...
    });
   });
  });
 });
});

這樣代碼看起來(lái)就很不好看，代碼的可讀性和可維護(hù)性就不好了

那怎么解決這個(gè)問(wèn)題呢？Promise這種概念的產(chǎn)生，很好地解決了這一切，Promise是什么？這里我就不多說(shuō)了有興趣的自己去看一看，Promise介紹鏈接

先看看Promise的方式：

function asyncFn1(){
 return new Promise(function (resolve, reject) {
  //...
 })
}

// asyncFn2,3,4,5也實(shí)現(xiàn)成跟asyncFn1一樣的方式...

調(diào)用

asyncFn1()
 .then(asyncFn2)
 .then(asyncFn3)
 .then(asyncFn4)
 .then(asyncFn5);

這樣的話(huà)，異步函數(shù)就可以依次執(zhí)行了

微信小程序的異步API怎么支持Promise呢？我們可以一個(gè)一個(gè)的用Promise去包裝這些API，但是這個(gè)還是比較麻煩的。不過(guò)，小程序的API的參數(shù)格式都比較統(tǒng)一，只接受一個(gè)object參數(shù)，回調(diào)都是在這個(gè)參數(shù)中設(shè)置，所以，這為了統(tǒng)一處理提供了便利，寫(xiě)一個(gè)工具方法，來(lái)完成這樣的工作

首先需要引用一個(gè)叫bluebird.js的文件；

進(jìn)入bluebird官網(wǎng)下載：

微信小程序異步處理詳解