微信小程序使用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 相关文章推荐
关于Aptana Studio生成自动备份文件的解决办法
Dec 23 Javascript
Dom 是什么的详细说明
Oct 25 Javascript
AngularJS基础知识笔记之过滤器
May 10 Javascript
javascript数据结构之二叉搜索树实现方法
Nov 25 Javascript
基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法详解
May 12 Javascript
js绑定事件和解绑事件
Apr 27 Javascript
完美解决mui框架off-canvas侧滑超出部分隐藏无法滚动的问题
Jan 25 Javascript
vue弹窗插件实战代码
Sep 08 Javascript
通过实例讲解JS如何防抖动
Jun 15 Javascript
vue-cli3项目升级到vue-cli4 的方法总结
Mar 19 Javascript
vue缓存之keep-alive的理解和应用详解
Nov 02 Javascript
Vue中使用wangeditor富文本编辑的问题
Feb 07 Vue.js
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
php仿ZOL分页类代码
2008/10/02 PHP
PHP基于GD库的缩略图生成代码(支持jpg,gif,png格式)
2014/06/19 PHP
php获取文件名后缀常用方法小结
2015/02/24 PHP
Symfony2安装的方法(2种方法)
2016/02/04 PHP
Laravel 5.3 学习笔记之 错误&日志
2016/08/28 PHP
PHP的CURL方法curl_setopt()函数案例介绍(抓取网页,POST数据)
2016/12/14 PHP
微信公众平台开发教程③ PHP实现微信公众号支付功能图文详解
2019/04/10 PHP
javascript 异步页面查询实现代码(asp.net)
2010/05/26 Javascript
编写可维护面向对象的JavaScript代码[翻译]
2011/02/12 Javascript
ExtJs设置GridPanel表格文本垂直居中示例
2013/07/15 Javascript
Jquery中给animation加更多的运作效果实例
2013/09/05 Javascript
js showModalDialog弹出窗口实例详解
2014/01/07 Javascript
js设置document.domain实现跨域的注意点分析
2015/05/21 Javascript
小议JavaScript中Generator和Iterator的使用
2015/07/29 Javascript
原生JS下拉加载插件分享
2016/12/26 Javascript
laydate时间日历插件使用方法详解
2018/11/14 Javascript
VueJS 组件参数名命名与组件属性转化问题
2018/12/03 Javascript
解决layui动态加载复选框无法选中的问题
2019/09/20 Javascript
vue实现文件上传读取及下载功能
2020/11/17 Javascript
JavaScript事件委托实现原理及优点进行
2020/08/29 Javascript
[01:27:43]VGJ.S vs TNC Supermajor 败者组 BO3 第三场 6.6
2018/06/07 DOTA
Python使用time模块实现指定时间触发器示例
2017/05/18 Python
Python将多个list合并为1个list的方法
2018/06/27 Python
python画柱状图--不同颜色并显示数值的方法
2018/12/13 Python
python实现DEM数据的阴影生成的方法
2019/07/23 Python
python urllib爬虫模块使用解析
2019/09/05 Python
Python使用os.listdir和os.walk获取文件路径
2020/05/21 Python
python如何导入依赖包
2020/07/13 Python
Html5剪切板功能的实现代码
2018/06/29 HTML / CSS
行政主管岗位职责
2013/11/18 职场文书
物理研修随笔感言
2014/02/14 职场文书
社会治安综合治理管理责任书
2014/04/16 职场文书
党员个人对照检查材料思想汇报
2014/09/16 职场文书
见习报告的格式
2014/10/31 职场文书
Python实战之用tkinter库做一个鼠标模拟点击器
2021/04/27 Python
教你怎么用Python生成九宫格照片
2021/05/20 Python