微信小程序 引入es6 promise


Posted in Javascript onApril 12, 2017

微信小程序开发两个月了.大家的项目都在不断迭代.已经不是小程序.这时候就会遇到多层回调嵌套的问题.有些目不忍视了.迫不得已引入es6-promise.在微信小程序内测的时候promise不需要手动引入,后来被微信移除了.看看效果.

 微信小程序 引入es6 promise

promise详细的介绍我就不说了.有很多大神写过.

看看目录,引入es6-promise就可以用了.

 微信小程序 引入es6 promise

目录

1.网络请求 wxRequest.js

这里只写了get和post.

我经常会在网络请求的时候用微信原生showToast(),所以最后加了finally,方便hideToast()

var Promise = require('../plugins/es6-promise.js')

function wxPromisify(fn) {
 return function (obj = {}) {
 return new Promise((resolve, reject) => {
 obj.success = function (res) {
 //成功
 resolve(res)
 }
 obj.fail = function (res) {
 //失败
 reject(res)
 }
 fn(obj)
 })
 }
}
//无论promise对象最后状态如何都会执行
Promise.prototype.finally = function (callback) {
 let P = this.constructor;
 return this.then(
 value => P.resolve(callback()).then(() => value),
 reason => P.resolve(callback()).then(() => { throw reason })
 );
};
/**
 * 微信请求get方法
 * url
 * data 以对象的格式传入
 */
function getRequest(url, data) {
 var getRequest = wxPromisify(wx.request)
 return getRequest({
 url: url,
 method: 'GET',
 data: data,
 header: {
 'Content-Type': 'application/json'
 }
 })
}

/**
 * 微信请求post方法封装
 * url
 * data 以对象的格式传入
 */
function postRequest(url, data) {
 var postRequest = wxPromisify(wx.request)
 return postRequest({
 url: url,
 method: 'POST',
 data: data,
 header: {
 "content-type": "application/x-www-form-urlencoded"
 },
 })
}

module.exports = {
 postRequest: postRequest,
 getRequest: getRequest
}

2.微信其他API wxApi.js

var Promise = require('../plugins/es6-promise.js')

function wxPromisify(fn) {
 return function (obj = {}) {
 return new Promise((resolve, reject) => {
 obj.success = function (res) {
 //成功
 resolve(res)
 }
 obj.fail = function (res) {
 //失败
 reject(res)
 }
 fn(obj)
 })
 }
}
//无论promise对象最后状态如何都会执行
Promise.prototype.finally = function (callback) {
 let P = this.constructor;
 return this.then(
 value => P.resolve(callback()).then(() => value),
 reason => P.resolve(callback()).then(() => { throw reason })
 );
};
/**
 * 微信用户登录,获取code
 */
function wxLogin() {
 return wxPromisify(wx.login)
}
/**
 * 获取微信用户信息
 * 注意:须在登录之后调用
 */
function wxGetUserInfo() {
 return wxPromisify(wx.getUserInfo)
}
/**
 * 获取系统信息
 */
function wxGetSystemInfo() {
 return wxPromisify(wx.getSystemInfo)
}
module.exports = {
 wxPromisify: wxPromisify,
 wxLogin: wxLogin,
 wxGetUserInfo: wxGetUserInfo,
 wxGetSystemInfo: wxGetSystemInfo
}

3.用法

promise应用场景很多,下面是promise最基本的用法,在then()中returnpromise对象.

这样有效解决了回调嵌套的问题.让代码看起来更优雅.可读性更高.

var util = require('../../utils/util')
var wxApi = require('../../utils/wxApi')
var wxRequest = require('../../utils/wxRequest')
import config from '../../utils/config'
//获取应用实例
var app = getApp()
Page({
 data: {
 userInfo: {}
 },
 onLoad: function () {
 var that = this;
 wx.showToast({
 title: '加载中',
 icon: 'loading',
 duration: 10000
 })
 //1.获取code
 var wxLogin = wxApi.wxLogin()
 wxLogin().then(res => {
 console.log('1.成功了')
 console.log(res.code)
 var url = config.getOpenidUrl;
 var params = {
 appid: "wxed7******2d465",
 secret: "e9c5e4c******09ecc5ebd811",
 js_code: res.code,
 grant_type: "authorization_code"
 }
 //2.获取openid
 return wxRequest.getRequest(url, params)
 }).
 then(res => {
 console.log('2.成功了')
 console.log(res)
 var url = app.globalData.ip + config.searchDgUrl
 var data = util.json2Form({ phoneNumber: '15971908021' })
 //3.获取绑定手机号码
 return wxRequest.postRequest(url, data)
 }).
 then(res => {
 console.log('3.成功了')
 console.log(res)
 //4.获取系统信息
 var wxGetSystemInfo = wxApi.wxGetSystemInfo()
 return wxGetSystemInfo()
 }).
 then(res => {
 console.log('4.成功了')
 console.log(res)
 //5.获取用户信息
 var wxGetUserInfo = wxApi.wxGetUserInfo()
 return wxGetUserInfo()
 }).
 then(res => {
 console.log('5.成功了')
 console.log(res.userInfo)
 that.setData({
  userInfo: res.userInfo
 })
 })
 .finally(function (res) {
 console.log('finally~')
 wx.hideToast()
 })
 }
})

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
删除select中所有option选项jquery代码
Aug 12 Javascript
开发中可能会用到的jQuery小技巧
Mar 07 Javascript
使用javascript实现Iframe自适应高度
Dec 24 Javascript
深入分析原生JavaScript事件
Dec 29 Javascript
Bootstrap表单布局
Jul 19 Javascript
基于JS如何实现给字符加千分符(65,541,694,158)
Aug 03 Javascript
jQuery实现页面顶部下拉广告
Dec 30 Javascript
node.js中cluster的使用教程
Jun 09 Javascript
JavaScript实现二叉树定义、遍历及查找的方法详解
Dec 20 Javascript
使用Vue写一个datepicker的示例
Jan 27 Javascript
jquery分页优化操作实例分析
Aug 23 jQuery
JS字符串补全方法padStart()和padEnd()
May 27 Javascript
JavaScript队列的应用实例详解【经典数据结构】
Apr 12 #Javascript
Vue 实用分页paging实例代码
Apr 12 #Javascript
jquery 校验中国身份证号码实例详解
Apr 11 #jQuery
基于JavaScript定位当前的地理位置
Apr 11 #Javascript
js模拟支付宝密码输入框
Apr 11 #Javascript
基于jQuery实现瀑布流页面
Apr 11 #jQuery
详解angular用$sce服务来过滤HTML标签
Apr 11 #Javascript
You might like
php中文字符截取防乱码
2008/03/28 PHP
php 如何获取数组第一个值
2013/08/06 PHP
ThinkPHP实现转换数据库查询结果数据到对应类型的方法
2017/11/16 PHP
jquery 弹出登录窗口实现代码
2009/12/24 Javascript
javascript 循环读取JSON数据的代码
2010/07/17 Javascript
js的hasownproperty使用示例
2014/03/02 Javascript
JQuery遍历DOM节点的方法
2015/06/11 Javascript
Javascript的表单与验证-非空验证
2016/03/18 Javascript
Bootstrap 组件之按钮(二)
2016/05/11 Javascript
逻辑表达式中与或非的用法详解
2016/06/06 Javascript
JS正则表达式验证中文字符
2017/05/08 Javascript
浅谈微信小程序之官方UI框架we-ui使用教程
2018/08/20 Javascript
JSON.stringify()方法讲解
2019/01/31 Javascript
JavaScript交换两个变量方法实例
2019/11/25 Javascript
vue 清空input标签 中file的值操作
2020/07/21 Javascript
[02:11]2016国际邀请赛中国区预选赛全程回顾
2016/07/01 DOTA
浅谈python socket函数中,send与sendall的区别与使用方法
2017/05/09 Python
用生成器来改写直接返回列表的函数方法
2017/05/25 Python
Python中音频处理库pydub的使用教程
2017/06/07 Python
Python实现PS滤镜功能之波浪特效示例
2018/01/26 Python
通过pykafka接收Kafka消息队列的方法
2018/12/27 Python
python读取文件名并改名字的实例
2019/01/07 Python
提升python处理速度原理及方法实例
2019/12/25 Python
css3截图_动力节点Java学院整理
2017/07/11 HTML / CSS
英国知名奢侈品包包品牌:Milli Millu
2016/12/22 全球购物
如何理解transaction事务的概念
2015/05/27 面试题
应届毕业生的个人自我鉴定
2013/10/24 职场文书
学生自我鉴定模板
2013/12/30 职场文书
白酒市场开发计划书
2014/01/09 职场文书
计算机相关的自我评价
2014/01/15 职场文书
初中英语演讲稿
2014/04/29 职场文书
八荣八耻的活动方案
2014/08/16 职场文书
2014年精神文明建设工作总结
2014/11/19 职场文书
2015年学生管理工作总结
2015/05/26 职场文书
新娘婚礼答谢词
2015/09/29 职场文书
2016年中秋祝酒词
2015/11/26 职场文书