欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

微信小程序 引入es6 promise

程序员文章站 2023-02-21 13:23:19
微信小程序开发两个月了.大家的项目都在不断迭代.已经不是小程序.这时候就会遇到多层回调嵌套的问题.有些目不忍视了.迫不得已引入es6-promise.在微信小程序内测的时候...

微信小程序开发两个月了.大家的项目都在不断迭代.已经不是小程序.这时候就会遇到多层回调嵌套的问题.有些目不忍视了.迫不得已引入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()
 })
 }
})

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!