小程序怎么处理轮训ajax,微信小程序中使用Promise进行异步流程处理的实例详解...
微信小程序中使用Promise进行异步流程处理的实例详解
我们知道,JavaScript是单进程执行的,同步操作会对程序的执行进行阻塞处理。比如在浏览器页面程序中,如果一段同步的代码需要执行很长时间(比如一个很大的循环操作),则页面会产生卡死的现象。
所以,在JavaScript中,提供了一些异步特性,为程序提供了性能和体验上的益处,比如可以将代码放到setTimeout()中执行;或者在网页中,我们使用Ajax的方式向服务器端做异步数据请求。这些异步的代码不会阻塞当前的界面主进程,界面还是可以灵活的进行操作,等到异步代码执行完成,再做相应的处理。
一段典型的异步代码类似这样:
function asyncFunc(callback) {
setTimeout(function () {
//在这里写你的逻辑代码
//...
//逻辑代码结束,执行一个回调函数
callback();
}, 5000);
}
或者:
function getAccountInfo(callback, errorCallback) {
wx.request({
url: '/accounts/12345',
success: function (res) {
//...
callback(data);
},
fail: function (res) {
//...
errorCallback(data);
}
});
}
然后我们这样调用:
asyncFunc(function () {
console.log("asyncFunc() run complete");
});
getAccountInfo(function (data) {
console.log("get account info successfully:", data);
}, function () {
console.error("get account info failed");
});
这是一种使用了回调函数来控制代码执行流程的方式。这样看起来没问题,也挺容易理解。
但是,如果我们一段代码中,异步操作太多,又要保证这些异步操作是有顺序的执行,那我们的代码就看起来非常糟糕,就像这样:
asyncFunc1(function(){
//...
asyncFunc2(function(){
//...
asyncFunc3(function(){
//...
asyncFunc4(function(){
//...
asyncFunc5(function(){
//...
});
});
});
});
});
这样的代码可读性和可维护性可想而知了。还有,回调函数真正的问题在于:
它剥夺了我们使用 return 和 throw 这些关键字的能力。
那有什么办法来改善这个问题呢?答案是肯定的,Promise这种概念的产生,很好地解决了这一切。关于什么是Promise,一搜一大把介绍,我这里就不复制粘贴了,我主要是讲一下我们怎么用它来解决我们的问题。
我们来看一下,上面的例子如果使用Promise,它会是什么样子?我们先将这些函数变成Promise的方式:
function asyncFunc1(){
return new Promise(function (resolve, reject) {
//...
})
}
// asyncFunc2,3,4,5也实现成跟asyncFunc1一样的方式...
然后看一下他们是怎么样被调用的:
asyncFunc1()
.then(asyncFunc2)
.then(asyncFunc3)
.then(asyncFunc4)
.then(asyncFunc5);
这样,这些异步函数就会按照顺序一个一个依次执行了。
ES6中原生支持了Promise,不过在原生不支持Promise的环境中,我们有很多第三方库来支持,比如Q.js和Bluebird。它们一般都除了提供标准Promise的API外,还提供了一些标准之外但非常有用的API,使得异步流程的控制更加优雅。
从微信小程序的API文档中我们可以看到,框架提供的JavaScript API中很多函数其实都是异步的,如wx.setStorage(), wx.getStorage(), wx.getLocation()等等,它们也是提供的回调的处理方式,在参数中传入success, fail,complete回调函数,就可以对运行成功或失败进行分别处理。
如:
wx.getLocation({
type: 'wgs84',
success: function(res) {
var latitude = res.latitude
var longitude = res.longitude
var speed = res.speed
var accuracy = res.accuracy
},
fail: function() {
console.error("get location failed")
}
})
我们能不能让微信小程序的异步API支持Promise呢?答案是肯定的,我们当然可以一个一个的用Promise去包装这些API,但是这个还是比较麻烦的。不过,由于小程序的API的参数格式都比较统一,只接受一个object参数,回调都是在这个参数中设置,所以,这为我们的统一处理提供了便利,我们可以写一个非侵入性的工具方法,来完成这样的工作:
假设我们将这个工具方法写到一个名为的util.js的文件中:
var Promise = require('../libs/bluebird.min') //我用了bluebird.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)
})
}
}
module.exports = {
wxPromisify: wxPromisify
}
之后,我们来看一下如何使用这个方法,将原来回调方式的API变成Promise的方式:
var util = require('../utils/util')
var getLocationPromisified = util.wxPromisify(wx.getLocation)
getLocationPromisified({
type: 'wgs84'
}).then(function (res) {
var latitude = res.latitude
var longitude = res.longitude
var speed = res.speed
var accuracy = res.accuracy
}).catch(function () {
console.error("get location failed")
})
是不是很容易理解?
以上就是关于使用Promise处理异步流程,如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
时间: 2017-08-15
小程序怎么处理轮训ajax,微信小程序中使用Promise进行异步流程处理的实例详解...相关推荐
- 微信小程序web-view能发送ajax,微信小程序web-view组件的坑
最近在做一个活动时候,需要将H5页面嵌入别人家的小程序中,正常微信环境中我们会通过在分享链接拼接参数的方式,来获取微信用户的分享关系,然而在小程序中分享的地址是小程序自己的path,其他用户点击的时候 ...
- 微信小程序中form 表单提交和取值实例详解
2019独角兽企业重金招聘Python工程师标准>>> 我们知道,如果我们直接给 input 添加 bindinput,比如:<input bindinput="on ...
- android 清理缓存动画,Android仿微信清理内存图表动画(解决surfaceView屏幕闪烁问题)demo实例详解...
最近接了一个项目其中有功能要实现一个清理内存,要求和微信的效果一样.于是想到用surfaceView而不是继承view.下面小编给大家解析下实现思路. surfaceView是为了解决频繁绘制动画产生 ...
- 【微信小程序宝典】从零开始做微信小程序开发NO.2
2019独角兽企业重金招聘Python工程师标准>>> 为了方便大家了解并入门微信小程序,我将一些可能会需要的知识,列在这里,让大家方便的从零开始学习: 首先感谢几位给予建议的同学, ...
- 微信小程序图标不支持html,微信小程序实现自定义加载图标功能
效果图 实现思路 1.首先通过HTML+CSS实现加载动画的静态效果: 2.根据需求给每个动画设计不同的动画效果. 例如第一个加载图标的静态绘制 1.首先确定动画的盒子宽高: 2.设置盒子中每一个长方 ...
- 微信小程序开发登录界面mysql_微信小程序 欢迎界面开发的实例详解
微信小程序 欢迎界面 市面上大多数的app都会有一个欢迎界面,下面将演示如何通过微信小程序实现一个欢迎界面. 下面将会按照以下的顺序介绍: 布局的实现 逻辑的实现 样式的实现 1.布局的实现 整个布局 ...
- python天气查询小程序加背景图_微信小程序开发背景图显示功能
这两天开发微信小程序,在设置背景图片时,发现在wxss里面设置background-image:(url) 属性,不管是开发工具还是线上都无法显示.经过查资料发现,background-image只能 ...
- php微信小程序物流进度推送,微信小程序 消息推送php服务器验证实例详解
微信小程序 消息推送php服务器验证实例详解 设置页面("设置">>"开发设置"): 1.设置服务器域名 注意http和https协议的不同. 2. ...
- 从程序员的角度分析微信小程序
从程序员的角度分析微信小程序 我赶快在书架上拿出三年前买的书,把上面的土擦干净,压压惊. 作为一个并不是资深的程序员. 从程序员的角度分析一下微信小程序,欢迎指点. 首先 ...
最新文章
- 每日一皮:最真实的现代互联网商业模式
- 记 thoughtworks 的一次面试
- 【PHP】关于IPv4、IPv6 的操作函数
- cat 几行_研发早 商用早 有方科技Cat.1产品在多个共享场景商用
- sublime 设置新建文件自动添加author(作者)等文件头信息
- 角色和权限Hibernate实体映射配置
- Networdx小案例学习
- C++ 线程同步 (学习笔记)
- views是什么意思_views是什么意思_views怎么读_views翻译_用法_发音_词组_同反义词_看( view的名词复数 )-新东方在线英语词典...
- nettry 入站事件如何传递到下一个handler
- vue-seamless-scroll
- 漫画算法python版下载_漫画算法:小灰的算法之旅 PDF 全格式完整版
- 程序员 文本编辑器 c语言,程序员必备的五款文本编辑器
- debian查询端口进程_Linux 查看端口占用情况
- 计算机pe启动蓝屏怎么办,电脑使用PE系统蓝屏如何修复
- 计算机隐藏用法表白,微信隐藏符号功能大全 情人节可以发这些表白
- stm8s定时器输出比较模式
- SQL学习笔记——数据更新update语句的使用
- 欧拉回路和Hanmilton回路
- golang vendor目录
热门文章
- C语言进阶-第39讲:银行储蓄系统(二进制版)开发
- aix oracle timed out ora-03113,ORA-03113 ORA-16072 错误
- 2021年全国职业技能大赛:网络系统管理项目
- Windows下安装zookeeper
- 好看的个人在线要饭网站PHP源码+LayUi框架
- 一个按键精灵后台发送消息的脚本
- CSS — 让网页美起来(一)
- 彻底解决gradle与gradle plugin匹配关系以及gradle下载缓慢的问题
- Docker 自建 Bitwarden 密码服务器 centOS + 宝塔面板
- 互联网公司招聘--去哪儿--产品运营--2016年笔试题