微信小程序 引入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 相关文章推荐
js读写(删除)Cookie实例详解
Apr 17 Javascript
jQuery动态修改超链接地址的方法
Feb 13 Javascript
JS中的Replace()传入函数时的用法详解
Sep 11 Javascript
Vuejs 页面的区域化与组件封装的实现
Sep 11 Javascript
vue中配置mint-ui报css错误问题的解决方法
Oct 11 Javascript
Vue使用json-server进行后端数据模拟功能
Apr 17 Javascript
Puppeteer环境搭建的详细步骤
Sep 21 Javascript
js实现固定区域内的不重叠随机圆
Oct 24 Javascript
基于javascript实现日历功能原理及代码实例
May 07 Javascript
vue中解决拖拽改变存在iframe的div大小时卡顿问题
Jul 22 Javascript
ant design的table组件实现全选功能以及自定义分页
Nov 17 Javascript
一起来看看Vue的核心原理剖析
Mar 24 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
叶罗丽:为什么大家对颜冰这对CP非常关心,却对金茉两人十分冷漠
2020/03/17 国漫
使用 eAccelerator加速PHP代码的方法
2007/09/30 PHP
PHP5函数小全(分享)
2013/06/06 PHP
Zend Framework入门教程之Zend_Registry组件用法详解
2016/12/09 PHP
windows下的WAMP环境搭建图文教程(推荐)
2017/07/27 PHP
ExtJS 2.2.1的grid控件在ie6中的显示问题
2009/05/04 Javascript
js 屏蔽鼠标右键脚本附破解方法
2009/12/03 Javascript
借助script进行Http跨域请求:JSONP实现原理及代码
2013/03/19 Javascript
JS操作CSS随机改变网页背景实现思路
2014/03/10 Javascript
json属性名为什么要双引号(个人猜测)
2014/07/31 Javascript
node.js中的fs.writeFile方法使用说明
2014/12/14 Javascript
javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法
2015/05/13 Javascript
jquery判断页面网址是否有效的两种方法
2016/12/11 Javascript
vue项目关闭eslint校验
2018/03/21 Javascript
mpvue跳转页面及注意事项
2018/08/03 Javascript
Vue.js组件间通信方式总结【推荐】
2018/11/23 Javascript
说说如何在Vue.js中实现数字输入组件的方法
2019/01/08 Javascript
JS html事件冒泡和事件捕获操作示例
2019/05/01 Javascript
JavaScript 函数用法详解【函数定义、参数、绑定、作用域、闭包等】
2020/05/12 Javascript
[04:13]2018国际邀请赛典藏宝瓶Ⅱ饰品一览
2018/07/21 DOTA
[03:12]完美世界DOTA2联赛PWL DAY9集锦
2020/11/10 DOTA
Python中使用Inotify监控文件实例
2015/02/14 Python
python中查看变量内存地址的方法
2015/05/05 Python
Python实现将Excel转换为json的方法示例
2017/08/05 Python
对python .txt文件读取及数据处理方法总结
2018/04/23 Python
pandas的相关系数与协方差实例
2019/12/27 Python
Python如何获取文件路径/目录
2020/09/22 Python
地图可视化神器kepler.gl python接口的使用方法
2020/12/22 Python
大学四年个人自我小结
2014/03/05 职场文书
以幸福为主题的活动方案
2014/08/22 职场文书
县长群众路线对照检查材料思想汇报
2014/10/02 职场文书
2015年社区综治宣传月活动总结
2015/03/25 职场文书
房屋质量投诉书
2015/07/02 职场文书
TypeScript中条件类型精读与实践记录
2021/10/05 Javascript
python实现局部图像放大
2021/11/17 Python
Python自动操作神器PyAutoGUI的使用教程
2022/06/16 Python