时间:2021-05-18
微信小程序开发两个月了.大家的项目都在不断迭代.已经不是小程序.这时候就会遇到多层回调嵌套的问题.有些目不忍视了.迫不得已引入es6-promise.在微信小程序内测的时候promise不需要手动引入,后来被微信移除了.看看效果.
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() }) }})以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
JavaScript的Promise.all()Promise是JavaScript异步编程的一种解决方案,在ES6中引入。通过Promise.all()可以实
wx-promise-request是对微信小程序wx.request方法的异步封装。解决问题支持Promise(使用es6-promise库)。管理请求队列,
微信小程序es6-promise.js封装请求与处理异步进程下载es6-promise.js置于根目录下的libs文件夹下;在根目录utils文件夹下新建htt
微信小程序可以使用Javascript的最新ES6标准来开发所以微信小程序中var、let、const用法与区别可以视为JavascriptES6标准中var、
遇到的问题微信开发者工具更新版本后,移除了开发者工具对ES6中Promise特性原生的支持,理由是因为实体机器是不支持Promise的,所以我们需要引入第三方的