在我们传统的Javascript开发函数编写中,我们习惯了回调函数的处理,不过随着回调函数的增多,以及异步处理的复杂性等原因,代码越来越难读,因此诞生了使用Promise来优化JS函数处理的需求,引入Promise确实能够很好的解决异步回调函数的可读性等问题,同时也使得我们调用的时候代码简洁一些,本文介绍如何在小程序的JS代码里面使用Promise来封装一些函数的做法。
1、小程序传统的回调处理
例如我们生成一个小程序,里面的app.js里面就自动带有一个getUserInfo的函数,这个是使用传统模式的回调函数。
//app.js
App({
onLaunch: function () {
//调用API从本地缓存中获取数据
var logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
}, getUserInfo:function(cb){
var that = this
if(this.globalData.userInfo){
typeof cb == "function" && cb(this.globalData.userInfo)
}else{
//调用登录接口
wx.login({
success: function () {
wx.getUserInfo({
success: function (res) {
that.globalData.userInfo = res.userInfo
typeof cb == "function" && cb(that.globalData.userInfo)
}
})
}
})
}
},
globalData:{
userInfo: null,
openid: null
}
})
这种是通过 传入一个cb的回调函数进行处理,使用的时候为了安全性,还需要进一步判断其类型是否为函数:typeof cb == "function",这种处理还是相对比较易懂。
但是,如果我们一段代码中,异步操作太多,又要保证这些异步操作是有顺序的执行,那我们的代码就看起来非常糟糕,就像这样的极端情况:
asyncFunc1(function(){
//...
asyncFunc2(function(){
//...
asyncFunc3(function(){
//...
asyncFunc4(function(){
//...
asyncFunc5(function(){
//...
});
});
});
});
});
如果我们改用Promise来处理,那么进行一层简单的包装即可。
function asyncFunc1(){
return new Promise(function (resolve, reject) {
//...
})
}
2、Promise的使用介绍
Promise的使用相对比较简单,我们入门可以参考下相关介绍:阮一峰 promise入门,如果我们在JS函数里面引入它的话,那么需要包含对应的javascript组件
我们可以在Github上下载对应的组件JS,引入小程序项目即可:es6-promise
我们为了方便,在项目中创建一个辅助类utils.js,然后在其中引入Promise的脚本,如下所示。
const Promise = require('./Promise')
然后在APP.js里面,我们修改原来的getUserInfo函数如下
//app.js
const utils = require('./utils/util.js') App({
onLaunch: function() {
//调用API从本地缓存中获取数据
var logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
}, getUserInfo() {
return new utils.Promise((resolve, reject) => {
if (this.globalData.userInfo) {
resolve(this.globalData.userInfo)
}
return utils.getUserInfo().then(res => {
resolve(this.globalData.userInfo = res.userInfo)
})
})
}, //获取系统信息
getSystemInfo() {
return new utils.Promise((resolve, reject) => {
var that = this
if (that.globalData.systemInfo) {
resolve(that.globalData.systemInfo)
} else {
wx.getSystemInfo({
success: function(res) {
resolve(that.globalData.systemInfo = res);
}
})
}
})
},
//全局对象
globalData: {
userInfo: null,
systemInfo: null
},
utils
})
我们看到,所有原先的函数,我们如果需要引入Promise处理的话,增加一层的函数体即可。
return new utils.Promise((resolve, reject) => { // 原来的函数体代码 });
这样我们调用的时候,使用then函数进行处理即可,类似下面的代码。
getUserInfo().then(user => this.setData({userInfo:user})).catch(console.log);
引入这个Promise后,我们为了进一步实现代码的重用,可以把一些常见的函数放到utils.js来,这样可以实现代码的重用。
//用户登录
function login(){
return new Promise((resolve,reject) => wx.login({
success:resolve,
fail:reject
}))
} //获取用户信息
function getUserInfo(){
return login().then(res => new Promise((resolve,reject) =>
wx.getUserInfo({
success:resolve,
fail:reject
})
))
}
function requstGet(url,data){
return requst(url,'GET',data)
} function requstPost(url,data){
return requst(url,'POST',data)
} //封装Request请求方法
function requst(url,method,data = {}){
wx.showNavigationBarLoading()
data.method = method
return new Promise((resove,reject) => {
wx.request({
url: url,
data: data,
header: {},
method: method.toUpperCase(), // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
success: function(res){
wx.hideNavigationBarLoading()
resove(res.data)
},
fail: function(msg) {
console.log('reqest error',msg)
wx.hideNavigationBarLoading()
reject('fail')
}
})
})
}
然后发布对应的接口,以供其他模块使用即可。
//发布的接口
module.exports = {
Promise,makeArray,getUserInfo,
get:requstGet,post:requstPost,requst,decodeHtml, formatTime,getDateDiff
}
封装好这些公用方法后,我们在页面里面进行调用即可,调用的代码如下所示(演示代码从地址里面获取数据,并绑定到界面上)
//使用Comprise的封装函数展现
var url ='http://localhost:27206/api/Framework/Information/FindByCode';
var companyurl = "http://www.iqidi.com";
var json = {code: 'company'};
app.utils.get(url, json).then(function(res) {
var data = { url: companyurl, image: res.Picture, content: res.Content };
that.setData({
item : data
});
WxParse.wxParse('content', 'html', data.content, that, 25);
});
而如果我们使用原来的函数,那么实现代码如下所示。
// 使用标准的wx.request函数实现展现
var url ='http://localhost:27206/api/Framework/Information/FindByCode';
var companyurl = "http://www.iqidi.com";
var json = {code: 'company'};
wx.request({
url: url,
data: json,
success: function(res) {
console.log(res);
var data = { url: companyurl, image: res.data.Picture, content: res.data.Content };
that.setData({
item : data
});
WxParse.wxParse('content', 'html', data.content, that, 25);
}
})
如果对于复杂流程的函数处理,使用Promise来处理,会显得更加简洁易读。
小程序其他文章:
在微信小程序的JS脚本中使用Promise来优化函数处理的更多相关文章
-
微信小程序:JS 交互逻辑
微信小程序:JS 交互逻辑 一.JS 交互逻辑 一个服务仅仅只有界面展示是不够的,还需要和用户做交互:响应用户的点击.获取用户的位置等等.在小程序里边,我们就通过编写 JS 脚本文件来处理用户的操作. ...
-
如何在微信小程序的模板渲染中使用JS?
在微信小程序中使用模板渲染时,可能需要用JS对其进行处理. <view class="price text-red text-lg"> <!-- 价格保留两位小数 ...
-
微信小程序开发——开发者工具中素材管理功能使用的注意事项
为什么使用“素材管理”: 微信小程序环境中本地资源图片是无法通过 WXSS 获取的,可以使用网络图片,或者 base64,或者使用<image/>标签.. 当然,如果不想这么麻烦,你可能会 ...
-
微信小程序:wx.navigateTo中url无法跳转问题(app.json中配置的tabBar与wx.navigateTo中url引用相同页面导致)
今天在做微信小程序时,设置wx.navigateTo页面跳转并传参数,点击始终没有效果,代码如下: //事件处理函数 newsDetail: function (event) { console.lo ...
-
微信小程序开发7-JavaScript脚本
1.小程序的主要开发语言是 JavaScript ,开发者使用 JavaScript 来开发业务逻辑以及调用小程序的 API 来完成业务需求. 2.ECMAScript 在大部分开发者看来,ECMAS ...
-
微信小程序 - WapRequest.js
文件位于 utils/WapRequest.js 封装了所有接口请求和wap站点的controller请求,代码示例 /** * 选择 洲 国家 * 无参数 */ WapRequest.prototy ...
-
小程序红包开发跳坑记 微信小程序红包接口开发过程中遇到的问题 微信小程序红包开发
现在做小程序的越来越多,商家推广也是一个瓶颈,谁不发点红包,都很难找到人来用你的微信小程序了.于是不管你开发什么小程序功能,你或多或少都要用到小程序来发红包吧. 我们自己之前做公众号发红包,做了两三 ...
-
微信小程序这一块(中)
1.if语句跟for循环的使用 <block wx:if="{{n==1}}"> <view>1917</view> </block> ...
-
微信小程序开发项目过程中的一个要注意事项
在微信小程序开发过程中,有时候会用到常用的一些特殊字符如:‘<’.‘>’.‘&’.‘空格’等,微信小程序同样支持对转义字符的处理, decode属性默认为false,不会解析我们的 ...
随机推荐
-
“PMS-基础权限管理系统”实施某谱OA系统经验总结
“PMS-基础权限管理系统”介绍 "PMS-基础权限管理系统"是我一直想做的一个产品,融合多年开发及维护管理系统的经验,参考了很多系统,精心研制而成. 可以做为毕业设计参考,新手学 ...
-
Spark Streaming揭秘 Day23 启动关闭源码图解
Spark Streaming揭秘 Day23 启动关闭源码图解 今天主要分析一下SparkStreaming的启动和关闭过程. 从Demo程序出发,主要聚焦在两段代码: 启动代码: 关闭代码: 启动 ...
-
BeanFactory和FactoryBean
BeanFactory和FactoryBean 1.BeanFactory BeanFactory定义了 IOC 容器的最基本形式,并提供了 IOC 容器应遵守的的最基本的接口,也就是Spring I ...
-
Java [leetcode 11] Container With Most Water
问题描述: Given n non-negative integers a1, a2, ..., an, where each represents a point at coordinate (i, ...
-
InputStream类详解
InputStream这个抽象类是所有基于字节的输入流的超类,抽象了Java的字节输入模型.在这个类中定义了一些基本的方法.看一下类的定义: public abstract class InputSt ...
-
Know your weapons Ⅱ
本次内容主要讲述使用UWP相关技术可以实现的软件上的一些功能,这里以Netease-Cloud Music(下称Cloud Music)为例讲述,这款音乐软件我个人一直在用,毕竟人们生活离不开音乐,说 ...
-
四种简单的图像显著性区域特征提取方法-----AC/HC/LC/FT。
四种简单的图像显著性区域特征提取方法-----> AC/HC/LC/FT. 分类: 图像处理 2014-08-03 12:40 4088人阅读 评论(4) 收藏 举报 salient regio ...
-
关于H5在微信获取授权
很尴尬,flag倒了很久,这才来更新. 1.作为一枚小前端,所做的就是把微信获取授权之后的链接和所需的参数给到后端,定好之后只要获取链接就好了.(⊙o⊙)…确实就是这么简单,基本上这种授权是需要后端来 ...
-
ANTLR4权威指南 - 第7章 通过特定应用程序代码解耦语法
第7章 通过特定应用程序代码解耦语法 到目前为止,我们已经知道了怎么用ANTLR的语法来定义语言了,接下来我们要给我们的语法注入一些新的元素了.就语法本身而言,其用处并不大,因为它只能告诉我们一个用户 ...
-
一篇很棒的 MySQL 触发器学习教程
一.触发器概念 触发器(trigger):监视某种情况,并触发某种操作,它是提供给程序员和数据分析员来保证数据完整性的一种方法,它是与表事件相关的特殊的存储过程,它的执行不是由程序调用,也不是手工启动 ...