在微信小程序的JS脚本中使用Promise来优化函数处理

时间:2021-08-07 09:21:56

在我们传统的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来处理,会显得更加简洁易读。

小程序其他文章:

在微信小程序中使用富文本转化插件wxParse

在微信小程序的JS脚本中使用Promise来优化函数处理的更多相关文章

  1. 微信小程序:JS 交互逻辑

    微信小程序:JS 交互逻辑 一.JS 交互逻辑 一个服务仅仅只有界面展示是不够的,还需要和用户做交互:响应用户的点击.获取用户的位置等等.在小程序里边,我们就通过编写 JS 脚本文件来处理用户的操作. ...

  2. 如何在微信小程序的模板渲染中使用JS?

    在微信小程序中使用模板渲染时,可能需要用JS对其进行处理. <view class="price text-red text-lg"> <!-- 价格保留两位小数 ...

  3. 微信小程序开发——开发者工具中素材管理功能使用的注意事项

    为什么使用“素材管理”: 微信小程序环境中本地资源图片是无法通过 WXSS 获取的,可以使用网络图片,或者 base64,或者使用<image/>标签.. 当然,如果不想这么麻烦,你可能会 ...

  4. 微信小程序:wx&period;navigateTo中url无法跳转问题(app&period;json中配置的tabBar与wx&period;navigateTo中url引用相同页面导致)

    今天在做微信小程序时,设置wx.navigateTo页面跳转并传参数,点击始终没有效果,代码如下: //事件处理函数 newsDetail: function (event) { console.lo ...

  5. 微信小程序开发7-JavaScript脚本

    1.小程序的主要开发语言是 JavaScript ,开发者使用 JavaScript 来开发业务逻辑以及调用小程序的 API 来完成业务需求. 2.ECMAScript 在大部分开发者看来,ECMAS ...

  6. 微信小程序 - WapRequest&period;js

    文件位于 utils/WapRequest.js 封装了所有接口请求和wap站点的controller请求,代码示例 /** * 选择 洲 国家 * 无参数 */ WapRequest.prototy ...

  7. 小程序红包开发跳坑记 微信小程序红包接口开发过程中遇到的问题 微信小程序红包开发

    现在做小程序的越来越多,商家推广也是一个瓶颈,谁不发点红包,都很难找到人来用你的微信小程序了.于是不管你开发什么小程序功能,你或多或少都要用到小程序来发红包吧.  我们自己之前做公众号发红包,做了两三 ...

  8. 微信小程序这一块(中)

    1.if语句跟for循环的使用 <block wx:if="{{n==1}}"> <view>1917</view> </block&gt ...

  9. 微信小程序开发项目过程中的一个要注意事项

    在微信小程序开发过程中,有时候会用到常用的一些特殊字符如:‘<’.‘>’.‘&’.‘空格’等,微信小程序同样支持对转义字符的处理, decode属性默认为false,不会解析我们的 ...

随机推荐

  1. &OpenCurlyDoubleQuote;PMS-基础权限管理系统”实施某谱OA系统经验总结

    “PMS-基础权限管理系统”介绍 "PMS-基础权限管理系统"是我一直想做的一个产品,融合多年开发及维护管理系统的经验,参考了很多系统,精心研制而成. 可以做为毕业设计参考,新手学 ...

  2. Spark Streaming揭秘 Day23 启动关闭源码图解

    Spark Streaming揭秘 Day23 启动关闭源码图解 今天主要分析一下SparkStreaming的启动和关闭过程. 从Demo程序出发,主要聚焦在两段代码: 启动代码: 关闭代码: 启动 ...

  3. BeanFactory和FactoryBean

    BeanFactory和FactoryBean 1.BeanFactory BeanFactory定义了 IOC 容器的最基本形式,并提供了 IOC 容器应遵守的的最基本的接口,也就是Spring I ...

  4. Java &lbrack;leetcode 11&rsqb; Container With Most Water

    问题描述: Given n non-negative integers a1, a2, ..., an, where each represents a point at coordinate (i, ...

  5. InputStream类详解

    InputStream这个抽象类是所有基于字节的输入流的超类,抽象了Java的字节输入模型.在这个类中定义了一些基本的方法.看一下类的定义: public abstract class InputSt ...

  6. Know your weapons Ⅱ

    本次内容主要讲述使用UWP相关技术可以实现的软件上的一些功能,这里以Netease-Cloud Music(下称Cloud Music)为例讲述,这款音乐软件我个人一直在用,毕竟人们生活离不开音乐,说 ...

  7. 四种简单的图像显著性区域特征提取方法-----AC&sol;HC&sol;LC&sol;FT。

    四种简单的图像显著性区域特征提取方法-----> AC/HC/LC/FT. 分类: 图像处理 2014-08-03 12:40 4088人阅读 评论(4) 收藏 举报 salient regio ...

  8. 关于H5在微信获取授权

    很尴尬,flag倒了很久,这才来更新. 1.作为一枚小前端,所做的就是把微信获取授权之后的链接和所需的参数给到后端,定好之后只要获取链接就好了.(⊙o⊙)…确实就是这么简单,基本上这种授权是需要后端来 ...

  9. ANTLR4权威指南 - 第7章 通过特定应用程序代码解耦语法

    第7章 通过特定应用程序代码解耦语法 到目前为止,我们已经知道了怎么用ANTLR的语法来定义语言了,接下来我们要给我们的语法注入一些新的元素了.就语法本身而言,其用处并不大,因为它只能告诉我们一个用户 ...

  10. 一篇很棒的 MySQL 触发器学习教程

    一.触发器概念 触发器(trigger):监视某种情况,并触发某种操作,它是提供给程序员和数据分析员来保证数据完整性的一种方法,它是与表事件相关的特殊的存储过程,它的执行不是由程序调用,也不是手工启动 ...