微信小程序利用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 相关文章推荐
Javascript中的变量使用说明
May 18 Javascript
在jQuery中 常用的选择器介绍
Apr 16 Javascript
javascript使用location.search的示例
Nov 05 Javascript
php显示当前文件所在的文件以及文件夹所有文件以树形展开
Dec 13 Javascript
Jquery实现的角色左右选择特效
May 21 Javascript
一个很有趣3D球状标签云兼容IE8
Aug 22 Javascript
JS实现点击按钮自动增加一个单元格的方法
Mar 09 Javascript
特殊日期提示功能的实现方法
Jun 16 Javascript
在js中实现邮箱格式的验证方法(推荐)
Oct 24 Javascript
RGB和YUV 多媒体编程基础详细介绍
Nov 04 Javascript
AngularJS  ng-repeat遍历输出的用法
Jun 19 Javascript
使用Vue实现调用接口加载页面初始数据
Oct 28 Javascript
关于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
PHILIPS AE3805收音机的分析打磨
2021/03/02 无线电
jquery 打开窗口返回值实现代码
2010/03/04 Javascript
利用js实现在浏览器状态栏显示访问者在本页停留的时间
2013/12/29 Javascript
extjs 时间范围选择自动判断的实现代码
2014/06/24 Javascript
基于JQuery制作可编辑的表格特效
2014/12/23 Javascript
编写自己的jQuery提示框(Tip)插件
2015/02/05 Javascript
JavaScript中window.open用法实例详解
2015/04/15 Javascript
基于jQuery实现在线选座之高铁版
2015/08/24 Javascript
JavaScript设计模式初探
2016/01/07 Javascript
微信支付 JS API支付接口详解
2016/07/11 Javascript
对js eval()函数的一些见解
2016/08/15 Javascript
jQuery插件HighCharts实现气泡图效果示例【附demo源码】
2017/03/13 Javascript
详解node单线程实现高并发原理与node异步I/O
2017/09/21 Javascript
详解vue-cli快速构建vue应用并实现webpack打包
2017/12/13 Javascript
Angular浏览器插件Batarang介绍及使用
2018/02/07 Javascript
如何将HTML字符转换为DOM节点并动态添加到文档中详解
2018/08/19 Javascript
vue-cli2打包前和打包后的css前缀不一致的问题解决
2018/08/24 Javascript
Vue使用Clipboard.JS在h5页面中复制内容实例详解
2019/09/03 Javascript
微信小程序scroll-view隐藏滚动条的方法详解
2020/03/25 Javascript
单线程JavaScript实现异步过程详解
2020/05/19 Javascript
[04:29]【TI9采访】OG.N0tail在胜者组决赛后接受采访
2019/08/25 DOTA
python根据日期返回星期几的方法
2015/07/06 Python
对pandas读取中文unicode的csv和添加行标题的方法详解
2018/12/12 Python
vscode 配置 python3开发环境的方法
2019/09/19 Python
python性能测量工具cProfile使用解析
2019/09/26 Python
wxPython之wx.DC绘制形状
2019/11/19 Python
下载与当前Chrome对应的chromedriver.exe(用于python+selenium)
2020/01/14 Python
canvas三角函数模拟水波效果的示例代码
2018/07/03 HTML / CSS
师范毕业生求职自荐信
2013/09/25 职场文书
优秀民警事迹材料
2014/01/29 职场文书
《巨人的花园》教学反思
2014/02/12 职场文书
超市开店计划书
2014/04/26 职场文书
校长创先争优承诺书
2014/08/30 职场文书
大学四年个人总结
2015/03/03 职场文书
公务员学习中国梦心得体会
2016/01/05 职场文书
python爬取新闻门户网站的示例
2021/04/25 Python