微信小程序 引入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 相关文章推荐
Prototype1.5 rc2版指南最后一篇之Position
Jan 10 Javascript
基于jquery完美拖拽,可返回拖动轨迹
Mar 29 Javascript
用jquery实现的一个超级简单的下拉菜单
May 18 Javascript
跟我学习javascript的全局变量
Nov 16 Javascript
javaScript数组迭代方法详解
Apr 14 Javascript
jQuery学习心得总结(必看篇)
Jun 10 Javascript
如何解决jQuery EasyUI 已打开Tab重新加载问题
Dec 19 Javascript
十大热门的JavaScript框架和库
Mar 21 Javascript
详细介绍RxJS在Angular中的应用
Sep 23 Javascript
Node.js 实现简单的无侵入式缓存框架的方法
Jul 21 Javascript
微信小程序开发之转发分享功能
Oct 22 Javascript
vue中配置scss全局变量的步骤
Dec 28 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
php常见的魔术方法详解
2014/12/25 PHP
PHP curl伪造IP地址和header信息代码实例
2015/04/27 PHP
PHP开发实现微信退款功能示例
2017/11/25 PHP
PHP ADODB生成HTML表格函数rs2html功能【附错误处理函数用法】
2018/05/29 PHP
PHP mkdir创建文件夹实现方法解析
2020/11/13 PHP
splice slice区别
2006/10/09 Javascript
pjblog修改技巧汇总
2007/03/12 Javascript
Javascript模块模式分析
2008/05/16 Javascript
jquery.cookie.js 操作cookie实现记住密码功能的实现代码
2011/04/27 Javascript
jQuery中使用了document和window哪些属性和方法小结
2011/09/13 Javascript
基于javascript 闭包基础分享
2013/07/10 Javascript
javaScript中push函数用法实例分析
2015/06/08 Javascript
JavaScript的jQuery库中ready方法的学习教程
2015/08/14 Javascript
微信小程序 开发MAP(地图)实例详解
2017/06/27 Javascript
Vue学习笔记进阶篇之单元素过度
2017/07/19 Javascript
解析Vue2 dist 目录下各个文件的区别
2017/11/22 Javascript
swiper动态改变滑动内容的实现方法
2018/01/17 Javascript
layer.open的自适应及居中及子页面标题的修改方法
2019/09/05 Javascript
[33:09]完美世界DOTA2联赛循环赛 Forest vs DM BO2第二场 10.29
2020/10/29 DOTA
Python实现telnet服务器的方法
2015/07/10 Python
Python的Twisted框架中使用Deferred对象来管理回调函数
2016/05/25 Python
pycharm访问mysql数据库的方法步骤
2019/06/18 Python
html5 浏览器支持 如何让所有的浏览器都支持HTML5标签样式
2012/12/07 HTML / CSS
Html5 APP中监听返回事件处理的方法示例
2018/03/15 HTML / CSS
Speedo澳大利亚官网:全球领先游泳品牌
2018/02/04 全球购物
美国巧克力喷泉品牌:Sephra
2019/05/05 全球购物
法院实习人员自我鉴定
2013/09/26 职场文书
应用英语专业自荐信
2014/01/26 职场文书
感恩母亲节活动方案
2014/03/04 职场文书
乡村文明行动实施方案
2014/03/29 职场文书
水污染治理工程专业求职信
2014/06/14 职场文书
医院搬迁方案
2014/06/14 职场文书
体育节口号
2014/06/19 职场文书
党的群众路线教育实践活动批评与自我批评发言稿
2014/10/16 职场文书
2015年七一建党节活动方案
2015/05/05 职场文书
职场:企业印章管理制度(模板)
2019/10/18 职场文书