koa2 自学笔记(二)

2018-03-27  本文已影响0人  BluesCurry

此系列文章会持续更新。。。

这篇主要讲 koa2 的路由

首先，我们先用 koa2 原生实现一个简单的路由然后再使用 koa-router 中间件深入学习，学路由自然先从 URL 入手，请看下面的例子

const koa = require('koa');
const fs = require('fs');
const app = new koa();

app.use(ctx => {
    console.log(ctx.request.url);
});

app.listen(3000);

当我们进入 http://localhost:3000/index 地址时可以发现 Iterm 中打印出了 /index 说明我们可以通过 ctx.request.url 属性拿到 URL 的路径，这样我们就可以利用这个路径找到对应的页面实现路由。

下面实现一个简单的路由，文件目录如下

.
├── index.js
├── package.json
└── view
    ├── 404.html
    ├── index.html
    └── todo.html

404.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>404</title>
</head>
<body>
    404.html
</body>
</html>

todo.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>todo</title>
</head>
<body>
    todo.html
</body>
</html>

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>index</title>
</head>
<body>
    <h1>koa2 demo index page</h1>
    <p>this is a index page</p>
    <ul>
        <li>
            <a href="/">/</a>
        </li>
        <li>
            <a href="/index">/index</a>
        </li>
        <li>
            <a href="/todo">/todo</a>
        </li>
        <li>
            <a href="/404">/404</a>
        </li>
        <li>
            <a href="/nofund">/nofund</a>
        </li>
    </ul>
</body>
</html>

重点是 index.js

const koa = require('koa');
const fs = require('fs');
const app = new koa();

/**
 * 用 Promise 封装一个异步读取文件的方法
 * @param {String} page html 文件名称
 * @returns {Object} Promise 实例对象
 */
function render(page) {
    return new Promise((resolve, reject) => {
        let viewUrl = `./view/${page}`;
        fs.readFile(viewUrl, 'binary', (err, data) => {
            if (err) {
                reject(err);
            } else {
                resolve(data);
            }
        });
    });
}

/**
 * 根据 URL 获取 HTML 内容
 * @param {String} url ctx.request.url
 * @returns {String} 获取到的 HTML 内容
 */
async function route(url) {
    let view = '404.html';
    switch (url) {
        case '/':
        case '/index':
            view = 'index.html';
            break;
        case '/todo':
            view = 'todo.html';
        case '/404':
            view = '404.html';
        default:
            break;
    }
    let html = await render(view);
    return html;
}

app.use( async(ctx) => {
    const html = await route(ctx.request.url);
    ctx.response.body = html;
});

app.listen(3000);
console.log('server is starting at prot 3000!');

执行脚本

node index.js

我们可以看到

route

手写路由很麻烦，所以需要用中间件的形式处理路由，用到了 koa-router

我的学习思路是先用法后原理，所以先学习用法

安装 koa-router

npm i -S koa-router

举一个简单例子：

// app.js
const Koa = require('Koa');
const koaRrouter = require('koa-router');

const app = new Koa();
// 这里可以直接调用函数也可以使用构造函数，const router = new koaRouter();
const router = koaRouter();

router.get(('/', next) => {
  ctx.body = 'this this the home page';
});

app
  .use(router.routes())
  .use(router.allowMethods());

app.listen(3000);

执行 node app.js 打开 http://localhost:3000/ 可以看到

koa-router

这样一个最简单的路由就配置好了~

下面针对上面的例子做一些说明：

  1. get 方法代表一系列 HTTP 的动词方法，如 get | put | post | patch | delete | del。每一种 HTTP 动词对应一种方法，也可以连缀写：
router
  .get('/', (ctx, next) => {
    ctx.body = 'Hello World!';
  })
  .post('/users', (ctx, next) => {...})
  .put('/users/:id', (ctx, next) => {...})
  .del('/users/:id', (ctx, next) => {...})
  .all('/users/:id', (ctx, next) => {...})

注：router.all() 用于表示上述所有的动词方法

  1. 上面代码中，router.get() 方法的第一个参数是匹配的路径，第二个参数对应的函数方法。

同时介绍一下动态路由

// 同时打开网址：http://localhost:3000/user/111
router.get('/user/:id', (ctx, next) => {
  console.log(ctx); // 实际就是 context 对象，但是打印出的结果中并没有看到 params 属性，如果有童鞋知道麻烦指点一二，不胜感激~
  console.log(ctx.params); // { id: '111' }
  console.log(ctx._matchedRoute); // /user/:id
})

使用 ctx._matchedRoute 可以拿到匹配的原路由地址，如果这个路由被命名了也可以通过 ctx. _matchedRouteName 拿到路由的名称，比如：

// 同时打开网址：http://localhost:3000/user/111
router.get('user', '/user/:id', (ctx, next) => {
  console.log(ctx._matchedRouteName); // user
})

下面讲一下 koa-router 的 middleware(中间件)

这是官方给出的实例代码：

router.get(
  '/users/:id',
  (ctx, next) => {
    return User.findOne(ctx.params.id).then(function(user) {
      ctx.user = user;
      next();
    });
  },
  ctx => {
    console.log(ctx.user);
    // => { id: 17, name: "Alex" }
  }
);

middleware 类似于一个过滤器，在客户端和应用程序之间的一个处理请求和相应的方法，比如上面的实例代码，千万不要纠结这个 User 是个什么鬼👻，这是一段伪代码，User.findOne(ctx.params.id) 可以理解为从数据库中异步的获取到指定 id 的用户信息，然后 .then 获取到这个用户信息赋值给 ctx.user，然后执行 next()方法那么下一个中间件就可以拿到拥有用户信息的 ctx，当然还可以往下传，但是需要注意的是中间件的执行顺序，它很像一个洋葱，但并不是一层一层外下拨，而是先执行各个层中 next 之前的代码，然后再从最后一层往上返执行 next 后面的代码，听着是不是有点晕+_+，有一张图可以比较清晰的看懂中间件的执行顺序：

middleware 的执行顺序 
const Koa = require('koa');
const app = new Koa();

app.use((ctx, next) => {
  console.log(1);
  next(); // next 不写会报错
  console.log(5);
});

app.use((ctx, next) => {
  console.log(2);
  next();
  console.log(4);
});

app.use((ctx, next) => {
  console.log(3)
  ctx.body = 'Hello World';
});

app.listen(3000);
// 打印出1、2、3、4、5，但是好像会打印两遍12345，这个还没有深入了解为啥

上述简单的应用打印出1、2、3、4、5，这个其实就是koa中间件控制的核心，一个洋葱结构，从上往下一层一层进来，再从下往上一层一层回去，乍一看很复杂，为什么不直接一层一层下来就结束呢，就像express/connect一样，我们就只要next就去下一个中间件，干嘛还要回来？

其实这就是为了解决复杂应用中频繁的回调而设计的级联代码，并不直接把控制权完全交给下一个中间件，而是碰到next去下一个中间件，等下面都执行完了，还会执行next以下的内容

解决频繁的回调，这又有什么依据呢？举个简单的例子，假如我们需要知道穿过中间件的时间，我们使用koa可以轻松地写出来，但是使用express呢，可以去看下express reponse-time的源码，它就只能通过监听header被write out的时候然后触发回调函数计算时间，但是koa完全不用写callback，我们只需要在next后面加几行代码就解决了（直接使用.then()都可以）

可能还是会不太理解这么做的好处，我觉得这种思路在实际应用中还会经常用到，后面遇到再结合实际应用场景来细读一下~

未完待续...

上一篇下一篇

猜你喜欢

热点阅读