微信小程序使用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 相关文章推荐
JsEasy简介 JsEasy是什么?与下载
Mar 07 Javascript
javascript优先加载笔记代码
Sep 30 Javascript
Cookie 小记
Apr 01 Javascript
jQuery实现的一个tab切换效果内部还嵌有切换
Aug 10 Javascript
jQuery使用toggleClass方法动态添加删除Class样式的方法
Mar 26 Javascript
在JavaScript的正则表达式中使用exec()方法
Jun 16 Javascript
原生js图片轮播效果实现代码
Oct 19 Javascript
超全面的javascript中变量命名规则
Feb 09 Javascript
一步步教会你微信小程序的登录鉴权
Apr 09 Javascript
jQuery实现的电子时钟效果完整示例
Apr 28 jQuery
vue自动化路由的实现代码
Sep 30 Javascript
云服务器部署Node.js项目的方法步骤(小白系列)
Mar 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
php gd2 上传图片/文字水印/图片水印/等比例缩略图/实现代码
2010/05/15 PHP
微信公众号开发之通过接口删除菜单
2017/02/20 PHP
thinkphp3.2同时连接两个数据库的简单方法
2019/08/13 PHP
基于laravel-admin 后台 列表标签背景的使用方法
2019/10/03 PHP
combox改进版 页面原型参考dojo的,比网上jQuery的那些combox功能强,代码更小
2010/04/15 Javascript
jQuery的实现原理的模拟代码 -1 核心部分
2010/08/01 Javascript
基于jQuery实现下拉框
2014/11/24 Javascript
jQuery mobile类库使用时加载导航历史的方法简介
2015/12/04 Javascript
详解vuejs之v-for列表渲染
2017/06/22 Javascript
微信小程序学习之数据处理详解
2017/07/05 Javascript
使用html+js+css 实现页面轮播图效果(实例讲解)
2017/09/21 Javascript
Angular2监听页面大小变化的解决方法
2017/10/09 Javascript
nodejs超出最大的调用栈错误问题
2017/12/27 NodeJs
解决VUEX兼容IE上的报错问题
2018/03/01 Javascript
使用vue-cli导入Element UI组件的方法
2018/05/16 Javascript
微信小程序文章详情页面实现代码
2018/09/10 Javascript
使用webpack将ES6转化ES5的实现方法
2019/10/13 Javascript
jquery validate 实现动态增加/删除验证规则操作示例
2019/10/28 jQuery
vue下axios拦截器token刷新机制的实例代码
2020/01/17 Javascript
Python实现的爬取网易动态评论操作示例
2018/06/06 Python
python+splinter实现12306网站刷票并自动购票流程
2018/09/25 Python
用python标准库difflib比较两份文件的异同详解
2018/11/16 Python
python 切换root 执行命令的方法
2019/01/19 Python
pyqt5 实现在别的窗口弹出进度条
2019/06/18 Python
Python Django view 两种return的实现方式
2020/03/16 Python
Mountain Hardwear官网:攀岩服装和户外装备
2019/09/26 全球购物
戴森比利时官方网站:Dyson BE
2020/10/03 全球购物
函授教育个人学习的自我评价
2013/12/31 职场文书
环保建议书
2014/03/12 职场文书
团代会宣传工作方案
2014/05/08 职场文书
教师求职自荐书
2014/06/14 职场文书
物理教育专业求职信
2014/06/25 职场文书
应届生自荐信
2014/06/30 职场文书
合同意向书范本
2014/07/30 职场文书
2016中秋节广告语
2016/01/28 职场文书
win10电脑关机快捷键是哪个 win10快速关机的几种方法
2022/08/14 数码科技