微信小程序使用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字典探测用户名工具
Oct 05 Javascript
数组Array进行原型prototype扩展后带来的for in遍历问题
Feb 07 Javascript
jQuery中获取Radio元素值的方法
Jul 02 Javascript
javascript中String对象的slice()方法分析
Dec 20 Javascript
JavaScript实现定时隐藏与显示图片的方法
Aug 06 Javascript
JS控制静态页面传递参数并获取参数应用
Aug 10 Javascript
jQuery实现下拉菜单的实例代码
Jun 19 jQuery
Angular 组件之间的交互的示例代码
Mar 24 Javascript
js正则表达式校验指定字符串的方法
Jul 23 Javascript
Flutter部件内部状态管理小结之实现Vue的v-model功能
Jun 11 Javascript
Vue+Typescript中在Vue上挂载axios使用时报错问题
Aug 07 Javascript
javascript实现支付宝滑块验证码效果
Jul 24 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学习笔记之二 php入门知识
2011/01/12 PHP
分享最受欢迎的5款PHP框架
2014/11/27 PHP
php实现在站点里面添加邮件发送的功能
2020/04/28 PHP
Yii 2.0自带的验证码使用经验分享
2017/06/19 PHP
详解php几行代码实现CSV格式文件输出
2017/07/01 PHP
Laravel+Intervention实现上传图片功能示例
2019/07/09 PHP
js+css实现导航效果实例
2015/02/10 Javascript
jQuery操作表单常用控件方法小结
2015/03/23 Javascript
js实现多图左右切换功能
2016/08/04 Javascript
文件上传插件SWFUpload的使用指南
2016/11/29 Javascript
JavaScript 输出显示内容(document.write、alert、innerHTML、console.log)
2016/12/14 Javascript
基于Javascript倒计时效果
2016/12/22 Javascript
微信小程序商城项目之侧栏分类效果(1)
2017/04/17 Javascript
Vue精简版风格指南(推荐)
2018/01/30 Javascript
vue实现动态添加数据滚动条自动滚动到底部的示例代码
2018/07/06 Javascript
最适应的vue.js的form提交涉及多种插件【推荐】
2018/08/27 Javascript
微信网页登录逻辑与实现方法
2019/04/29 Javascript
layui 中select下拉change事件失效的解决方法
2019/09/20 Javascript
小程序实现图片预览裁剪插件
2019/11/22 Javascript
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
2020/05/19 jQuery
python高并发异步服务器核心库forkcore使用方法
2013/11/26 Python
使用python写的opencv实时监测和解析二维码和条形码
2019/08/14 Python
Python创建一个元素都为0的列表实例
2019/11/28 Python
Python Map 函数的使用
2020/08/28 Python
详解如何在css中引入自定义字体(font-face)
2018/05/17 HTML / CSS
Jabra捷波朗美国官网:用于办公、车载和运动的无线蓝牙耳麦
2017/02/01 全球购物
Marlies Dekkers内衣法国官方网上商店:国际知名的荷兰内衣品牌
2019/03/18 全球购物
读书活动实施方案
2014/03/10 职场文书
开工仪式主持词
2014/03/20 职场文书
小学生节约用水倡议书
2014/05/15 职场文书
优秀团员事迹材料1500字
2014/08/31 职场文书
医院党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
铁路安全反思材料
2014/12/24 职场文书
如何书写民事调解协议书?
2019/06/25 职场文书
Golang 遍历二叉树
2022/04/19 Golang
Win11使用CAD卡顿或者致命错误怎么办?Win11无法正常使用CAD的解决方法
2022/07/23 数码科技