小程序中Promise進(jìn)行異步流程處理的示例分析-創(chuàng)新互聯(lián)

這篇文章主要介紹小程序中Promise進(jìn)行異步流程處理的示例分析，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

網(wǎng)站的建設(shè)創(chuàng)新互聯(lián)專注網(wǎng)站定制,經(jīng)驗(yàn)豐富,不做模板,主營(yíng)網(wǎng)站定制開(kāi)發(fā).小程序定制開(kāi)發(fā),H5頁(yè)面制作!給你煥然一新的設(shè)計(jì)體驗(yàn)!已為辦公空間設(shè)計(jì)等企業(yè)提供專業(yè)服務(wù)。

微信小程序中使用Promise進(jìn)行異步流程處理的實(shí)例詳解

我們知道，JavaScript是單進(jìn)程執(zhí)行的，同步操作會(huì)對(duì)程序的執(zhí)行進(jìn)行阻塞處理。比如在瀏覽器頁(yè)面程序中，如果一段同步的代碼需要執(zhí)行很長(zhǎng)時(shí)間（比如一個(gè)很大的循環(huán)操作），則頁(yè)面會(huì)產(chǎn)生卡死的現(xiàn)象。

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

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

function asyncFunc(callback) {
 setTimeout(function () {
  //在這里寫你的邏輯代碼
  //...

  //邏輯代碼結(jié)束，執(zhí)行一個(gè)回調(diào)函數(shù)
  callback();
 }, 5000);
}

或者：

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

然后我們這樣調(diào)用：

asyncFunc(function () {
 console.log("asyncFunc() run complete");
});

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

這是一種使用了回調(diào)函數(shù)來(lái)控制代碼執(zhí)行流程的方式。這樣看起來(lái)沒(méi)問(wèn)題，也挺容易理解。

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

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

這樣的代碼可讀性和可維護(hù)性可想而知了。還有，回調(diào)函數(shù)真正的問(wèn)題在于：

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

那有什么辦法來(lái)改善這個(gè)問(wèn)題呢？答案是肯定的，Promise這種概念的產(chǎn)生，很好地解決了這一切。關(guān)于什么是Promise，一搜一大把介紹，我這里就不復(fù)制粘貼了，我主要是講一下我們?cè)趺从盟鼇?lái)解決我們的問(wèn)題。

我們來(lái)看一下，上面的例子如果使用Promise，它會(huì)是什么樣子?我們先將這些函數(shù)變成Promise的方式：

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

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

然后看一下他們是怎么樣被調(diào)用的：

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

這樣，這些異步函數(shù)就會(huì)按照順序一個(gè)一個(gè)依次執(zhí)行了。

ES6中原生支持了Promise，不過(guò)在原生不支持Promise的環(huán)境中，我們有很多第三方庫(kù)來(lái)支持，比如Q.js和Bluebird。它們一般都除了提供標(biāo)準(zhǔn)Promise的API外，還提供了一些標(biāo)準(zhǔn)之外但非常有用的API，使得異步流程的控制更加優(yōu)雅。

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

如：

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呢？答案是肯定的，我們當(dāng)然可以一個(gè)一個(gè)的用Promise去包裝這些API，但是這個(gè)還是比較麻煩的。不過(guò)，由于小程序的API的參數(shù)格式都比較統(tǒng)一，只接受一個(gè)object參數(shù)，回調(diào)都是在這個(gè)參數(shù)中設(shè)置，所以，這為我們的統(tǒng)一處理提供了便利，我們可以寫一個(gè)非侵入性的工具方法，來(lái)完成這樣的工作：

假設(shè)我們將這個(gè)工具方法寫到一個(gè)名為的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
}

之后，我們來(lái)看一下如何使用這個(gè)方法，將原來(lái)回調(diào)方式的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進(jìn)行異步流程處理的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

文章題目：小程序中Promise進(jìn)行異步流程處理的示例分析-創(chuàng)新互聯(lián)
網(wǎng)頁(yè)鏈接：http://muchs.cn/article36/ejisg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供關(guān)鍵詞優(yōu)化、用戶體驗(yàn)、服務(wù)器托管、網(wǎng)站制作、靜態(tài)網(wǎng)站、網(wǎng)站收錄

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)