深入解析koa之异步回调处理


Posted in Javascript onJune 17, 2019

1. 回调金字塔及理想中的解决方案

我们都知道javascript是一门单线程异步非阻塞语言。异步非阻塞当然是它的一个优点,但大量的异步操作必然涉及大量的回调函数,特别是当异步嵌套的时候,就会出现回调金字塔的问题,使得代码的可读性非常差。比如下面一个例子:

var fs = require('fs');
fs.readFile('./file1', function(err, data) {
console.log(data.toString());
fs.readFile('./file2', function(err, data) {
console.log(data.toString());
})
})

这个例子是先后读取两个文件内容并打印,其中file2的读取必须在file1读取结束之后再进行,因此其操作必须要在file1读取的回调函数中执行。这是一个典型的回调嵌套,并且只有两层而已,在实际编程中,我们可能会遇到更多层的嵌套,这样的代码写法无疑是不够优雅的。

在我们想象中,比较优雅的一种写法应该是看似同步实则异步的写法,类似下面这样:

var data;
data = readFile('./file1');
//下面的代码是第一个readFile执行完毕之后的回调部分
console.log(data.toString());
//下面的代码是第二个readFile的回调
data = readFile('./file2');
console.log(data.toString());

这样的写法,就完全避免回调地狱。事实上,koa就让我们可以使用这样的写法来写异步回调函数:

var koa = require('koa');
var app = koa();
var request=require('some module');
app.use(function*() {
var data = yield request('http://www.baidu.com');
//以下是异步回调部分
this.body = data.toString();
})
app.listen(3000);

那么,究竟是什么让koa有这么神奇的魔力呢?

2. generator配合promise实现异步回调同步写法

关键的一点,其实前一篇也提到了,就是generator具有类似"打断点"这样的效果。当遇到yield的时候,就会暂停,将控制权交给yield后面的函数,当下次返回的时候,再继续执行。

而在上面的那个koa例子中,yield后面的可不是任何对象都可以哦!必须是特定类型。在co函数中,可以支持promise, thunk函数等。

今天的文章中,我们就以promise为例来进行分析,看看如何使用generator和promise配合,实现异步同步化。

依旧以第一个读取文件例子来分析。首先,我们需要将读文件的函数进行改造,将其封装成为一个promise对象:

var fs = require('fs');
var readFile = function(fileName) {
return new Promise(function(resolve, reject) {
fs.readFile(fileName, function(err, data) {
if (err) {
reject(err);
} else {
resolve(data);
}
})
})
}
//下面是readFile使用的示例
var tmp = readFile('./file1');
tmp.then(function(data) {
console.log(data.toString());
})

关于promise的使用,如果不熟悉的可以去看看es6中的语法。(近期我也会写一篇文章来教大家如何用es5的语法来自己实现一个具备基本功能的promise对象,敬请期待呦^_^)

简单来讲,promise可以实现将回调函数通过 promise.then(callback)的形式来写。但是我们的目标是配合generator,真正实现如丝般顺滑的同步化写法,如何配合呢,看这段代码:

var fs = require('fs');
var readFile = function(fileName) {
return new Promise(function(resolve, reject) {
fs.readFile(fileName, function(err, data) {
if (err) {
reject(err);
} else {
resolve(data);
}
})
})
}
//将读文件的过程放在generator中
var gen = function*() {
var data = yield readFile('./file1');
console.log(data.toString());
data = yield readFile('./file2');
console.log(data.toString());
}
//手动执行generator
var g = gen();
var another = g.next();
//another.value就是返回的promise对象
another.value.then(function(data) {
//再次调用g.next从断点处执行generator,并将data作为参数传回
var another2 = g.next(data);
another2.value.then(function(data) {
g.next(data);
})
})

上述代码中,我们在generator中yield了readFile,回调语句代码写在yield之后的代码中,完全是同步的写法,实现了文章一开头的设想。

而yield之后,我们得到的是一个another.value是一个promise对象,我们可以使用then语句定义回调函数,函数的内容呢,则是将读取到的data返回给generator并继续让generator从断点处执行。

基本上这就是异步回调同步化最核心的原理,事实上如果大家熟悉python,会知道python中有"协程"的概念,基本上也是使用generator来实现的(我想当怀疑es6的generator就是借鉴了python~)

不过呢,上述代码我们依然是手动执行的。那么同上一篇一样,我们还需要实现一个run函数,用于管理generator的流程,让它能够自动跑起来!

3. 让同步化回调函数自动跑起来:一个run函数的编写

仔细观察上一段代码中手动执行generator的部分,也能发现一个规律,这个规律让我们可以直接写一个递归的函数来代替:

var run=function(gen){
var g;
if(typeof gen.next==='function'){
g=gen;
}else{
g=gen();
}
function next(data){
var tmp=g.next(data);
if(tmp.done){
return ;
}else{
tmp.value.then(next);
}
}
next();
}

函数接收一个generator,并让其中的异步能够自动执行。使用这个run函数,我们来让上一个异步代码自动执行:

var fs = require('fs');
var run = function(gen) {
var g;
if (typeof gen.next === 'function') {
g = gen;
} else {
g = gen();
}
function next(data) {
var tmp = g.next(data);
if (tmp.done) {
return;
} else {
tmp.value.then(next);
}
}
next();
}
var readFile = function(fileName) {
return new Promise(function(resolve, reject) {
fs.readFile(fileName, function(err, data) {
if (err) {
reject(err);
} else {
resolve(data);
}
})
})
}
//将读文件的过程放在generator中
var gen = function*() {
var data = yield readFile('./file1');
console.log(data.toString());
data = yield readFile('./file2');
console.log(data.toString());
}
//下面只需要将gen放入run当中即可自动执行
run(gen);

执行上述代码,即可看到终端依次打印出了file1和file2的内容。

需要指出的是,这里的run函数为了简单起见只支持promise,而实际的co函数还支持thunk等。

这样一来,co函数的两大功能基本就完整介绍了,一个是洋葱模型的流程控制,另一个是异步同步化代码的自动执行。在下一篇文章中,我将带大家对这两个功能进行整合,写出我们自己的一个co函数!

这篇文章的代码同样可以在github上面找到:https://github.com/mly-zju/async-js-demo,其中promise_generator.js就是本篇的示例源码。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript实现维吉尼亚(Vigenere)密码算法实例
Nov 22 Javascript
js判断滚动条是否已到页面最底部或顶部实例
Nov 20 Javascript
JavaScript数组对象赋值用法实例
Aug 04 Javascript
浅谈JS继承_寄生式继承 & 寄生组合式继承
Aug 16 Javascript
基于jQuery实现火焰灯效果导航菜单
Jan 04 Javascript
JS中SetTimeout和SetInterval使用初探
Mar 23 Javascript
bootstrap+jquery项目引入文件报错的解决方法
Jan 22 jQuery
Javascript实现异步编程的过程
Jun 18 Javascript
JavaScript中的回调函数实例讲解
Jan 27 Javascript
node实现简单的增删改查接口实例代码
Aug 22 Javascript
js中调用微信的扫描二维码功能的实现代码
Apr 11 Javascript
Vue Element-ui表单校验规则实现
Jul 09 Vue.js
JS中数据结构与算法---排序算法(Sort Algorithm)实例详解
Jun 17 #Javascript
详解element-ui设置下拉选择切换必填和非必填
Jun 17 #Javascript
JS实现的字符串数组去重功能小结
Jun 17 #Javascript
JavaScript静态作用域和动态作用域实例详解
Jun 17 #Javascript
深入解析koa之中间件流程控制
Jun 17 #Javascript
深入解读Node.js中的koa源码
Jun 17 #Javascript
学习RxJS之JavaScript框架Cycle.js
Jun 17 #Javascript
You might like
php中strstr、strrchr、substr、stristr四个函数的区别总结
2014/09/22 PHP
PHP parse_ini_file函数的应用与扩展操作示例
2019/01/07 PHP
javascript之对系统的toFixed()方法的修正
2007/05/08 Javascript
jquery 元素相对定位代码
2010/10/15 Javascript
jquery自定义属性(类型/属性值)
2013/05/21 Javascript
JS加jquery简单实现标签元素的显示或隐藏
2013/09/23 Javascript
vue-cli入门之项目结构分析
2017/04/20 Javascript
详解如何在vue中使用sass
2017/06/21 Javascript
Vue ElementUI之Form表单验证遇到的问题
2017/08/21 Javascript
JS中图片压缩的方法小结
2017/11/14 Javascript
Vue三种常用传值示例(父传子、子传父、非父子)
2018/07/24 Javascript
基于vue-router 多级路由redirect 重定向的问题
2018/09/03 Javascript
jQuery easyui datagird编辑行删除行功能的实现代码
2018/09/20 jQuery
微信小程序实现天气预报功能(附源码)
2020/12/10 Javascript
[01:45]2014DOTA2 TI预选赛预选赛 大神专访第二弹!
2014/05/20 DOTA
[00:32]DOTA2上海特级锦标赛 COL战队宣传片
2016/03/04 DOTA
[20:30]职业巡回赛回顾
2018/08/09 DOTA
Windows8下安装Python的BeautifulSoup
2015/01/22 Python
python将txt文件读入为np.array的方法
2018/10/30 Python
PyCharm下载和安装详细步骤
2019/12/17 Python
python通过安装itchat包实现微信自动回复收到的春节祝福
2020/01/19 Python
python代码xml转txt实例
2020/03/10 Python
python实现四人制扑克牌游戏
2020/04/22 Python
捷克汽车配件和工具销售网站:TorriaCars
2018/02/26 全球购物
自我评价怎么写正确呢?
2013/12/02 职场文书
交通安全演讲稿
2014/01/07 职场文书
区级文明单位申报材料
2014/05/15 职场文书
机关领导查摆四风思想汇报
2014/09/13 职场文书
一份恶作剧的检讨书
2014/09/13 职场文书
党的群众路线教育实践活动心得体会(医院)
2014/11/03 职场文书
创业分两种人:那么哪些适合创业?,哪些适合不适合创业呢?
2019/08/23 职场文书
Html5页面播放M4a音频文件
2021/03/30 HTML / CSS
tensorflow学习笔记之tfrecord文件的生成与读取
2021/03/31 Python
Python趣味挑战之实现简易版音乐播放器
2021/05/28 Python
Win11如何启用启动修复 ? Win11执行启动修复的三种方法
2022/04/08 数码科技
python运算符之与用户交互
2022/04/13 Python