微信小程序中使用Promise進行異步流程處理的實例詳解

我們知道，JavaScript是單進程執行的，同步操作會對程序的執行進行阻塞處理。比如在瀏覽器頁面程序中，如果一段同步的代碼需要執行很長時間（比如一個很大的循環操作），則頁面會產生卡死的現象。

所以，在JavaScript中，提供了一些異步特性，為程序提供了性能和體驗上的益處，比如可以將代碼放到setTimeout()中執行；或者在網頁中，我們使用Ajax的方式向服務器端做異步數據請求。這些異步的代碼不會阻塞當前的界面主進程，界面還是可以靈活的進行操作，等到異步代碼執行完成，再做相應的處理。

一段典型的異步代碼類似這樣：

function asyncFunc(callback) { setTimeout(function () {  //在這里寫你的邏輯代碼  //...  //邏輯代碼結束，執行一個回調函數  callback(); }, 5000);}

或者：

function getAccountInfo(callback, errorCallback) { wx.request({  url: '/accounts/12345',  success: function (res) {   //...   callback(data);  },  fail: function (res) {   //...   errorCallback(data);  } });}

然后我們這樣調用：

asyncFunc(function () { console.log("asyncFunc() run complete");});getAccountInfo(function (data) { console.log("get account info successfully:", data);}, function () { console.error("get account info failed");});

這是一種使用了回調函數來控制代碼執行流程的方式。這樣看起來沒問題，也挺容易理解。

但是，如果我們一段代碼中，異步操作太多，又要保證這些異步操作是有順序的執行，那我們的代碼就看起來非常糟糕，就像這樣：

asyncFunc1(function(){ //... asyncFunc2(function(){  //...  asyncFunc3(function(){   //...   asyncFunc4(function(){    //...    asyncFunc5(function(){      //...    });   });  }); });});

這樣的代碼可讀性和可維護性可想而知了。還有，回調函數真正的問題在于：

它剝奪了我們使用 return 和 throw 這些關鍵字的能力。

那有什么辦法來改善這個問題呢？答案是肯定的，Promise這種概念的產生，很好地解決了這一切。關于什么是Promise，一搜一大把介紹，我這里就不復制粘貼了，我主要是講一下我們怎么用它來解決我們的問題。

我們來看一下，上面的例子如果使用Promise，它會是什么樣子?我們先將這些函數變成Promise的方式：

function asyncFunc1(){ return new Promise(function (resolve, reject) {  //... })} // asyncFunc2,3,4,5也實現成跟asyncFunc1一樣的方式...

然后看一下他們是怎么樣被調用的：

asyncFunc1() .then(asyncFunc2) .then(asyncFunc3) .then(asyncFunc4) .then(asyncFunc5);