微信小程序使用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 相关文章推荐
页面右下角弹出提示框示例代码js版
Aug 02 Javascript
让网页跳转到指定位置的jquery代码非书签
Sep 06 Javascript
JavaScript数组前面插入元素的方法
Apr 06 Javascript
jQuery插件ajaxFileUpload实现异步上传文件效果
Apr 14 Javascript
js完美解决IE6不支持position:fixed的bug
Apr 24 Javascript
jQuery判断指定id的对象是否存在的方法
May 22 Javascript
jQuery实现可关闭固定于底(顶)部的工具条菜单效果
Nov 06 Javascript
JavaScript引用类型Date常见用法实例分析
Aug 08 Javascript
基于vue中对鼠标划过事件的处理方式详解
Aug 22 Javascript
Vue移动端右滑屏幕返回上一页附源码下载
Jun 26 Javascript
Vue.js数字输入框组件使用方法详解
Oct 19 Javascript
vue中使用router全局守卫实现页面拦截的示例
Oct 23 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
使用无限生命期Session的方法
2006/10/09 PHP
php中的ini配置原理详解
2014/10/14 PHP
php按单词截取字符串的方法
2015/04/07 PHP
php文件压缩之PHPZip类用法实例
2015/06/18 PHP
PHP实现查询两个数组中不同元素的方法
2016/02/23 PHP
Laravel实现定时任务的示例代码
2017/08/10 PHP
HTML IMG标签 onload 内存溢出导致浏览器CPU占用过高
2021/03/09 Javascript
javaScript 删除字符串空格多种方法小结
2012/10/24 Javascript
Javascript图像处理—为矩阵添加常用方法
2012/12/27 Javascript
jQuery函数的等价原生函数代码示例
2013/05/27 Javascript
js调用图片隐藏&显示实现代码
2013/09/13 Javascript
jQuery+CSS3实现3D立方体旋转效果
2015/11/10 Javascript
Node.js下自定义错误类型详解
2016/10/17 Javascript
JavaScript实现打地鼠小游戏
2020/04/23 Javascript
JavaScript解析任意形式的json树型结构展示
2017/07/23 Javascript
Vue前端开发规范整理(推荐)
2018/04/23 Javascript
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
2019/08/08 jQuery
解决layui-table单元格设置为百分比在ie8下不能自适应的问题
2019/09/28 Javascript
webpack中的模式(mode)使用详解
2020/02/20 Javascript
jQuery三组基本动画与自定义动画操作实例总结
2020/05/09 jQuery
[48:31]DOTA2-DPC中国联赛 正赛 Dynasty vs XG BO3 第一场 2月2日
2021/03/11 DOTA
Python实现Windows和Linux之间互相传输文件(文件夹)的方法
2017/05/08 Python
python 递归调用返回None的问题及解决方法
2020/03/16 Python
Pytorch 图像变换函数集合小结
2021/02/01 Python
手把手教你配置JupyterLab 环境的实现
2021/02/02 Python
美国婚戒购物网站:Anjays Designs
2017/06/28 全球购物
Boston Proper官网:美国女装品牌
2017/10/30 全球购物
豪华床上用品 :Jennifer Adams
2019/09/15 全球购物
澳大利亚珠宝商:Shiels
2019/10/06 全球购物
服装电子商务创业计划书
2014/01/30 职场文书
幼儿园教师培训方案
2014/02/04 职场文书
工程专业求职自荐书范文
2014/02/18 职场文书
校长竞聘演讲稿
2014/05/16 职场文书
争先创优活动总结
2014/08/27 职场文书
学习党章的体会
2014/11/07 职场文书
opencv深入浅出了解机器学习和深度学习
2022/03/17 Python