微信小程序 引入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 相关文章推荐
jQuery帮助之CSS尺寸(五)outerHeight、outerWidth
Nov 14 Javascript
JQuery遍历json数组的3种方法
Nov 08 Javascript
node.js中的http.createClient方法使用说明
Dec 15 Javascript
JS折半插入排序算法实例
Dec 02 Javascript
基于JavaScript实现无缝滚动效果
Jul 21 Javascript
Extjs 中的 Treepanel 实现菜单级联选中效果及实例代码
Aug 22 Javascript
基于vue.js的分页插件详解
Nov 27 Javascript
Vue+Vux项目实践完整代码
Nov 30 Javascript
使用javascript函数编写简单银行取钱存钱流程
May 26 Javascript
详解微信小程序开发(项目从零开始)
Jun 06 Javascript
Vue 3.0 全家桶抢先体验
Apr 28 Javascript
使用refresh_token实现无感刷新页面
Apr 26 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的ASP防火墙
2006/10/09 PHP
注意:php5.4删除了session_unregister函数
2013/08/05 PHP
php使用Cookie控制访问授权的方法
2015/01/21 PHP
ubuntu下配置nginx+php+mysql详解
2015/09/10 PHP
ThinkPHP5与单元测试PHPUnit使用详解
2020/02/23 PHP
微信jssdk在iframe页面失效问题的解决措施
2016/03/03 Javascript
js实现下拉菜单效果
2017/03/01 Javascript
JavaScript自定义文本框光标
2017/03/05 Javascript
微信小程序 滚动到某个位置添加class效果实现代码
2017/04/19 Javascript
Angular2.0/4.0 使用Echarts图表的示例代码
2017/12/07 Javascript
vue 中动态绑定class 和 style的方法代码详解
2018/06/01 Javascript
JavaScript设计模式之观察者模式实例详解
2019/01/16 Javascript
javascript解析json格式的数据方法详解
2020/08/07 Javascript
vue实现移动端触屏拖拽功能
2020/08/21 Javascript
[01:19:23]2018DOTA2亚洲邀请赛 4.5 淘汰赛 Mineski vs VG 第二场
2018/04/06 DOTA
python线程锁(thread)学习示例
2013/12/04 Python
Python创建文件和追加文件内容实例
2014/10/21 Python
详解python中的装饰器
2018/07/10 Python
python将处理好的图像保存到指定目录下的方法
2019/01/10 Python
django drf框架中的user验证以及JWT拓展的介绍
2019/08/12 Python
用Pytorch训练CNN(数据集MNIST,使用GPU的方法)
2019/08/19 Python
Pytorch模型转onnx模型实例
2020/01/15 Python
简单了解pytest测试框架setup和tearDown
2020/04/14 Python
Python并发请求下限制QPS(每秒查询率)的实现代码
2020/06/05 Python
Python将字典转换为XML的方法
2020/08/01 Python
Python爬虫爬取有道实现翻译功能
2020/11/27 Python
css3圆角样式分享自定义按钮样式
2013/12/27 HTML / CSS
HTML5 Canvas如何实现纹理填充与描边(Fill And Stroke)
2013/07/15 HTML / CSS
HTML5实现简单图片上传所遇到的问题及解决办法
2016/01/20 HTML / CSS
EJB与JAVA BEAN的区别
2016/08/29 面试题
旅游与酒店管理的自我评价分享
2013/11/03 职场文书
在校大学生自我评价范文
2014/09/12 职场文书
小学优秀班主任材料
2014/12/17 职场文书
python使用XPath解析数据爬取起点小说网数据
2021/04/22 Python
Python 循环读取数据内存不足的解决方案
2021/05/25 Python
浅谈css实现背景颜色半透明的两种方法
2021/12/06 HTML / CSS