关于express与koa的使用对比详解


Posted in Javascript onJanuary 25, 2018

前言

提到Node.js开发,不得不提目前炙手可热的2大框架express和koa。Express诞生已有时日,是一个简洁而灵活的web开发框架,使用简单而功能强大。Koa相对更为年轻,是Express框架原班人马基于ES6新特性重新开发的敏捷开发框架,现在可谓风头正劲,大有赶超Express之势。

Express和koa都是服务端的开发框架,服务端开发的重点是对HTTP Request和HTTP Response两个对象的封装和处理,应用的生命周期维护以及视图的处理等。

Express主要基于Connect中间件框架,功能丰富,随取随用,并且框架自身封装了大量便利的功能,比如路由、视图处理等等。而koa主要基于co中间件框架,框架自身并没集成太多功能,大部分功能需要用户自行require中间件去解决,但是由于其基于ES6 generator特性的中间件机制,解决了长期诟病的“callback hell”和麻烦的错误处理的问题,大受开发者欢迎。

以前其实写过一篇express和koa的对比, 但是后来发现里面有不少谬误. 所以一直惦记着纠正一下之前的错误, 尤其关于中间件部分的对比.

这里的express就拿更加简单的connect代替

connect的执行流程
通常我们都说connect的中间件模型是线性的, 也就是一个一个往下执行的, 如下图:

关于express与koa的使用对比详解

这么说当然是没错的, 但是当我们执行下面代码的时候可能会有那么一点小小的困惑:

const connect = require('connect')
const app = connect()
app.use(function m1 (req, res, next) {
 console.log('m1')
 next()
 console.log('m1 end')
})
app.use(function m2 (req, res, next) {
 console.log('m2')
 next()
 console.log('m2 end')
})
app.use(function m3 (req, res, next) {
 console.log('m3')
 res.end('hello')
})
app.listen(8080)

当我们访问http://127.0.0.1:8080的时候, 控制台会打印如下:

m1
m2
m3
m2 end
m1 end

这么个结果跟我们上面的模型似乎有点出入, 不是说线性的吗, 为什么next后面的代码还会继续执行? 当然这个我们再之前已经有过结论了, 有兴趣的可以详细瞧瞧, 我们现在直接拿来结果, connect的中间件模型伪代码表示如下:

http.createServer(function (req, res) {
 m1 (req, res) {
 m2 (req, res) {
 m3 (req, res) {}
 }
 }
})

可以看到就是一层一层嵌套的回调, 那么再把我们之前有点疑问的代码简化一下:

http.createServer(function (req, res) {
 console.log('m1')
 m1 (req, res) {
 console.log('m2')
 m2 (req, res) {
 m3 (req, res) {
 console.log('m3')
 res.end('hello')
 }
 }
 console.log('m2 end')
 }
 console.log('m1 end')
})

千万别被上面的回调绕晕了, 就是很简单的回调函数, 一切都解释的通了: 即使res.end之后, 我们的代码还是要继续往下走的, 可以这么说connect的中间件其实也是洋葱形的, 但是因为作为同步代码, 一般不回这么做罢了, 那么上面我们可以重现描述一下connect的中间件模型了:

关于express与koa的使用对比详解

Koa的执行流程

同样我们再Koa源码分析, 也是说过Koa的中间件模型: 洋葱形

关于express与koa的使用对比详解

以下面代码为例:

const Koa = require('koa')
const app = new Koa()
app.use(async function m1 (ctx, next) {
 console.log('m1')
 await next()
 console.log('m1 end')
})
app.use(async function m2 (ctx, next) {
 console.log('m2')
 await next()
 console.log('m2 end')
})
app.use(async function m3 (ctx) {
 console.log('m3')
 ctx.body = 'hello'
})
app.listen(8080)

访问服务, 输出:

m1
m2
m3
m2 end
m1 end

emm 貌似跟connect没差别, 之前看过一篇文章, 实验到这里得到了一个koa和express的中间件模型没差别的结论, 包括我也是很迷惑, 当然是有差别的, 结论后面讲. 同样这里直接拿出koa中间件的简化模型:

Promise.resolve(async m1 () {
 console.log(m1)
 await Promise.resolve(async m2 () {
 console.log(m2)
 await Promise.resolve(async m3 () {
 console.log(m3)
 ctx.body = 'xxx'
 })
 console.log(m2 end)
 })
 console.log(m1 end)
})

我们知道async/await的作用是'同步化'异步操作(看上去如此, 其实不是, 但是我们不需要去管), 那这里的Promise理所当然的被'同步'了, 也就是说console.log(m3 end)的一切异步操作都可以'同步化'.

结论

说出结论之前我们其实可以想一下, 既然connect的中间件也是洋葱形的, 那么跟koa一样的用法似乎也没啥毛病, 那么我来设想一下, 我们的服务需要取数据库里的的一个用户假设是getUser吧, getUser当然是异步的. 分别来看看connect和koa的做法吧:

// connect
app.use(function (req, res) {
 getUser(user => res.end(user))
})
// Koa
app.use(async (ctx) => {
 const user = await getUser()
 ctx.body = user
})

当然这么看似乎没啥差别. 那直接给出结论吧(憋): connect的中间件是同步, 不会'等'其他异步操作, koa则可以'等'异步操作. 当然你不等也没啥问题.

总结

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

Javascript 相关文章推荐
js 弹出菜单/窗口效果
Oct 30 Javascript
Js制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法
Aug 08 Javascript
使用 TypeScript 重新编写的 JavaScript 坦克大战游戏代码
Apr 07 Javascript
Jquery使用css方法改变样式实例
May 18 Javascript
JS模式之简单的订阅者和发布者模式完整实例
Jun 30 Javascript
jQuery滚动加载图片实现原理
Dec 14 Javascript
大型JavaScript应用程序架构设计模式
Jun 29 Javascript
教你如何在Node.js中使用jQuery
Aug 28 Javascript
JS正则表达式常见用法实例详解
Jun 19 Javascript
详解babel升级到7.X采坑总结
May 12 Javascript
送你43道JS面试题(收藏)
Jun 17 Javascript
JavaScript创建表格的方法
Apr 13 Javascript
在vue项目创建的后初始化首次使用stylus安装方法分享
Jan 25 #Javascript
Vue框架之goods组件开发详解
Jan 25 #Javascript
前端MVVM框架解析之双向绑定
Jan 24 #Javascript
JS运动特效之完美运动框架实例分析
Jan 24 #Javascript
JS运动特效之同时运动实现方法分析
Jan 24 #Javascript
JS运动特效之链式运动分析
Jan 24 #Javascript
Bootstrap popover 实现鼠标移入移除显示隐藏功能方法
Jan 24 #Javascript
You might like
PHP伪静态写法附代码
2008/06/20 PHP
六款帮助你实现惊艳视差滚动效果的jQuery插件
2012/09/14 Javascript
jQuery根据纬度经度查看地图处理程序
2013/05/08 Javascript
JS实现简易图片轮播效果的方法
2015/03/25 Javascript
基于jQuery+JSON的省市二三级联动效果
2015/06/05 Javascript
iscroll.js的上拉下拉刷新时无法回弹的解决方法
2016/02/18 Javascript
JavaScript蒙板(model)功能的简单实现代码
2016/08/04 Javascript
jquery 实现回车登录详解及实例代码
2016/10/23 Javascript
JS中关于事件处理函数名后面是否带括号的问题
2016/11/16 Javascript
网络传输协议(http协议)
2016/11/18 Javascript
浅谈Nodejs中的作用域问题
2016/12/26 NodeJs
javascript实现一个网页加载进度loading
2017/01/04 Javascript
React组件refs的使用详解
2018/02/09 Javascript
收集前端面试题之url、href、src
2018/03/22 Javascript
关于JavaScript中高阶函数的魅力详解
2018/09/07 Javascript
iview实现select tree树形下拉框的示例代码
2018/12/21 Javascript
微信小程序获取用户绑定手机号方法示例
2019/07/21 Javascript
js实现车辆管理系统
2020/08/26 Javascript
[08:08]DOTA2-DPC中国联赛2月28日Recap集锦
2021/03/11 DOTA
python构造icmp echo请求和实现网络探测器功能代码分享
2014/01/10 Python
python登陆asp网站页面的实现代码
2015/01/14 Python
Python中使用bidict模块双向字典结构的奇技淫巧
2016/07/12 Python
浅析Python与Mongodb数据库之间的操作方法
2019/07/01 Python
用python计算文件的MD5值
2020/12/23 Python
Zavvi西班牙:电子游戏、极客服装、Blu-ray、Funko Pop等
2019/05/03 全球购物
MySQL面试题目集锦
2016/04/14 面试题
寒假思想汇报
2014/01/10 职场文书
给小学生的新年寄语
2014/04/04 职场文书
班风学风建设方案
2014/05/06 职场文书
法学专业毕业实习自我鉴定2014
2014/09/27 职场文书
2015关爱留守儿童工作总结
2014/12/12 职场文书
2015年新教师工作总结
2015/04/28 职场文书
七一晚会主持词
2015/06/29 职场文书
中考百日冲刺决心书
2015/09/22 职场文书
Java Optional<Foo>转换成List<Bar>的实例方法
2021/06/20 Java/Android
css实现左上角飘带效果的完整代码
2022/03/18 HTML / CSS