node进阶一文带你快速入门koa框架

Posted 2023-03-31 前端小白在前进

✅ 作者简介：一名普通本科大三的学生，致力于提高前端开发能力
✨ 个人主页：前端小白在前进的主页
🔥 系列专栏 ： node.js学习专栏
⭐️ 个人社区 : 个人交流社区
🍀 学习格言: ☀️ 打不倒你的会使你更强！☀️
💯 刷题网站：这段时间有许多的小伙伴在问有没有什么好的刷题网站，博主在这里给大家推荐一款刷题网站:👉点击访问牛客网👈牛客网支持多种编程语言的学习，各大互联网大厂面试真题，从基础到拔高，快来体验一下吧！

---

---

🔥前言

在现阶段项目开发过程中，虽然express框架仍然占据着主导的地位，但是有部分的公司也使用了Koa框架开发，那么我们仍然需要学习一下Koa框架，本篇文章将从Koa框架的入门以及与Express框架的不同之处做为切入点去讲解！

📃目录

• Koa框架简介
• Koa框架的优点
• Koa框架的缺点
• 快速开始
• • 安装Koa
  • Hello Koa
  • ctx对象
• Koa对比Express
• • 更轻量
  • Context对象
  • 异步流程控制
  • 中间件模型(洋葱模型)
• 小结

Koa框架简介

koa 是由 Express 原班人马打造的，致力于成为一个更小、更富有表现力、更健壮的 Web 框架。使用 koa 编写 web 应用，通过组合不同的 generator，可以免除重复繁琐的回调函数嵌套，并极大地提升错误处理的效率。koa 不在内核方法中绑定任何中间件，它仅仅提供了一个轻量优雅的函数库，使得编写 Web 应用变得得心应手。

Koa框架的优点

• Koa提高了互操作性，健壮性，使编写中间件变得更加愉快。
• 集成了大量的web API，但是没有绑定中间件
• 非常轻量，核心的Koa模块只有大约2K行代码
• 拥有非常好的用户体验
• 通过try / catch更好地处理错误
• 异步控制流，代码可读性更高

Koa框架的缺点

• Koa框架的周边生态并无优势
• 与Express风格的中间件并不兼容
• 对开发者要求可能更高一些

快速开始

安装Koa

npm install koa

注意: Koa需要node v7.6.0以上版本支持，因为内部使用了ES6的特性。

Hello Koa

const Koa = require('koa')
const app = new Koa()

app.use( async ( ctx ) => 
  ctx.body = 'hello koa2' 
  //ctx.body = '<b>hello koa2</b>'  //返回html片段
  //ctx.body = name:'james'  //返回的是json格式数据
)

app.listen(3000)

注意： 我们默认使用的是Koa2,koa2与koa1的最大区别是koa2实现异步是通过async/await，koa1实现异步是通过generator/yield，Koa2更加的便利，所以默认选用Koa2。

---

ctx对象

我们在这里可以明显的发现，Koa与Express不同之处在于中间件的形参传的不一样了，我们在Expess中两个参数req,res在这里被ctx所替代了。

ctx全称是context(汉译:上下文)，这个在所有语言里都有的名词，可以理解为上(request)下(response)沟通的环境，所以koa中把他们两都封装进了ctx对象，koa官方文档里的解释是为了调用方便
ctx.req=ctx.request,ctx.res=ctx.response,ctx.body = ctx.res.body = ctx.response.body

Koa 提供一个 Context 对象，表示一次对话的上下文（包括 HTTP 请求和 HTTP 回复）。通过加工这个对象，就可以控制返回给客户端的内容。例如上方代码中的ctx.body = 'hello koa2' ，在前端页面中会显示hello Koa2

我们可以在终端打印一下ctx对象:

  request: 
    method: 'GET',
    url: '/favicon.ico',
    header: 
      host: 'localhost:3000',
      connection: 'keep-alive',
      'sec-ch-ua': '" Not A;Brand";v="99", "Chromium";v="101", "Google Chrome";v="101"',
      'sec-ch-ua-mobile': '?0',
      'user-agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/101.0.0.0 Safari/537.36',
      'sec-ch-ua-platform': '"Windows"',
      accept: 'image/avif,image/webp,image/apng,image/svg+xml,image/*,*/*;q=0.8',
      'sec-fetch-site': 'same-origin',
      'sec-fetch-mode': 'no-cors',
      'sec-fetch-dest': 'image',
      referer: 'http://localhost:3000/',
      'accept-encoding': 'gzip, deflate, br',
      'accept-language': 'zh-CN,zh;q=0.9,en;q=0.8',
      cookie: 'Webstorm-a5eae5c4=895fa835-890a-4be8-97fa-9d70b377e3fc; _ga=GA1.1.1673643516.1666519138'
    
  ,
  response: 
    status: 200,
    message: 'OK',
    header: [Object: null prototype] 
      'content-type': 'text/html; charset=utf-8',
      'content-length': '17'
    
  ,
  app:  subdomainOffset: 2, proxy: false, env: 'development' ,
  originalUrl: '/favicon.ico',
  req: '<original node req>',
  res: '<original node res>',
  socket: '<original node socket>'

其实我们很容的发现，它里面的request和reponse其实分别是HTTP Request和HTTP Response，随之进行相应的操作就好了!

补充

1. ctx.request与ctx.req的区别:
   ctx.request是context经过封装的请求对象，用起来更直观和简单；ctx.req是context提供的node.js原生HTTP请求对象，可以得到更多的内容。同理ctx.response是context经过封装的响应对象，ctx.res是context提供的node.js原生HTTP响应对象。
2. 绕过Koa的response处理是不被支持的，我们应该去避免使用以下node属性:
   ctx.res.statusCode、ctx.res.writeHead()、ctx.res.write()、ctx.res.end()

---

Koa对比Express

通常都会说 Koa 是洋葱模型，这重点在于中间件的设计。通过分析，会发现 Express 也是类似的，不同的是Express 中间件机制使用了 Callback 实现，这样如果出现异步则可能会使你在执行顺序上感到困惑，因此如果我们想做接口耗时统计、错误处理 Koa 的这种中间件模式处理起来更方便些。最后一点响应机制也很重要，Koa 不是立即响应，是整个中间件处理完成在最外层进行了响应，而 Express 则是立即响应。

更轻量

• koa 不提供内置的中间件；
• koa 不提供路由，而是把路由这个库分离出来了（koa/router）

Context对象

koa增加了一个Context的对象，作为这次请求的上下文对象（在koa2中作为中间件的第一个参数传入）。同时Context上也挂载了Request和Response两个对象。和Express类似，这两个对象都提供了大量的便捷方法辅助开发, 这样的话对于在保存一些公有的参数的话变得更加合情合理。

异步流程控制

​ express采用callback来处理异步， koa v1采用generator，koa v2 采用async/await。

​ generator和async/await使用同步的写法来处理异步，明显好于callback和promise，

中间件模型(洋葱模型)

express基于connect中间件，线性模型；

​ koa中间件采用洋葱模型（对于每个中间件，在完成了一些事情后，可以非常优雅的将控制权传递给下一个中间件，并能够等待它完成，当后续的中间件完成处理后，控制权又回到了自己）

代码示例:
Express与Koa的同步代码比较：
Express：

//同步
var express = require("express")
var app = express()

app.use((req,res,next)=>
    console.log(1)
    next()
    console.log(4)
    res.send("hello")
)
app.use(()=>
    console.log(3)
)

app.listen(3000)

最终的打印结果顺序是134，浅而意见的看出Express框架中间件是线性模型,明显有顺序性。
注意: 在一般情况下我们在express框架中的next()下方不会再书写代码，这里只是做对比使用。
Koa:

//同步
const koa = require("koa")
const app = new koa()

app.use((ctx,next)=>
    console.log(1)
    next()
    console.log(4)
    ctx.body="hello"
)
app.use(()=>
    console.log(3)
)

app.listen(3000)

最终的打印结果顺序是134，从这里其实并不能看出来Koa的洋葱模型，但是下面的异步代码中可以非常清晰的看出洋葱模型。

---

Express与Koa的异步代码比较：
Express(在这里使用了洋葱模型去书写express，可以发现有不合理的地方):

const express = require("express")
const app = express()

app.use(async (req,res,next)=>
    console.log(1)
    await next()
    console.log(4)
    res.send("hello")
)
app.use(async ()=>
    console.log(2)
    await delay(1000)
    console.log(3)
)

function delay(time)
 return new Promise((resolve,reject)=>
    setTimeout(resolve,1000)
 )

最终的打印结果顺序是1243,在这里大家可能有迷惑的地方，我们第一个中间件中已经具有代码await next()了，那么为什么打印结果不是1234呢？那是因为next()并不是一个promise对象，await只会对promise对象起作用!

Express线性模型的写法:

const express = require("express")
const app = express()

app.use(async (req,res,next)=>
    console.log(1)
    await next()
)
app.use(async ()=>
    console.log(2)
    await delay(1000)
    console.log(3)
    console.log(4)
    res.send("hello")
)

function delay(time)
 return new Promise((resolve,reject)=>
    setTimeout(resolve,1000)
 )

最终的打印结果顺序是1234,在这里就可以明显看出来，第一个中间件执行完后，先打印了1,随后进入第二个中间件，先打印出来2,然后等待一秒钟后，打印了34.

Koa洋葱模型写法:

const koa = require("koa")
const app = new koa()

app.use(async (ctx,next)=>
    console.log(1)
    await next()
    console.log(4)
    ctx.body="hello"
) 
app.use(async ()=>
    console.log(2)
    await delay(1)
    console.log(3)
)

function delay(time)
 return new Promise((resolve,reject)=>
    setTimeout(resolve,1000)
 )


app.listen(3000)

最终的打印结果顺序是1234，我们通过分析可以看出来它遵循的就是洋葱模型，第一个中间件打印了1,然后进入第二个中间件，打印2之后，等待一秒，打印出来了3,随后又返回了第一个中间件，打印出4。

通过异步代码的对比，我觉得大家可能看的迷迷糊糊了，可能不明白为什么我们通过打印顺序去观察相应的模型，在实际开发中有什么业务可以满足这种需求呢？假如我们已经进入了一个页面，但是从这个页面再获取一些数据的时候需要携带token才能获取，我们就可以采用洋葱模型。

例如：打印1是代表已经进入了某个页面并且获取了一些公共数据，但是我们现在需要登录用户后才能获取另外一批数据，于是我们进入了第二个中间件，打印2是执行登录过程的业务,登录的进行过程(delay延时1秒钟)度过后，后端返回了token，返回token就是打印3，然后我们又回到第一个中间件，携带token去访问接口获取数据(打印4).

---

小结

Koa框架明显的好处就是轻量级别，并且有着非常良好的异步体验，本文对Koa框架做一个简单的了解，并且区分了与Express框架的不同之处，至于怎么去选择使用哪个框架，在后面的学习中相信会给大家一个答案的，继续加油吧！少年😀😀

---

koa2 从入门到进阶之路

首先我们先来了解一下 Koa 是什么，https://koa.bootcss.com/，这是 Koa 的官方网站，映入眼帘的第一句就是 Koa -- 基于 Node.js 平台的下一代 web 开发框架。

在学习 Koa 之前我们应对 Node.js 有一定的基础，我们都知道：

Node.js 是一个异步的世界，官方 API 支持的都是 callback 形式的异步编程模型，这会带来许多问题，例如:1、callback 嵌套问题 2、异步函数中可能同步调用 callback 返回 数据，带来不一致性。为了解决以上问题 Koa 出现了。

koa 是由 Express 原班人马打造的，致力于成为一个更小、更富有表现力、更健壮的 Web 框架。 使用 koa 编写 web 应用，可以免除重复繁琐的回调函数嵌套， 并极大地提 升错误处理的效率。koa 不在内核方法中绑定任何中间件， 它仅仅提供了一个轻量优雅的 函数库，使得编写 Web 应用变得得心应手。开发思路和 express 差不多，最大的特点就是 可以避免异步嵌套。

Koa2 的安装与使用对 Node.js 的版本也是有要求的，Node.js 是有要求的，它要求 Node.js 版本高于 V7.6。因为 node.js 7.6 版本 开始完全支持 async/await，所以才能完全支持 Koa2。

安装 Koa

安装 Koa 框架和我们以前安装其他模块是一样的。

npm install --save koa / cnpm install --save koa

--save 参数，表示自动修改 package.json 文件，自动添加依赖项。

接下来我们就实战来看一下如何安装使用一个最简单的 Koa 应用并在本地运行。

首先我们先创建一个我们要开发的项目的目录中，然后运行  npm init ，为我们的项目起个名字，然后一路回车，这样就会在我们的项目目录中创建一个最基本的 package.json 的文件，接下来安装我们要使用的 koa 模块  npm install koa --save ，这样我们就引入了 koa 木块，接下来就和 Express 模块是一样的操作流程，我们在项目目录中创建一个 app.js，在 app.js 中写我们的程序就可以了。

最终我们创建的项目目录如下：

我们在 app.js 中写一个简单的案例：

 1 var koa = require("koa");
 2 
 3 var app = new koa();
 4 
 5 // Express 写法
 6 // app.use(function (req, res) {
 7 //     res.send("hello word")
 8 // });
 9 
10 app.use(async (ctx) => {
11     ctx.body = "hello word"
12 });
13 
14 app.listen(3000);

在上面的代码中，我们首先引入 koa 模块，然后创建一个 koa 实例，接下来和 Express 一样的是创建一个中间价，然后写一个异步函数来向前端页面返回数据。

Express 的写法在这里就不做过多解释了，我们来看一下 koa 写法，我们通过 async ()=>{} 的异步方法与前端建立连接，里面会有一个 cxt 的参数，我们可以通过 ctx.body 的形式向前端发送数据。

app.listen(3000); 来监听 3000 端口，我们将程序运行起来，在前端输入 localhost:3000

这样我们就实现了一个最基本的 koa 的小案例，接下来我们会深入介绍 koa 框架。