ECharts的基本使用（二）：KOA2入门【第三日学习笔记】

KOA2的使用

一、KOA2的介绍

· 基于 Node.js 平台的Web服务器框架
· 由 Express 原班人马打造

Express Koa , Koa2 都是 Web 服务器的框架,他们之间的差别和关系可以通过下面这个表格表出：

框架名	作用	异步处理
Express	web 框架	回调函数
Koa	web 框架	Generator+yield
Koa2	web 框架	async/await

注意：
1.环境依赖 Node v7.6.0 及以上
由于 Koa2 它是支持 async 和 await ，所以它对 Node 的版本是有要求的，它要求 Node 的版本至少是在7.6级以上，因为语法 async和await 是在 Node7.6 版本之后出现才支持
2.洋葱模型的中间件
如下图所示, 对于服务器而言，它其实就是来处理一个又一个的请求， Web 服务器接收由浏览器发过来的一个又一个请求之后，它形成一个又一个的响应返回给浏览器. 而请求到达我们的服务器是需要经过程序处理的,程序处理完之后才会形成响应，返回给浏览器，我们服务器处理请求的这一块程序，在 Koa2 的世界当中就把它称之为中间件。

这种中间件可能还不仅仅只有一个，可能会存在多个，比如上图所示, 它就存在三层中间件，这三层中间件在处理请求的过程以及它调用的顺序为:
1.当一个请求到达咱们的服务器，最先最先处理这个请求的是第一层中间件
2.第一层的中间件在处理这个请求之后，它会把这个请求给第二层的中间件
3.第二层的中间件在处理这个请求之后，它会把这个请求给第三层的中间件
4.第三层中间件内部并没有中间件了, 所以第三层中间件在处理完所有的代码之后，这个请求又回到了第二层的中间件，所以第二层中间件对这个请求经过了两次的处处理
5.第二层的中间件在处理完这个请求之后，又到了第一层的中间件, 所以第一层的中间件也对这个请求经过了两次的处理
这个调用顺序就是洋葱模型, 中间件对请求的处理有一种先进后出的感觉，请求最先到达第一层中间件，而最后也是第一层中间件对请求再次处理。

二、KOA2的快速上手

1.检查 Node 的版本node -v（ Koa2 的使用要求 Node 版本在7.6及以上，可在pycharm打开终端进行）
可能遇到的问题
· nodejs安装
· 调整一些环境配置的问题（CSDN上可以自行查阅）
2.安装 Koa2
npm init -y：快速的创建出 package.json 的文件, 这个文件可以维护项目中第三方包的信息
npm install koa：这个命令可以在线的联网下载最新版本 koa 到当前项目中
3.编写入口文件 app.js
· 创建 Koa 的实例对象
· 编写响应函数(中间件)
· 指明端口号
· 启动服务器
通过 node app.js启动服务器
随即打开浏览器, 在浏览器中输入 127.0.0.1:3000/ 你将会看到浏览器中出现 hello world 的字符
串, 并且在服务器的终端中, 也能看到请求的 url

// 1.创建koa对象
const Koa = require('koa')
const app = new Koa()
// 2.编写响应函数(中间件)
// ctx:上下文,web容器,ctx.request拿到请求对象 ctx.response拿到响应对象
// next: 下一个中间件,下一层中间件是否能够得到执行, 取决于next这个函数有没有被调用
app.use((ctx, next) => {
  console.log(ctx.request.url)
  ctx.response.body = 'hello world!'
})
// 3.绑定端口号 3000
app.listen(3000)

三、KOA2中间件的特点

1.Koa2 的实例对象通过 use 方法加入一个中间件
2.一个中间件就是一个函数,这个函数具备两个参数,分别是 ctx 和 next
3.中间件的执行符合洋葱模型
4.内层中间件能否执行取决于外层中间件的 next 函数是否调用（调用next：next()）

// 1.创建koa对象
const Koa = require('koa')
const app = new Koa()
// 2.编写响应函数(中间件)
// ctx:上下文,web容器,ctx.request拿到请求对象 ctx.response拿到响应对象
// next: 下一个中间件,下一层中间件是否能够得到执行, 取决于next这个函数有没有被调用

// 第一层中间件
app.use((ctx, next) => {
  console.log('第一层中间件...1')
  ctx.response.body = 'hello world!'
  next()//next函数调用
  console.log('第一层中间件...2')
})
// 第二层中间件
app.use((ctx, next) => {
  console.log('第二层中间件...1')
  ![请添加图片描述](https://img-blog.csdnimg.cn/dba2f6ef06174d66a6f65f3ab3ffec73.png)
next()//next函数调用
  console.log('第二层中间件...3')
})
// 第三层中间件
app.use((ctx, next) => {
  console.log('第三层中间件')
  next()//next函数调用
})
// 3.绑定端口号 3000 (ctrl+c关闭服务器)
app.listen(3000)

运行结果：

5.调用 next 函数得到的是 Promise 对象, 如果想得到 Promise 所包装的数据, 可以结合 await 和 async

// 1.创建koa对象
const Koa = require('koa')
const app = new Koa()
// 2.编写响应函数(中间件)
// ctx:上下文,web容器,ctx.request拿到请求对象 ctx.response拿到响应对象
// next: 下一个中间件,下一层中间件是否能够得到执行, 取决于next这个函数有没有被调用

// 第一层中间件
app.use((ctx, next) => {
  console.log('第一层中间件...1')
  ctx.response.body = 'hello world!'
  next()//next函数调用
  console.log('第一层中间件...2')
})
// 第二层中间件
app.use((ctx, next) => {
  console.log('第二层中间件...1')
  const ret = next()//接受next的返回值
  console.log(ret),
  console.log('第二层中间件...2')
})
// 第三层中间件
app.use((ctx, next) => {
  console.log('第三层中间件')
  next()//next函数调用
  return 'i love you'//return 给上层的next中
})
// 3.绑定端口号 3000 (ctrl+c关闭服务器)
app.listen(3000)

得到的是 Promise 对象：
（ret接受next的返回值,ret为promise对象）

await调用需要async修饰:

// 第二层中间件
app.use(async (ctx, next) => {
  console.log('第二层中间件...1')
  const ret = await next()//ret接受next的返回值,ret为promise对象
  console.log(ret),
  console.log('第二层中间件...2')
})