网站首页 > 欧联杯> 文章内容

微信小法度榜样中应用 Promise 进行异步流程处理

※发布时间:2017-2-23 10:13:56   ※发布作者:habao   ※出自何处: 
  我们知道,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处理异步流程,就先讲到这里,有什么疑问,可以留言给我。纰谬之处,迎接斧正。
  
关键词:
相关阅读
  • 没有资料