微信小程序利用co处理异步流程的方法教程


Posted in Javascript onMay 20, 2017

本文主要介绍的是关于微信小程序利用co处理异步流程的方法教程,分享出来供大家参考学习,需要的朋友们下面来看看详细的介绍:

co

co是一个基于ES6 Generator特性实现的【异步流程同步化】写法的工具库。

co需要使用Promise特性,所以,我们先来创建一个使用Promise来处理的异步方法:

function myAsyncFunc() {
 return new Promise(function (resolve, reject) {
 setTimeout(function () {
 console.log("myAsyncFunction done!");
 resolve({ 
 data: "Hello,World" 
 })
 }, 2000);
 });
}

然后,直接使用这个方法的话,就会如下,使用了then/catch的回调方式来处理调用结果和异常处理:

myAsyncFunc().then(function (result) {
 console.log(result.data); //Hello,World
}).catch(function (err) {
 //...
});

而如果是使用co的话,则会像这样:

co(function *() {

 try {
 var result = yield myAsyncFunc();
 console.log(result.data); //Hello,World
 } catch(e) {
 }

});

这样的写法,是不是就是我们非常熟悉的,比较符合逻辑思维习惯的同步写法了?

关于co的用法,在本文中我就不多展开了,有兴趣的朋友可以自行搜索相关资料。我今天要讲的是,如何在小程序环境下面成功的使用co。

1. 开启语言转译选项

由于要使用到ES6的generator,而又要为了兼容性,我们必须对ES6的语法进行降级转译,变成ES5。

微信小程序利用co处理异步流程的方法教程
开启语言转译选项

2. 引入generator支撑库

经过转译后的代码,需要依赖一个regeneratorRuntime,才能支持generator特性。Facebook开源的一个regenerator就是这样一个库,Github地址:https://github.com/facebook/regenerator/

你可以通过npm来下载这个regenerator库:

npm install regenerator

然后将下载文件中名为regenerator-runtime.js的文件拿出来,放到我们的小程序代码中去。

3.下载co和Promise库

接着,通过npm下载co库:

npm install co

将下载文件中名为co.js文件拿出来,放到我们的小程序代码中去。

因为需要依赖Promise,所以我们需要引入一个Promise实现库。在此我们选用一个小而兼容性好的库es6-promise。同样可以通过npm下载:

npm install es6-promise

将es6-promise.js放到我们的小程序代码中。

4.引入小程序代码中

使用前,将这些库正确的引入我们的代码:

const Promise = global.Promise = require('../../libs/es6-promise')
const regeneratorRuntime = global.regeneratorRuntime = require('../../libs/regenerator-runtime')
const co = require('../../libs/co')

好了,接下来就可以开始愉快的使用co进行编程了。

总结

好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
收集的网上用的ajax之chat.js文件
Apr 08 Javascript
兼容ie和firefox js关闭代码
Dec 11 Javascript
JavaScript 上万关键字瞬间匹配实现代码
Jul 07 Javascript
jQuery实现摸拟alert提示框
May 22 Javascript
深入剖析JavaScript面向对象编程
Jul 12 Javascript
浅谈jQuery this和$(this)的区别及获取$(this)子元素对象的方法
Nov 29 Javascript
JS在浏览器中解析Base64编码图像
Feb 09 Javascript
Node.js数据库操作之查询MySQL数据库(二)
Mar 04 Javascript
JavaScript之map reduce_动力节点Java学院整理
Jun 29 Javascript
ReactNative之键盘Keyboard的弹出与消失示例
Jul 11 Javascript
JS控制只能输入数字并且最多允许小数点两位
Nov 24 Javascript
jquery实现直播视频弹幕效果
Feb 25 jQuery
关于jQuery库冲突的完美解决办法
May 20 #jQuery
layui文件上传实现代码
May 20 #Javascript
为你的微信小程序体积瘦身详解
May 20 #Javascript
jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
May 20 #jQuery
使用node.js搭建服务器
May 20 #Javascript
layui表格实现代码
May 20 #Javascript
微信小程序新增的拖动组件movable-view使用教程
May 20 #Javascript
You might like
PHP版自动生成文章摘要
2008/07/23 PHP
php 清除网页病毒的方法
2008/12/05 PHP
PHP中模拟链表和链表的基本操作示例
2016/02/27 PHP
php基于环形链表解决约瑟夫环问题示例
2017/11/07 PHP
Laravel使用原生sql语句并调用的方法
2019/10/09 PHP
javascript下操作css的float属性的特殊写法
2007/08/22 Javascript
Javascript的构造函数和constructor属性
2010/01/09 Javascript
JS中Iframe之间传值的方法
2013/03/11 Javascript
实现只能输入数字的input不用replace方法
2013/09/12 Javascript
基于jQuery实现的图片切换焦点图整理
2014/12/07 Javascript
基于豆瓣API+Angular开发的web App
2015/01/02 Javascript
jQuery循环动画与获取组件尺寸的方法
2015/02/02 Javascript
javascript字符串函数汇总
2015/12/06 Javascript
详解Javascript中DOM的范围
2017/02/13 Javascript
微信小程序 判断手机号的实现代码
2017/04/19 Javascript
vue.js内部自定义指令与全局自定义指令的实现详解(利用directive)
2017/07/11 Javascript
vue组件间的参数传递实例详解
2019/04/26 Javascript
MockJs结合json-server模拟后台数据
2020/08/26 Javascript
在Python中移动目录结构的方法
2016/01/31 Python
Python 中 Meta Classes详解
2016/02/13 Python
浅谈python标准库--functools.partial
2019/03/13 Python
详解python中递归函数
2019/04/16 Python
pycharm new project变成灰色的解决方法
2019/06/27 Python
基于python2.7实现图形密码生成器的实例代码
2019/11/05 Python
python3中numpy函数tile的用法详解
2019/12/04 Python
Python读取二进制文件代码方法解析
2020/06/22 Python
土木工程专业自荐信
2013/10/04 职场文书
青年教师典范事迹材料
2014/01/31 职场文书
岗位职责说明书
2014/05/07 职场文书
会计个人实习计划书
2014/08/15 职场文书
2014年社区居委会主任重阳节讲话稿
2014/09/25 职场文书
单位工作证明格式模板
2014/10/04 职场文书
安全员岗位职责范本
2015/04/11 职场文书
7个你应该知道的JS原生错误类型
2021/04/29 Javascript
聊聊Python String型列表求最值的问题
2022/01/18 Python
python中redis包操作数据库的教程
2022/04/19 Python