浅析Express与Koa的区别

写在前面

大家好，我是一溪风月🥸，一名前端工程师，在前面两篇文章中我们学习和理解了Express和Koa，那么这篇文章我们将更加详细的理解它们之间的区别，并且为什么说Koa会是未来的趋势，我们会分析和讲解Express和Koa的优缺点，好了话不多说让我们开始吧！

一.Koa与Express的比较

在学习了这两个框架之后，我们应该已经可以发现了Koa和Express的区别了，首先从框架和设计上来说Express是完整和强大的，其中帮助我们内置了非常多好用的功能，但是Koa是简洁和自由的，它只包含了最核心的功能，并不会对我们使用其他中间件就行限制，甚至app中连最基础的get和post都没有给我提供，我们需要通过自己或者路由来判断请求方式或者其他功能。

因为Express和Koa框架他们的核心都是中间件，但是事实上它们中间件的执行机制上是不一样的，特别是针对某个中间件包含异步操作的时候，所以接下来我们来研究和学习一下express和koa中间件的执行顺序的问题。

二.同步中间件的差异

我们编写一下Koa同步状态下的中间件

js 复制代码

app.use((ctx, next) => {
  console.log("koa middleware001")
  ctx.msg = "aaa"
  next()
  ctx.body = "middleware001"
})

app.use((ctx, next) => {
  console.log("koa middleware002")
  ctx.msg += "bbb"
  next()
})

app.use((ctx, next) => {
  console.log("koa middleware003")
  ctx.msg += "ccc"
})

为了直观的看到代码的执行我们可以打断点看下代码的执行流程。

但是在实际的开发中某些中间件中并不会全都是同步的代码，某些中间件执行的操作很可能是异步的，那么我们再来看下异步的情况，Koa中间件的执行顺序。

js 复制代码

app.use((ctx, next) => {
  console.log("koa middleware001")
  ctx.msg = "aaa"
  next()
  ctx.body = ctx.msg
})

app.use((ctx, next) => {
  console.log("koa middleware002")
  ctx.msg += "bbb"
  next()
})

app.use(async (ctx, next) => {
  console.log("koa middleware003")
  // 网络请求
  const res = await axios.get('http://xxxxxxx')
  ctx.msg += res.data.data.banner
})

然后我们启动一下，通过apifox来发送请求，我们就会发现我们是拿不到接口请求的结果的（接口隐藏）

但是实际的需求中我们可能是需要这个接口请求（异步）的结果的，那么在koa中我们就可以这样做。

js 复制代码

app.use(async (ctx, next) => {
  console.log("koa middleware001")
  ctx.msg = "aaa"
  await next()
  ctx.body = ctx.msg
})

app.use(async (ctx, next) => {
  console.log("koa middleware002")
  ctx.msg += "bbb"
  await next()
})

app.use(async (ctx, next) => {
  console.log("koa middleware003")
  // 网络请求
  const res = await axios.get('http://xxxxxxx')
  ctx.msg += res.data.data.banner
})

然后我们再发送下请求我们就可以看到拿到了结果

💡Tips：如果我们希望等待下一个异步函数的执行结果，那么需要在我们的next函数前面加上await。

然后我们先编写一下Express的同步状态下的中间件

js 复制代码

app.use((req, res, next) => {
  console.log("express middleware001")
  next()
  res.json("express-result-01")
})

app.use((req, res, next) => {
  console.log("express middleware002")
  next()
})

app.use((req, res, next) => {
  console.log("express middleware003")
})

我们可以看到在执行同步代码的时候koa和express的执行顺序完全一样的，没有任何区别，然后我们来看下在异步代码的情况下测试一下Express的中间件的执行过程。

js 复制代码

app.use((req, res, next) => {
  console.log("express middleware001")
  req.msg = "aaa"
  next()
  res.json(req.msg)
})

app.use((req, res, next) => {
  console.log("express middleware002")
  req.msg += "bbb"
  next()
})

app.use(async (req, res, next) => {
  console.log("express middleware003")
  const resData = await axios.get('http://xxxxxxx')
  req.msg += resData.data.data.banner
})

我们发现我们根本拿不到异步获取的数据，并且其实在Express中存在异步的时候我们根本拿不到异步的数据，简而言之我们很难从上到下拿到数据，然后再从下到上返回数据的，虽然社区中有一些比较骇客的方式也能解决这个问题，但是非常的困难，并且也不建议，这是你永远回不去的曾经！

我们来总结下：

在同步状态下Koa和Express执行中间件的时候执行顺序完全没有区别。
在异步情况下只有koa能够从上到下拿到数据再一次返回，Express做不到。
其实在正常开发中我们往往不会遇到这种情况，我们一般会直接在某个中间件中直接返回。

三.Koa洋葱模型

Koa洋葱模型有两层含义：中间件处理代码的过程和Response返回body的过程，其实当我们区分了上述数据从上到下获取数据，然后从下向上返回数据的过程就像洋葱一样，从外到内，然后再从内到外。

六.总结

这篇文章我们到这里就结束了🦜，这篇文章我们简单的对比了一下Express和Koa框架的区别，在同步中间件的执行中Express和Koa都是符合洋葱模型的，但是在中间件的异步执行中其实只有Koa是符合洋葱模型的，这一点是要注意的，但是其实选择使用哪个框架这点带来的影响其实不是很重要，因为在开发中一般不会遇到这种场景的，所以，两个框架的差别理解就好，但是对于我来说，我更喜欢Express~