微信小程序利用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 相关文章推荐
通过JS 获取Mouse Position(鼠标坐标)的代码
Sep 21 Javascript
script标签属性type与language使用选择
Dec 02 Javascript
Jquery EasyUI中弹出确认对话框以及加载效果示例代码
Feb 13 Javascript
使用递归遍历对象获得value值的实现方法
Jun 14 Javascript
解析浏览器端的AJAX缓存机制
Jun 21 Javascript
js提示框替代系统alert,自动关闭alert对话框的实现方法
Nov 07 Javascript
Angularjs中的页面访问权限怎么设置
Nov 11 Javascript
jQuery居中元素scrollleft计算方法示例
Jan 16 Javascript
js实现带三角符的手风琴效果
Mar 01 Javascript
微信小程序实战之自定义模态弹窗(8)
Apr 18 Javascript
vue 实现在函数中触发路由跳转的示例
Sep 01 Javascript
详解Vue-axios 设置请求头问题
Dec 06 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
预告映像公开!第1章续篇剧场版动画《Princess Principal Crown Handler》4月10日上映!
2020/03/06 日漫
PHP函数之日期时间函数date()使用详解
2013/09/09 PHP
PHP使用Mysqli类库实现完美分页效果的方法
2016/04/07 PHP
PHP里面把16进制的图片数据显示在html的img标签上(实现方法)
2017/05/02 PHP
PHP 二维array转换json的实例讲解
2018/08/21 PHP
Laravel框架Auth用户认证操作实例分析
2019/09/29 PHP
利用JQuery和JS实现奇偶行背景颜色自定义效果
2012/11/19 Javascript
js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)
2013/12/11 Javascript
深入理解JavaScript系列(43):设计模式之状态模式详解
2015/03/04 Javascript
JavaScript获取当前cpu使用率的方法
2015/12/15 Javascript
基于jquery实现下拉框美化特效
2016/02/02 Javascript
jquery表格datatables实例解析 直接加载和延迟加载
2016/08/12 Javascript
PHP获取当前页面完整URL的方法
2016/12/02 Javascript
JavaScript简介_动力节点Java学院整理
2017/06/26 Javascript
微信小程序wx:for和wx:for-item的用法详解
2018/04/01 Javascript
微信小程序的tab选项卡的实现效果
2019/05/15 Javascript
layui多图上传实现删除功能的例子
2019/09/23 Javascript
基于Vue el-autocomplete 实现类似百度搜索框功能
2019/10/25 Javascript
vue点击自增和求和的实例代码
2019/11/06 Javascript
微信小程序调用后台service教程详解
2020/11/06 Javascript
[00:47]DOTA2荣耀之路6:天火,天火!
2018/05/30 DOTA
Pycharm学习教程(2) 代码风格
2017/05/02 Python
30秒轻松实现TensorFlow物体检测
2018/03/14 Python
快速查找Python安装路径方法
2020/02/06 Python
使用python求解二次规划的问题
2020/02/29 Python
TensorFlow tf.nn.conv2d_transpose是怎样实现反卷积的
2020/04/20 Python
HTML5组件Canvas实现图像灰度化(步骤+实例效果)
2013/04/22 HTML / CSS
采用专利算法搜索最廉价的机票:CheapAir
2016/09/10 全球购物
农救科工作职责
2013/11/27 职场文书
初中地理教学反思
2014/01/11 职场文书
《谁的本领大》教后反思
2014/04/25 职场文书
学校爱国卫生月活动总结
2014/06/25 职场文书
消夏晚会主持词
2015/06/30 职场文书
Python词云的正确实现方法实例
2021/05/08 Python
「回转企鹅罐」10周年纪念展「輪るピングドラム展」海报公开
2022/03/22 日漫
一次Mysql update sql不当引起的生产故障记录
2022/04/01 MySQL