全网整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:400-708-3566

微信小程序 引入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()
 })
 }
})

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


# 微信小程序 es6  # 微信小程序 promise  # 微信小程序 引入es6  # 回调  # 我就  # 就会  # 都在  # 有很多  # 不需要  # 会在  # 用了  # 大神  # 更高  # 迫不得已  # 写了  # 内测  # 用户登录  # 绑定  # 写过  # 移除  # 就可以  # 程序开发  # 后加 


相关文章: 建站之星展会模板:智能建站与自助搭建高效解决方案  焦点电影公司作品,电影焦点结局是什么?  简易网站制作视频教程,使用记事本编写一个简单的网页html文件?  网页制作模板网站推荐,网页设计海报之类的素材哪里好?  如何配置FTP站点权限与安全设置?  建站主机与服务器功能差异如何区分?  详解一款开源免费的.NET文档操作组件DocX(.NET组件介绍之一)  SQL查询语句优化的实用方法总结  如何在IIS7中新建站点?详细步骤解析  关于BootStrap modal 在IOS9中不能弹出的解决方法(IOS 9 bootstrap modal ios 9 noticework)  如何解决VPS建站LNMP环境配置常见问题?  定制建站策划方案_专业建站与网站建设方案一站式指南  如何选择最佳自助建站系统?快速指南解析优劣  如何快速上传自定义模板至建站之星?  设计网站制作公司有哪些,制作网页教程?  建站之星导航配置指南:自助建站与SEO优化全解析  免费公司网站制作软件,如何申请免费主页空间做自己的网站?  如何在云服务器上快速搭建个人网站?  如何在Windows 2008云服务器安全搭建网站?  高性能网站服务器部署指南:稳定运行与安全配置优化方案  香港服务器网站生成指南:免费资源整合与高速稳定配置方案  移动端手机网站制作软件,掌上时代,移动端网站的谷歌SEO该如何做?  如何在Windows环境下新建FTP站点并设置权限?  西安制作网站公司有哪些,西安货运司机用的最多的app或者网站是什么?  如何在阿里云通过域名搭建网站?  如何制作网站标识牌,动态网站如何制作(教程)?  如何选择网络建站服务器?高效建站必看指南  湖州网站制作公司有哪些,浙江中蓝新能源公司官网?  建站之星安装步骤有哪些常见问题?  建站主机类型有哪些?如何正确选型  建站主机空间推荐 高性价比配置与快速部署方案解析  如何在自有机房高效搭建专业网站?  建站OpenVZ教程与优化策略:配置指南与性能提升  网站代码制作软件有哪些,如何生成自己网站的代码?  如何在阿里云域名上完成建站全流程?  如何处理“XML格式不正确”错误 常见XML well-formed问题解决方法  如何在万网ECS上快速搭建专属网站?  电商平台网站制作流程,电商网站如何制作?  如何在香港免费服务器上快速搭建网站?  动图在线制作网站有哪些,滑动动图图集怎么做?  网站企业制作流程,用什么语言做企业网站比较好?  网站制作公司哪里好做,成都网站制作公司哪家做得比较好,更正规?  山东网站制作公司有哪些,山东大源集团官网?  音响网站制作视频教程,隆霸音响官方网站?  建站之星伪静态规则如何正确配置?  我的世界制作壁纸网站下载,手机怎么换我的世界壁纸?  猪八戒网站制作视频,开发一个猪八戒网站,大约需要多少?或者自己请程序员,需要什么程序员,多少程序员能完成?  如何快速查询域名建站关键信息?  如何通过商城自助建站源码实现零基础高效建站?  个人网站制作流程图片大全,个人网站如何注销? 

您的项目需求

*请认真填写需求信息,我们会在24小时内与您取得联系。