微信小程序利用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 鼠标点击事件及其它捕获
Jun 04 Javascript
jQuery UI 应用不同Theme的办法
Sep 12 Javascript
给jqGrid数据行添加修改和删除操作链接(之一)
Nov 04 Javascript
一个简单的弹性返回顶部JS代码实现介绍
Jun 09 Javascript
jQuery中filter()和find()的区别深入了解
Sep 25 Javascript
jQuery中对未来的元素绑定事件用bind、live or on
Apr 17 Javascript
javascript+HTML5的canvas实现七夕情人节3D玫瑰花效果代码
Aug 04 Javascript
js验证框架之RealyEasy验证详解
Jun 08 Javascript
详解Javascript函数声明与递归调用
Oct 22 Javascript
BootStrap表单验证 FormValidation 调整反馈图标位置的实例代码
May 17 Javascript
浅谈vue-lazyload实现的详细过程
Aug 22 Javascript
JS removeAttribute()方法实现删除元素的某个属性
Jan 11 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
PHP对表单提交特殊字符的过滤和处理方法汇总
2014/02/18 PHP
php将数组存储为文本文件方法汇总
2015/10/28 PHP
详谈phpAdmin修改密码后拒绝访问的问题
2017/04/03 PHP
多个Laravel项目如何共用migrations详解
2018/09/25 PHP
PHP实现将上传图片自动缩放到指定分辨率,并保持清晰度封装类示例
2019/06/17 PHP
接收键盘指令的脚本
2006/06/26 Javascript
jquery 回车事件实现代码
2011/08/23 Javascript
自己实现string的substring方法 人民币小写转大写,数字反转,正则优化
2012/09/02 Javascript
打豆豆小游戏 用javascript编写的[打豆豆]小游戏
2013/01/08 Javascript
js获得指定控件输入光标的坐标兼容IE,Chrome,火狐等多种主流浏览器
2013/05/21 Javascript
jQuery表单获取和失去焦点输入框提示效果的实例代码
2013/08/01 Javascript
浅谈jQuery中对象遍历.eq().first().last().slice()方法
2014/11/26 Javascript
angularjs 处理多个异步请求方法汇总
2015/01/06 Javascript
谈谈基于iframe、FormData、FileReader三种无刷新上传文件的方法
2015/12/03 Javascript
vue.js动态数据绑定学习笔记
2017/05/19 Javascript
jQuery扩展_动力节点Java学院整理
2017/07/05 jQuery
通过V8源码看一个关于JS数组排序的诡异问题
2017/08/14 Javascript
jQuery Layer弹出层传值到父页面的实现代码
2017/08/17 jQuery
Vue2.0 slot分发内容与props验证的方法
2017/12/12 Javascript
浅谈ajax请求不同页面的微信JSSDK问题
2018/02/26 Javascript
js+canvas实现验证码功能
2020/09/21 Javascript
[01:19:23]2018DOTA2亚洲邀请赛 4.5 淘汰赛 Mineski vs VG 第二场
2018/04/06 DOTA
Python操作SQLite数据库的方法详解【导入,创建,游标,增删改查等】
2017/07/11 Python
python 异或加密字符串的实例
2018/10/14 Python
python中requests模拟登录的三种方式(携带cookie/session进行请求网站)
2020/11/17 Python
如何用python实现一个HTTP连接池
2021/01/14 Python
饿了么订餐官网:外卖、网上订餐
2019/06/28 全球购物
技术学校毕业生求职信分享
2013/12/02 职场文书
师说教学反思
2014/02/07 职场文书
《梅花魂》教学反思
2014/04/30 职场文书
软件测试专业推荐信
2014/09/18 职场文书
创业计划书之冷饮店
2019/09/27 职场文书
Golang 如何实现函数的任意类型传参
2021/04/29 Golang
解决sql server 数据库,sa用户被锁定的问题
2021/06/11 SQL Server
logback 实现给变量指定默认值
2021/08/30 Java/Android
Vue如何清空对象
2022/03/03 Vue.js