微信小程序 引入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 相关文章推荐
获取HTML DOM节点元素的方法的总结
Aug 21 Javascript
JQuery Tab选项卡效果代码改进版
Apr 01 Javascript
jquery利用event.which方法获取键盘输入值的代码
Oct 09 Javascript
快速掌握Node.js模块封装及使用
Mar 21 Javascript
JS作为值的函数用法示例
Jun 20 Javascript
Vue.js原理分析之observer模块详解
Feb 17 Javascript
AngularJS中使用ngModal模态框实例
May 27 Javascript
关于Vue.nextTick()的正确使用方法浅析
Aug 25 Javascript
JavaScript求一组数的最小公倍数和最大公约数常用算法详解【面向对象,回归迭代和循环】
May 07 Javascript
jQuery基于随机数解决中午吃什么去哪吃问题示例
Dec 29 jQuery
微信小程序中weui用法解析
Oct 21 Javascript
vue+element UI实现树形表格
Dec 29 Vue.js
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
ninety plus是什么?ninety plus咖啡好吗?
2021/03/04 新手入门
PHP 的异常处理、错误的抛出及回调函数等面向对象的错误处理方法
2012/12/07 PHP
PHP设置一边执行一边输出结果的代码
2013/09/30 PHP
写一段简单的PHP建立文件夹代码
2015/01/06 PHP
php防止sql注入简单分析
2015/03/18 PHP
PHP基于文件存储实现缓存的方法
2015/07/20 PHP
jQuery UI-Draggable 参数集合
2010/01/10 Javascript
JavaScript QueryString解析类代码
2010/01/17 Javascript
分别用marquee和div+js实现首尾相连循环滚动效果,仅3行代码
2011/09/21 Javascript
JavaScript中两个感叹号的作用说明
2011/12/28 Javascript
node.js中的path.extname方法使用说明
2014/12/09 Javascript
JS使用ajax方法获取指定url的head信息中指定字段值的方法
2015/03/24 Javascript
javascript弹出拖动窗口
2015/08/11 Javascript
js判断当前页面在移动设备还是在PC端中打开
2016/01/06 Javascript
js编写当天简单日历效果【实现代码】
2016/05/03 Javascript
bootstrap网页框架的使用方法
2016/05/10 Javascript
怎么限制input的text里输入的值只能是数字(正则、js)
2016/05/16 Javascript
微信小程序实现图片上传放大预览删除代码
2020/06/28 Javascript
在vue中使用v-bind:class的选项卡方法
2018/09/27 Javascript
vue-autoui自匹配webapi的UI控件的实现
2020/03/20 Javascript
vue组件库的在线主题编辑器的实现思路
2020/04/03 Javascript
vant 自定义 van-dropdown-item的用法
2020/08/05 Javascript
解决Python传递中文参数的问题
2015/08/04 Python
举例讲解Python编程中对线程锁的使用
2016/07/12 Python
浅谈Python NLP入门教程
2017/12/25 Python
python实现简单遗传算法
2018/03/19 Python
python浪漫表白源码
2019/04/05 Python
Python assert关键字原理及实例解析
2019/12/13 Python
使用Tensorflow实现可视化中间层和卷积层
2020/01/24 Python
《记承天寺夜游》教学反思
2014/02/16 职场文书
离婚协议书范文2014
2014/10/16 职场文书
2014年教师工作总结
2014/11/10 职场文书
2015年前台文员工作总结
2015/05/18 职场文书
网吧温馨提示
2015/07/17 职场文书
2016年学校禁毒宣传活动工作总结
2016/04/05 职场文书
html中两种获取标签内的值的方法
2022/06/10 HTML / CSS