微信小程序異步處理

發表時間：2022-9-6

發布人：葵宇科技

浏覽次數：18

直接看問(wèn)題：

然後看打印的結果：

根據上面兩圖可(kě)以看出，代碼上先執行的網絡請求，再執行打印的變量，但是從下(xià)面打印的結果來看，先出結果的是執行打印變量的函數（aafn函數），再打印出網絡請求success的回調裡返回的數據和(hé)賦值後的變量的值；

為什麼先執行的aafn，并且打印的值沒有賦值上？

因為wx.request是一個(gè)異步的請求，所以數據請求的同時，可(kě)以繼續向下(xià)執行函數。所以這裡值還沒有賦值上就開始打印了變量的值；

這種情況，怎麼解決呢(ne)？

方法一：嵌套

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

然後運行結果

這裡就取到值了

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

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

這樣代碼看起來就很不好看，代碼的可(kě)讀性和(hé)可(kě)維護性就不好了

那怎麼解決這個(gè)問(wèn)題呢(ne)？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);

這樣的話，異步函數就可(kě)以依次執行了

微信小程序的異步API怎麼支持Promise呢(ne)？

我們可(kě)以一個(gè)一個(gè)的用Promise去包裝這些API，但是這個(gè)還是比較麻煩的。不過，小程序的API的參數格式都比較統一，隻接受一個(gè)object參數，回調都是在這個(gè)參數中(zhōng)設置，所以，這為了統一處理提供了便利，寫一個(gè)工具方法，來完成這樣的工作

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

進入 bluebird官網下(xià)載：