原創(chuàng)作者：大哼、阿干、三三、小虎、胖子、小哈、DDU、可木、晃晃
文案校對(duì)：李益、大力萌、Au、DDU、小溪里、小哈
風(fēng)采主播：可木、阿干、Au、DDU、小哈
視頻剪輯：小溪里
主站運(yùn)營(yíng)：給力xi、xty
教程主編：張利濤

視頻地址：https://www.cctalk.com/v/15114923889954

上一節(jié)我們學(xué)習(xí)了中間件的基本概念，本節(jié)主要帶大家學(xué)習(xí)下 koa-router 路由中間件的使用方法。

路由是用于描述 URL 與處理函數(shù)之間的對(duì)應(yīng)關(guān)系的。比如用戶(hù)訪(fǎng)問(wèn) http://localhost:3000/，那么瀏覽器就會(huì)顯示 index 頁(yè)面的內(nèi)容，如果用戶(hù)訪(fǎng)問(wèn)的是 http://localhost:3000/home，那么瀏覽器應(yīng)該顯示 home 頁(yè)面的內(nèi)容。

要實(shí)現(xiàn)上述功能，如果不借助 koa-router 或者其他路由中間件，我們自己去處理路由，那么寫(xiě)法可能如下所示：

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

app.use(async (ctx, next) => {
    if (ctx.request.path === "/") {
        ctx.response.body = "
index page
";
    } else {
        await next();
    }
});
app.use(async (ctx, next) => {
    if (ctx.request.path === "/home") {
        ctx.response.body = "
home page
";
    } else {
        await next();
    }
});
app.use(async (ctx, next) => {
    if (ctx.request.path === "/404") {
        ctx.response.body = "
404 Not Found
";
    } else {
        await next();
    }
});

app.listen(3000, ()=>{
  console.log("server is running at http://localhost:3000")
})

把上述代碼復(fù)制并覆蓋到 app.js 中，然后執(zhí)行以下命令啟動(dòng) node 程序:

node app.js

啟動(dòng)之后在瀏覽器中分別訪(fǎng)問(wèn) http://localhost:3000/、http://localhost:3000/home、http://localhost:3000/404 就能看到相應(yīng)的頁(yè)面了。

上述 app.js 的代碼中，由 async 標(biāo)記的函數(shù)稱(chēng)為『異步函數(shù)』，在異步函數(shù)中，可以用 await 調(diào)用另一個(gè)異步函數(shù)，async 和 await 這兩個(gè)關(guān)鍵字將在 ES7 中引入。參數(shù) ctx 是由 koa 傳入的，我們可以通過(guò)它來(lái)訪(fǎng)問(wèn) request 和 response，next 是 koa 傳入的將要處理的下一個(gè)異步函數(shù)。

注意： 由于 node 在 v7.6.0 中才支持 async 和 await，所以在運(yùn)行 app.js 之前請(qǐng)確保 node 版本正確，或者使用一些第三方的 async 庫(kù)來(lái)支持。

這樣的寫(xiě)法能夠處理簡(jiǎn)單的應(yīng)用，但是，一旦要處理的 URL 多起來(lái)的話(huà)就會(huì)顯得特別笨重。所以我們可以借助 koa-router 來(lái)更簡(jiǎn)單的實(shí)現(xiàn)這一功能。
下面來(lái)介紹一下如何正確的使用 koa-router。

通過(guò) npm 命令直接安裝：

npm i koa-router -S

-S 或者 --save 是為了安裝完成之后能夠在 package.json 的 dependencies 中保留 koa-router，以便于下次只需要執(zhí)行 npm i 或者 npm install 就能夠安裝所有需要的依賴(lài)包。

如果要在 app.js 中使用 koa-router 來(lái)處理 URL，可以通過(guò)以下代碼來(lái)實(shí)現(xiàn)：

const Koa = require("koa")
// 注意 require("koa-router") 返回的是函數(shù):
const router = require("koa-router")()
const app = new Koa()

// 添加路由
 router.get("/", async (ctx, next) => {
    ctx.response.body = `
index page
`
})

router.get("/home", async (ctx, next) => {
    ctx.response.body = "
HOME page
"
})

router.get("/404", async (ctx, next) => {
    ctx.response.body = "
404 Not Found
"
})

// 調(diào)用路由中間件
app.use(router.routes())

app.listen(3000, ()=>{
  console.log("server is running at http://localhost:3000")
})

運(yùn)行 app.js:

node app.js

執(zhí)行完上面的操作之后，我們?cè)跒g覽器中訪(fǎng)問(wèn) http://localhost:3000/：

在瀏覽器中訪(fǎng)問(wèn) http://localhost:3000/home：

在瀏覽器中訪(fǎng)問(wèn) http://localhost:3000/404：

通過(guò)上面的例子，我們可以看到和之前不使用 koa-router 的顯示效果是一樣的。不過(guò)使用了 koa-router 之后，代碼稍微簡(jiǎn)化了一些，而且少了 if 判斷，還有省略了 await next()（因?yàn)闆](méi)有其他中間件需要執(zhí)行，所以這里就先省略了）。

當(dāng)然，除了 GET 方法，koa-router 也支持處理其他的請(qǐng)求方法，比如：

router
  .get("/", async (ctx, next) => {
    ctx.body = "Hello World!";
  })
  .post("/users", async (ctx, next) => {
    // ... 
  })
  .put("/users/:id", async (ctx, next) => {
    // ... 
  })
  .del("/users/:id", async (ctx, next) => {
    // ... 
  })
  .all("/users/:id", async (ctx, next) => {
    // ... 
  });

在 HTTP 協(xié)議方法中，GET、POST、PUT、DELETE 分別對(duì)應(yīng) 查，增，改，刪，這里 router 的方法也一一對(duì)應(yīng)。通常我們使用 GET 來(lái)查詢(xún)和獲取數(shù)據(jù)，使用 POST 來(lái)更新資源。PUT 和 DELETE 使用比較少，但是如果你們團(tuán)隊(duì)采用 RESTful架構(gòu)，就比較推薦使用了。我們注意到，上述代碼中還有一個(gè)all 方法。all 方法用于處理上述方法無(wú)法匹配的情況，或者你不確定客戶(hù)端發(fā)送的請(qǐng)求方法類(lèi)型。

舉個(gè)例子，假設(shè)客戶(hù)端使用 jQuery 來(lái)開(kāi)發(fā)，有如下幾個(gè) ajax 請(qǐng)求：

// 優(yōu)先匹配和 router.get 方法中 url 規(guī)則一樣的請(qǐng)求，如果匹配不到的話(huà)就匹配和 router.all 方法中 url 規(guī)則一樣的請(qǐng)求。
$.ajax({
  method: "GET",
  url: "some.php",
  data: { name: "John" }
}).done(function( msg ) {
  // do something 
});

// 優(yōu)先匹配和 router.post 方法中 url 規(guī)則一樣的請(qǐng)求，如果匹配不到的話(huà)就匹配和 router.all 方法中 url 規(guī)則一樣的請(qǐng)求。
$.ajax({
  method: "POST",
  url: "some.php",
  data: { name: "John" }
}).done(function( msg ) {
  // do something 
});

上面例子中兩個(gè)方法最主要的區(qū)別就是 ajax 中 method 的值，method 的值和 router 的方法一一對(duì)應(yīng)。上述代碼中沒(méi)有處理異常，當(dāng)請(qǐng)求都無(wú)法匹配的時(shí)候，我們可以跳轉(zhuǎn)到自定義的 404 頁(yè)面，比如：

router.all("/*", async (ctx, next) => {
  ctx.response.status = 404;
  ctx.response.body = "
404 Not Found
";
});

* 號(hào)是一種通配符，表示匹配任意 URL。這里的返回是一種簡(jiǎn)化的寫(xiě)法，真實(shí)開(kāi)發(fā)中，我們肯定要去讀取 HTML 文件或者其他模板文件的內(nèi)容，再響應(yīng)請(qǐng)求。關(guān)于這部分的內(nèi)容后面的章節(jié)中會(huì)詳細(xì)介紹。

在開(kāi)發(fā)過(guò)程中我們能夠很方便的生成路由 URL：

router.get("user", "/users/:id", function (ctx, next) {
  // ... 
});

router.url("user", 3);
// => 生成路由 "/users/3" 
 
router.url("user", { id: 3 });
// => 生成路由 "/users/3" 
 
router.use(function (ctx, next) {
  // 重定向到路由名稱(chēng)為 “sign-in” 的頁(yè)面 
  ctx.redirect(ctx.router.url("sign-in"));
})

router.url 方法方便我們?cè)诖a中根據(jù)路由名稱(chēng)和參數(shù)(可選)去生成具體的 URL，而不用采用字符串拼接的方式去生成 URL 了。

koa-router 也支持單個(gè)路由多中間件的處理。通過(guò)這個(gè)特性，我們能夠?yàn)橐粋€(gè)路由添加特殊的中間件處理。也可以把一個(gè)路由要做的事情拆分成多個(gè)步驟去實(shí)現(xiàn)，當(dāng)路由處理函數(shù)中有異步操作時(shí)，這種寫(xiě)法的可讀性和可維護(hù)性更高。比如下面的示例代碼所示：

router.get(
  "/users/:id",
  function (ctx, next) {
    return User.findOne(ctx.params.id).then(function(user) {
      // 首先讀取用戶(hù)的信息，異步操作
      ctx.user = user;
      next();
    });
  },
  function (ctx) {
    console.log(ctx.user);
    // 在這個(gè)中間件中再對(duì)用戶(hù)信息做一些處理
    // => { id: 17, name: "Alex" }
  }
);

我們可以在應(yīng)用中定義多個(gè)路由，然后把這些路由組合起來(lái)用，這樣便于我們管理多個(gè)路由，也簡(jiǎn)化了路由的寫(xiě)法。

var forums = new Router();
var posts = new Router();
 
posts.get("/", function (ctx, next) {...});
posts.get("/:pid", function (ctx, next) {...});
forums.use("/forums/:fid/posts", posts.routes(), posts.allowedMethods());
 
// 可以匹配到的路由為 "/forums/123/posts" 或者 "/forums/123/posts/123"
app.use(forums.routes());

通過(guò) prefix 這個(gè)參數(shù)，我們可以為一組路由添加統(tǒng)一的前綴，和嵌套路由類(lèi)似，也方便我們管理路由和簡(jiǎn)化路由的寫(xiě)法。不同的是，前綴是一個(gè)固定的字符串，不能添加動(dòng)態(tài)參數(shù)。

var router = new Router({
  prefix: "/users"
});
 
router.get("/", ...); // 匹配路由 "/users" 
router.get("/:id", ...); // 匹配路由 "/users/:id" 

koa-router 也支持參數(shù)，參數(shù)會(huì)被添加到 ctx.params 中。參數(shù)可以是一個(gè)正則表達(dá)式，這個(gè)功能的實(shí)現(xiàn)是通過(guò) path-to-regexp 來(lái)實(shí)現(xiàn)的。原理是把 URL 字符串轉(zhuǎn)化成正則對(duì)象，然后再進(jìn)行正則匹配，之前的例子中的 * 通配符就是一種正則表達(dá)式。

router.get("/:category/:title", function (ctx, next) {
  console.log(ctx.params);
  // => { category: "programming", title: "how-to-node" } 
});

通過(guò)上面的例子可以看出，我們可以通過(guò) ctx.params 去訪(fǎng)問(wèn)路由中的參數(shù)，使得我們能夠?qū)?shù)做一些處理后再執(zhí)行后續(xù)的代碼。

使用了 koa-router 之后，代碼簡(jiǎn)潔了很多。下一節(jié)中，我們將學(xué)習(xí)下如何響應(yīng)瀏覽器的各種請(qǐng)求。

下一篇：POST/GET請(qǐng)求——常見(jiàn)請(qǐng)求方式處理

上一篇：iKcamp新課程推出啦～～～～～iKcamp團(tuán)隊(duì)制作｜基于Koa2搭建Node.js實(shí)戰(zhàn)（含視頻）? 中間件用法