用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 查看内容

在微信小程序的JS脚本中使用Promise来优化函数处理

Rolan 2017-8-29 00:17

在我们传统的Javascript开发函数编写中,我们习惯了回调函数的处理,不过随着回调函数的增多,以及异步处理的复杂性等原因,代码越来越难读,因此诞生了使用Promise来优化JS函数处理的需求,引入Promise确实能够很好 ...

在我们传统的Javascript开发函数编写中,我们习惯了回调函数的处理,不过随着回调函数的增多,以及异步处理的复杂性等原因,代码越来越难读,因此诞生了使用Promise来优化JS函数处理的需求,引入Promise确实能够很好的解决异步回调函数的可读性等问题,同时也使得我们调用的时候代码简洁一些,本文介绍如何在小程序的JS代码里面使用Promise来封装一些函数的做法。

1、小程序传统的回调处理

例如我们生成一个小程序,里面的app.js里面就自动带有一个getUserInfo的函数,这个是使用传统模式的回调函数。

  1. //app.js
  2. App({
  3. onLaunch: function () {
  4. //调用API从本地缓存中获取数据
  5. var logs = wx.getStorageSync('logs') || []
  6. logs.unshift(Date.now())
  7. wx.setStorageSync('logs', logs)
  8. },
  9. getUserInfo:function(cb){
  10. var that = this
  11. if(this.globalData.userInfo){
  12. typeof cb == "function" && cb(this.globalData.userInfo)
  13. }else{
  14. //调用登录接口
  15. wx.login({
  16. success: function () {
  17. wx.getUserInfo({
  18. success: function (res) {
  19. that.globalData.userInfo = res.userInfo
  20. typeof cb == "function" && cb(that.globalData.userInfo)
  21. }
  22. })
  23. }
  24. })
  25. }
  26. },
  27. globalData:{
  28. userInfo: null,
  29. openid: null
  30. }
  31. })

这种是通过 传入一个cb的回调函数进行处理,使用的时候为了安全性,还需要进一步判断其类型是否为函数:typeof cb == "function",这种处理还是相对比较易懂。

但是,如果我们一段代码中,异步操作太多,又要保证这些异步操作是有顺序的执行,那我们的代码就看起来非常糟糕,就像这样的极端情况:

  1. asyncFunc1(function(){
  2. //...
  3. asyncFunc2(function(){
  4. //...
  5. asyncFunc3(function(){
  6. //...
  7. asyncFunc4(function(){
  8. //...
  9. asyncFunc5(function(){
  10. //...
  11. });
  12. });
  13. });
  14. });
  15. });

如果我们改用Promise来处理,那么进行一层简单的包装即可。

  1. function asyncFunc1(){
  2. return new Promise(function (resolve, reject) {
  3. //...
  4. })
  5. }

2、Promise的使用介绍

Promise的使用相对比较简单,我们入门可以参考下相关介绍:阮一峰 promise入门,如果我们在JS函数里面引入它的话,那么需要包含对应的javascript组件

我们可以在Github上下载对应的组件JS,引入小程序项目即可:es6-promise

我们为了方便,在项目中创建一个辅助类utils.js,然后在其中引入Promise的脚本,如下所示。

const Promise = require('./Promise') 
然后在APP.js里面,我们修改原来的getUserInfo函数如下

  1. //app.js
  2. const utils = require('./utils/util.js')
  3. App({
  4. onLaunch: function() {
  5. //调用API从本地缓存中获取数据
  6. var logs = wx.getStorageSync('logs') || []
  7. logs.unshift(Date.now())
  8. wx.setStorageSync('logs', logs)
  9. },
  10. getUserInfo() {
  11. return new utils.Promise((resolve, reject) => {
  12. if (this.globalData.userInfo) {
  13. resolve(this.globalData.userInfo)
  14. }
  15. return utils.getUserInfo().then(res => {
  16. resolve(this.globalData.userInfo = res.userInfo)
  17. })
  18. })
  19. },
  20. //获取系统信息
  21. getSystemInfo() {
  22. 邀请
    鲜花
    鲜花
    鸡蛋
    鸡蛋
    分享至 : QQ空间
    收藏
    原作者: 伍华聪 来自: 博客园

    相关阅读