微信小程序 引入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 相关文章推荐
使javascript也能包含文件
Oct 26 Javascript
jQuery检测鼠标左键和右键点击的方法
Mar 17 Javascript
JavaScript获取当前网页标题(title)的方法
Apr 03 Javascript
javascript实现下雪效果【实例代码】
May 03 Javascript
javascript简单判断输入内容是否合法的方法
May 11 Javascript
jQuery 3 中的新增功能汇总介绍
Jun 12 Javascript
基于js中document.cookie全面解析
Sep 14 Javascript
详解如何给React-Router添加路由页面切换时的过渡动画
Apr 25 Javascript
layui button 按钮弹出提示窗口,确定才进行的方法
Sep 06 Javascript
解决vue项目F5刷新mounted里的函数不执行问题
Nov 05 Javascript
react使用antd的上传组件实现文件表单一起提交功能(完整代码)
Jun 29 Javascript
关于JavaScript轮播图的实现
Nov 20 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
5种PHP创建数组的实例代码分享
2014/01/17 PHP
PHP实现的mysql操作类【MySQL与MySQLi方式】
2017/10/07 PHP
PHP运用foreach神奇的转换数组(实例讲解)
2018/02/01 PHP
原生PHP实现导出csv格式Excel文件的方法示例【附源码下载】
2019/03/07 PHP
js对象与打印对象分析比较
2013/04/23 Javascript
js带按钮的提示框可供选择示例代码
2013/09/17 Javascript
原生js实现移动开发轮播图、相册滑动特效
2015/04/17 Javascript
jQuery拖动元素并对元素进行重新排序
2015/12/30 Javascript
Bootstrap3制作图片轮播效果
2016/05/12 Javascript
AngularJS基础 ng-list 指令详解及示例代码
2016/08/02 Javascript
jQuery基于正则表达式的表单验证功能示例
2017/01/21 Javascript
基于jQuery实现的Ajax 验证用户名唯一性实例代码
2017/06/28 jQuery
vuex提交state&&实时监听state数据的改变方法
2018/09/16 Javascript
javascript简单实现深浅拷贝过程详解
2019/10/08 Javascript
微信小程序基于movable-view实现滑动删除效果
2020/01/08 Javascript
vuex刷新后数据丢失的解决方法
2020/10/18 Javascript
JS实现简单贪吃蛇小游戏
2020/10/28 Javascript
vue-router懒加载的3种方式汇总
2021/02/28 Vue.js
[04:56]经典回顾:前Ehome 与 前LGD
2015/02/26 DOTA
Python中计算三角函数之cos()方法的使用简介
2015/05/15 Python
python实现数组插入新元素的方法
2015/05/22 Python
python学生管理系统代码实现
2020/04/05 Python
Django框架会话技术实例分析【Cookie与Session】
2019/05/24 Python
python之当你发现QTimer不能用时的解决方法
2019/06/21 Python
Python学习笔记之集合的概念和简单使用示例
2019/08/22 Python
利用setuptools打包python程序的方法步骤
2020/01/18 Python
Html5移动端网页端适配(js+rem)
2021/02/03 HTML / CSS
俄罗斯天然和有机产品、健康生活网上商店:Fitomarket.ru
2020/10/09 全球购物
琳达·法罗眼镜英国官网:Linda Farrow英国
2021/01/19 全球购物
园林资料员岗位职责
2013/12/30 职场文书
图书室管理制度
2014/01/19 职场文书
学校元旦晚会方案
2014/02/19 职场文书
外语专业毕业生自荐信
2014/04/14 职场文书
贸易跟单员英文求职信
2014/04/19 职场文书
群众路线领导对照材料
2014/08/23 职场文书
校车安全责任书
2014/08/25 职场文书