当前位置: 首页 > SEO学院网络营销

代码深入理解系列《五》 微信小程序中使用Promise进行异步流程处理 .

来源:未知 浏览量:116次

我们知道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, failcomplete回调函数就可以对运行成功或失败进行分别处理。

如:

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处理异步流程就先讲到这里如何提高百度权重就先讲到这里有什么疑问可以留言给我。不对之处欢迎指正。

展开全部内容

相关信信