微信小程序使用Promise简化回调


Posted in Javascript onFebruary 06, 2018

Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现,ES6 将其写进了语言标准,统一了用法,原生提供了Promise对象。

所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。从语法上说,Promise 是一个对象,从它可以获取异步操作的消息。Promise 提供统一的 API,各种异步操作都可以用同样的方法进行处理。

了解什么是 Promise 对象

在项目中,会出现各种异步操作,如果一个异步操作的回调里还有异步操作,就会出现回调金字塔。

比如下面这种

// 模拟获取code,然后将code传给后台,成功后获取userinfo,再将userinfo传给后台
// 登录
wx.login({
  success: res => {
    let code = res.code
    // 请求
    imitationPost({
      url: '/test/loginWithCode',
      data: {
        code
      },
      success: data => {
        // 获取userInfo
        wx.getUserInfo({
          success: res => {
            let userInfo = res.userInfo
            // 请求
            imitationPost({
              url: '/test/saveUserInfo',
              data: {
                userInfo
              },
              success: data => {
                console.log(data)
              },
              fail: res => {
                console.log(res)
              }
            })
          },
          fail: res => {
            console.log(res)
          }
        })
      },
      fail: res => {
        console.log(res)
      }
    })
  },
  fail: res => {
    console.log(res)
  }
})

下面分析如何用Promise来进行简化代码

因为微信小程序异步api都是success和fail的形式,所有有人封装了这样一个方法:

promisify.js

module.exports = (api) => {
  return (options, ...params) => {
    return new Promise((resolve, reject) => {
      api(Object.assign({}, options, { success: resolve, fail: reject }), ...params);
    });
  }
}

先看最简单的:

// 获取系统信息
wx.getSystemInfo({
  success: res => {
    // success
    console.log(res)
  },
  fail: res => {

  }
})

使用上面的promisify.js简化后:

const promisify = require('./promisify')
const getSystemInfo = promisify(wx.getSystemInfo)

getSystemInfo().then(res=>{
  // success
  console.log(res)
}).catch(res=>{

})

微信小程序使用Promise简化回调

getSystemInfo

可以看到简化后的回调里少了一个缩进,并且回调函数从9行减少到了6行。

回调金字塔的简化效果

那么再来看看最开始的那个回调金字塔

const promisify = require('./promisify')
const login = promisify(wx.login)
const getSystemInfo = promisify(wx.getSystemInfo)

// 登录
login().then(res => {
  let code = res.code
  // 请求
  pImitationPost({
    url: '/test/loginWithCode',
    data: {
      code
    },
  }).then(data => {
    // 获取userInfo
    getUserInfo().then(res => {
      let userInfo = res.userInfo
      // 请求
      pImitationPost({
        url: '/test/saveUserInfo',
        data: {
          userInfo
        },
      }).then(data => {
        console.log(data)
      }).catch(res => {
        console.log(res)
      })
    }).catch(res => {
      console.log(res)
    })
  }).catch(res => {
    console.log(res)
  })
}).catch(res => {
  console.log(res)
})

微信小程序使用Promise简化回调

简化回调

可以看到简化效果非常明显。

同样适用于网页或者nodejs等中。

参考

Promise 对象

源代码

tomfriwel/MyWechatAppDemo 的promisePage页面

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript应用:Iframe自适应其加载的内容高度
Apr 10 Javascript
javascript setTimeout()传递函数参数(包括传递对象参数)
Apr 07 Javascript
jquery实现手风琴效果实例代码
Nov 15 Javascript
Json序列化和反序列化方法解析
Dec 19 Javascript
关于JavaScript作用域你想知道的一切
Feb 04 Javascript
jQuery图片轮播(二)利用构造函数和原型创建对象以实现继承
Dec 06 Javascript
js实现可输入可选择的select下拉框
Dec 21 Javascript
jQuery复合事件结合toggle()方法的用法示例
Jun 10 jQuery
使用D3.js制作图表详解
Aug 13 Javascript
echarts设置图例颜色和地图底色的方法实例
Aug 01 Javascript
详解webpack-dev-server使用方法
Sep 14 Javascript
详解webpack打包时排除其中一个css、js文件或单独打包一个css、js文件(两种方法)
Oct 26 Javascript
JS设计模式之命令模式概念与用法分析
Feb 06 #Javascript
使用selenium抓取淘宝的商品信息实例
Feb 06 #Javascript
vue一个页面实现音乐播放器的示例
Feb 06 #Javascript
使用百度地图实现地图网格的示例
Feb 06 #Javascript
js中的闭包学习心得
Feb 06 #Javascript
JS基于设计模式中的单例模式(Singleton)实现封装对数据增删改查功能
Feb 06 #Javascript
Vue仿今日头条实例详解
Feb 06 #Javascript
You might like
农民C键的运用技巧
2020/03/04 星际争霸
PHP 的ArrayAccess接口 像数组一样来访问你的PHP对象
2010/10/12 PHP
php输入流php://input使用浅析
2014/09/02 PHP
使用Composer安装Yii框架的方法
2016/03/15 PHP
让ThinkPHP的模板引擎达到最佳效率的方法详解
2017/03/14 PHP
TP5框架实现的数据库备份功能示例
2020/04/05 PHP
妙用Jquery的val()方法
2012/06/27 Javascript
jquery如何通过name名称获取当前name的value值
2013/12/20 Javascript
写出高效jquery代码的19条指南
2014/03/19 Javascript
前端学习笔记style,currentStyle,getComputedStyle的用法与区别
2016/05/28 Javascript
总结在前端排序中遇到的问题
2016/07/19 Javascript
妙用Bootstrap的 popover插件实现校验表单提示功能
2016/08/29 Javascript
详解Angular2中Input和Output用法及示例
2017/05/21 Javascript
JS动态添加的div点击跳转到另一页面实现代码
2017/09/30 Javascript
Material(包括Material Icon)在Angular2中的使用详解
2018/02/11 Javascript
vue-cli脚手架引入图片的几种方法总结
2018/03/13 Javascript
vue1.0和vue2.0的watch监听事件写法详解
2018/09/11 Javascript
vue双向绑定及观察者模式详解
2019/03/19 Javascript
JavaScript 实现下雪特效的示例代码
2020/09/09 Javascript
Vue路由权限控制解析
2020/11/09 Javascript
[01:02:30]Mineski vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第三场 8.22
2019/09/05 DOTA
用Python制作简单的朴素基数估计器的教程
2015/04/01 Python
python MySQLdb Windows下安装教程及问题解决方法
2015/05/09 Python
基于Python os模块常用命令介绍
2017/11/03 Python
sublime python3 输入换行不结束的方法
2018/04/19 Python
python3 使用openpyxl将mysql数据写入xlsx的操作
2020/05/15 Python
CSS实现聊天气泡效果
2020/04/26 HTML / CSS
html标签之Object和EMBED标签详解
2013/07/04 HTML / CSS
圣诞树世界:Christmas Tree World
2019/12/10 全球购物
Athleta官网:购买女士瑜伽服、技术运动服和休闲运动服
2020/11/12 全球购物
Linux Interview Questions For software testers
2012/06/02 面试题
高中生校园生活自我评价
2013/09/19 职场文书
春节联欢会主持词
2014/03/24 职场文书
js实现自动锁屏功能
2021/06/02 Javascript
Tomcat执行startup.bat出现闪退的原因及解决办法
2022/04/20 Servers
台积电称即便经济低迷也没有降价的计划
2022/04/21 数码科技