微信小程序異步處理

 

直接看問題：

而後看打印的結果：

根據上面兩圖能夠看出，代碼上先執行的網絡請求，再執行打印的變量，可是從下面打印的結果來看，先出結果的是執行打印變量的函數（aafn函數），再打印出網絡請求success的回調裏返回的數據和賦值後的變量的值；

 

爲何先執行的aafn，而且打印的值沒有賦值上？

由於wx.request是一個異步的請求，因此數據請求的同時，能夠繼續向下執行函數。因此這裏值尚未賦值上就開始打印了變量的值；

 

這種狀況，怎麼解決呢？

方法一： 

嵌套

在wx.request的success回調裏執行aafn函數

而後運行結果

這裏就取到值了

可是若是邏輯很複雜，須要用到不少層異步，就像這樣：

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

 

 

 這樣代碼看起來就很很差看，代碼的可讀性和可維護性就很差了

那怎麼解決這個問題呢？Promise這種概念的產生，很好地解決了這一切，Promise是什麼？這裏我就很少說了有興趣的本身去看一看，Promise介紹連接

先看看Promise的方式：

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

// asyncFn2,3,4,5也實現成跟asyncFn1同樣的方式...

調用

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

這樣的話，異步函數就能夠依次執行了

微信小程序的異步API怎麼支持Promise呢？（ 注：如今小程序已經支持Promise了，能夠直接使用，不用引用JS這麼麻煩！！！2017-12-16）

咱們能夠一個一個的用Promise去包裝這些API，可是這個仍是比較麻煩的。不過，小程序的API的參數格式都比較統一，只接受一個object參數，回調都是在這個參數中設置，因此，這爲了統一處理提供了便利，寫一個工具方法，來完成這樣的工做

首先須要引用一個叫bluebird.js的文件；

進入 bluebird官網下載：

 

 這個好像是不能下載的，可是你能夠點擊進入，而後複製，在小程序裏建立一個js文件，將代碼複製到這個js裏面，而後引用

而後再寫一個JS，裏面寫工具方法：

 

下面是prom.js

而後須要使用的那個頁面的js裏引入prom.js：

調用：

 

打印結果

 這樣就能夠了，完結。

 想了解更多的小程序的知識請添加微信小程序開發交流羣：368506119