微信小程序中使用Promise进行异步流程处理

【更新说明】 由于微信开发者工具和微信真机环境的不断升级,小程序中要使用Promise的话,已经不需要像文中描述的再引入第三方库如bluebird或es6-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

/**
 * 将小程序的API封装成支持Promise的API
 * @params fn {Function} 小程序原始API,如wx.login
 */
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处理异步流程,就先讲到这里,有什么疑问,可以留言给我。不对之处,欢迎指正。

谢谢大家阅读本文。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Python爱好者

Java基础笔记11

14340
来自专栏地方网络工作室的专栏

Python3 初学实践案例(3)argparse 命令行参数库的使用

Python3 初学实践案例(3)argparse 命令行参数库的使用 在前面一篇博文中 http://blog.csdn.net/fungleo/articl...

49290
来自专栏CDA数据分析师

深入解读Python解析XML的几种方式

本文将介绍深入解读利用Python语言解析XML文件的几种方式,并以笔者推荐使用的ElementTree模块为例,演示具体使用方法和场景。文中所使用的Pytho...

30270
来自专栏Jacklin攻城狮

iOS,面试必看,最全梳理

目前形势,参加到iOS队伍的人是越来越多,甚至已经到供过于求了。今年,找过工作人可能会更深刻地体会到今年的就业形势不容乐观,加之,培训机构一火车地向用人单位输送...

25220
来自专栏北京马哥教育

经典!Python运维中常用的几十个Python运维脚本

本文由马哥教育Python自动化实战班4期学员推荐,转载自互联网,作者为mark,内容略经小编改编和加工,观点跟作者无关,最后感谢作者的辛苦贡献与付出。 fil...

1K40
来自专栏Java面试通关手册

Java多线程学习(四)等待/通知(wait/notify)机制

我自己总结的Java学习的系统知识点以及面试问题,目前已经开源,会一直完善下去,欢迎建议和指导欢迎Star: https://github.com/Snailc...

24330
来自专栏Coco的专栏

【基础进阶】URL详解与URL编码

20590
来自专栏地方网络工作室的专栏

Python3 初学实践案例(2)将源目录中的图片用MD5命名并可以设定目标目录

Python3 初学实践案例(2)将源目录中的图片用MD5重命名后移动或复制到目标文件夹 尝试了一下用 python 实现了一个生成密码的程序。感觉还是比较好上...

271100
来自专栏王硕

原 制作mobi格式的PostgreSQL文档

35970
来自专栏玄魂工作室

PHP代码审计Day2 - filter_var函数缺陷

--------------------------------------------------------------------------------...

13920

扫码关注云+社区

领取腾讯云代金券