微信小程式中Promise進行非同步流程處理的實作過程

這篇文章主要介紹了微信小程式中使用Promise進行非同步流程處理的實例詳解的相關資料,這裡詳細說明該如何使用Promise 來進行非同步流程的處理，提供具體實現步驟，需要的朋友可以參考下

微信小程式中使用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);

這樣，這些非同步函數就會依照順序一個一個依序執行了。

ES6中原生支援了Promise，不過在原生不支援Promise的環境中，我們有許多第三方函式庫來支持，像是Q.js和Bluebird。它們一般都除了提供標準Promise的API外，還提供了一些標準之外但非常有用的API，使得非同步流程的控制更加優雅。

從微信小程式的API文件中我們可以看到，框架提供的JavaScript API中很多函數其實都是異步的，如wx.setStorage(), wx.getStorage(), wx.getLocation( )等等，它們也是提供的回呼的處理方式，在參數中傳入success, fail，complete回呼函數，就可以對運行成功或失敗進行分別處理。

如：

wx.getLocation({ 
 type: 'wgs84', 
 success: function(res) { 
  var latitude = res.latitude 
  var longitude = res.longitude 
  var speed = res.speed 
  var accuracy = res.accuracy 
 },
 fail: function() {
  console.error("get location failed")
 }
})

我們能不能讓微信小程式的非同步API支援Promise呢？答案是肯定的，我們當然可以一個一個的用Promise去包裝這些API，但這個還是比較麻煩的。不過，由於小程式的API的參數格式都比較統一，只接受一個object參數，回呼都是在這個參數中設置，所以，這為我們的統一處理提供了便利，我們可以寫一個非侵入性的工具方法，來完成這樣的工作：

假設我們將這個工具方法寫到一個名為的util.js的檔案中：

var Promise = require('../libs/bluebird.min')  //我用了bluebird.js
function wxPromisify(fn) { 
 return function (obj = {}) {  
  return new Promise((resolve, reject) => {   
   obj.success = function (res) {    
    resolve(res)   
   }   

   obj.fail = function (res) {    
    reject(res)   
   }   

   fn(obj)  
  }) 
 }
}

module.exports = { 
 wxPromisify: wxPromisify
}

之後，我們來看看如何使用這個方法，將原來回呼方式的API變成Promise的方式：

var util = require('../utils/util')

var getLocationPromisified = util.wxPromisify(wx.getLocation)

getLocationPromisified({
 type: 'wgs84'
}).then(function (res) {
 var latitude = res.latitude 
 var longitude = res.longitude 
 var speed = res.speed 
 var accuracy = res.accuracy 
}).catch(function () {
 console.error("get location failed")
})

是不是很容易理解？

以上是微信小程式中Promise進行非同步流程處理的實作過程的詳細內容。更多資訊請關注PHP中文網其他相關文章！