网友真实露脸自拍10p,成人国产精品秘?久久久按摩,国产精品久久久久久无码不卡,成人免费区一区二区三区

小程序模板網(wǎng)

一斤代碼深入理解系列《五》:微信小程序中使用Promise進(jìn)行異步流程處理

發(fā)布時(shí)間:2018-03-24 15:49 所屬欄目:小程序開(kāi)發(fā)教程

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

 
 
 

我們知道,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)的處理。

一段典型的異步代碼類(lèi)似這樣:


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

    //邏輯代碼結(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)題在于:

它剝奪了我們使用 returnthrow 這些關(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)一處理提供了便利,我們可以寫(xiě)一個(gè)非侵入性的工具方法,來(lái)完成這樣的工作:

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

是不是很容易理解?

關(guān)于使用Promise處理異步流程,就先講到這里,有什么疑問(wèn),可以留言給我。不對(duì)之處,歡迎指正。

 


本文地址:http://www.xiuhaier.com/wxmini/doc/course/22864.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢(xún):800182392 點(diǎn)擊咨詢(xún)
QQ在線咨詢(xún)
AI智能客服 ×