微信小程序 引入es6 promise

 更新时间:2017年04月12日 09:00:10   作者:dzp_coder  
本篇文章主要介绍了微信小程序引入es6 promise的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧

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

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

相关文章

  • 微信小程序自定义音乐进度条的实例代码

    微信小程序自定义音乐进度条的实例代码

    最近遇到这样的需求:显示音乐播放按钮、可手动拖拽进度条;页面中含多个音乐,播放当前音乐时暂停其他音乐播放。 这篇文章主要介绍了微信小程序自定义音乐进度条的实例代码,需要的朋友可以参考下
    2018-08-08
  • JS 创建对象的模式实例小结

    JS 创建对象的模式实例小结

    这篇文章主要介绍了JS 创建对象的模式,结合实例形式总结分析了JS 创建对象的各种常用模式,包括工厂模式、构造函数模式、原型模式、组合构造和原型模式、动态原型模式、寄生构造函数模式、稳妥构造模式等,需要的朋友可以参考下
    2020-04-04
  • javaScript同意等待代码实现心得

    javaScript同意等待代码实现心得

    javaScript功能描述:本程序实现在同意某某协议页面对同意按钮进行十秒钟的禁用,同时在按钮的Value显示倒计时。
    2011-01-01
  • javascript中使用正则表达式清理table样式的代码

    javascript中使用正则表达式清理table样式的代码

    本文给大家讲解的是使用javascript实现去除多余的TABLE的样式,主要通过结合正则表达式来实现,非常的简单实用,有需要的小伙伴可以参考下。
    2015-07-07
  • JavaScript常用脚本汇总(一)

    JavaScript常用脚本汇总(一)

    这篇文章主要介绍了JavaScript常用脚本汇总系列的第一篇,给大家分享的是jquery限制文本框只能输入数字、封装DOMContentLoaded事件、用原生JS对AJAX做简单封装、跨域请求之JSONP、千分位格式化,有需要的小伙伴们参考下吧。
    2015-03-03
  • js将滚动条滚动到指定位置的简单实现方法

    js将滚动条滚动到指定位置的简单实现方法

    下面小编就为大家带来一篇js将滚动条滚动到指定位置的简单实现方法。小编觉得挺不错的, 现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • js实现根据身份证号自动生成出生日期

    js实现根据身份证号自动生成出生日期

    这篇文章主要介绍了js实现根据身份证号自动生成出生日期,需要的朋友可以参考下
    2015-12-12
  • js实现华丽的九九乘法表效果

    js实现华丽的九九乘法表效果

    本文主要介绍了js实现华丽的九九乘法表效果的示例代码。具有很好的参考价值,下面跟着小编一起来看下吧
    2017-03-03
  • 30分钟快速入门掌握ES6/ES2015的核心内容(上)

    30分钟快速入门掌握ES6/ES2015的核心内容(上)

    ES6增加了很多新的语法,很多同学学习起来感觉很别扭,有时候也不理解新增加的语法有什么用,对ES6的学习也没有兴趣进而动力不足、学习效率不高。下面这篇文章将通过30分钟带大家快速入门掌握ES6/ES2015的核心内容,需要的朋友可以参考下。
    2018-04-04
  • javascript的propertyIsEnumerable()方法使用介绍

    javascript的propertyIsEnumerable()方法使用介绍

    propertyIsEnumerable()是用来检测属性是否属于某个对象的,如果检测到了,返回true,否则返回false,下面为大家介绍下其具体的使用
    2014-04-04

最新评论