Koa 介紹

• Koa 是一個新的 web 框架，由 Express 幕后的原班人馬打造，致力于成為 web 應用和 API 開發(fā)領域中的一個更小、更富有表現(xiàn)力、更健壯的基石。
  • 官網(wǎng)：https://koajs.com/
  • GitHub 倉庫：https://github.com/koajs/koa
  • 一個翻譯的中文網(wǎng)：https://koa.bootcss.com/
• Koa 的原理和內(nèi)部結構很像 Express，但是語法和內(nèi)部結構進行了升級
• Koa 內(nèi)部使用 ES6 編寫，號稱是下一代 Node.js Web 框架
• 它的主要特點是通過利用 async 函數(shù)，幫你丟棄回調(diào)函數(shù)
  • Koa 1 是基于 ES2015 中的 Generator 生成器函數(shù)結合 CO 模塊
  • Koa 2 完全拋棄了 Generator 和 co，升級為了 ES2017 中的 async/await 函數(shù)
• 正是由于 Koa 內(nèi)部基于最新的異步處理方式，所以使用 Koa 處理異常更加簡單
• Koa 中提供了 context 上下文對象
  • Koa 包裝和擴展了 Nodejs 中的 req 和 res
  • Express 只是擴展了 req 和 res
• Koa 并沒有捆綁任何中間件， 而是提供了一套優(yōu)雅的方法，幫助您快速而愉快地編寫服務端應用程序。
  • Koa 本身并不支持路由、模板、發(fā)送文件、JSONP 等功能，需要單獨安裝對應的中間件
• 有很多開發(fā)工具/框架都是基于 Koa 的
  • Egg.js - 企業(yè)級 Web 開發(fā)框架
  • 構建工具 Vite - Vue 3 構建工具
• Koa vs Express 官方對比
• 其他評價
  • koa 2 好用，設計上的確有優(yōu)勢。優(yōu)勢不在能實現(xiàn)更強的功能，而是可以更簡單地完成功能。
  • koa 2 社區(qū)遠不如 express
  • koa 1 在思想上與 koa 2 是一致的，但是 koa 2 的實現(xiàn)更漂亮
• Awesome Koa - 第三方倉庫，收錄了一些和 Koa 相關的資源，教程、中間件等

Koa 基本使用

使用 Koa 啟動一個 HTTP 服務

npm init -y
# 安裝 koa
npm i koa

// app.js
const Koa = require('koa')const app = new Koa()// Koa 沒有路由系統(tǒng)，只有中間件功能
// ctx:context 上下文對象，包含請求和響應相關方法
app.use(ctx => {// 發(fā)送響應ctx.body = 'Hello Koa'
})app.listen(3000, () => {console.log('server is running on http://localhost:3000')
})

nodemon ./app.js

Koa 中的路由

Koa 本身不自帶路由功能，如果想要對不同的請求路徑進行分發(fā)處理，需要自己手動編碼處理。

app.use(ctx => {const path = ctx.pathconsole.log(path);if (path === '/') {ctx.body = 'home page'} else if (path === '/foo') {ctx.body = 'foo page'} else {ctx.body = '404 Not Found.'}
})

實際上 Koa 將一些功能單獨封裝成 npm 包，其中包括路由功能。

在 Koa.js (github.com) 中搜索 route 倉庫可以找到幾個官方提供的路由工具包，推薦使用 koajs/router，它使用 Express 風格的方法（app.get、app.post 等），詳情參考API 文檔。

# 安裝
npm i @koa/router

// app.js
const Koa = require('koa')
const Router = require('@koa/router')const app = new Koa()
const router = new Router()router.get('/', ctx => {ctx.body = 'home page'
})router.post('/', ctx => {ctx.body = 'post /'
})router.get('/foo', ctx => {ctx.body = 'foo page'
})router.get('/bar', ctx => {// 重定向ctx.redirect('/foo')
})router.get('/users/:id', ctx => {ctx.body = ctx.params
})app// 掛載路由配置.use(router.routes())// 配置允許的請求方法：OPTIONS 請求的 Allow 請求頭.use(router.allowedMethods())app.listen(3000, () => {console.log('server is running on http://localhost:3000')
})

Koa 中的靜態(tài)資源托管

koajs/static 模塊封裝了靜態(tài)資源托管的功能。

npm i koa-static

// app.js
const Koa = require('koa')
const static = require('koa-static')
const path = require('path')const app = new Koa()// http://localhost:3000/css/style.css 訪問 /public/css/style.css 文件
app.use(static(path.join(__dirname, './public')))app.listen(3000, () => {console.log('server is running on http://localhost:3000')
})

Koa 的中間件不能通過第一個參數(shù)設置請求路徑，通過下面的方式給靜態(tài)資源目錄添加虛擬路徑會報錯：

app.use('/public', static(path.join(__dirname, './public')))

可以使用 Koa 的另一個模塊 koajs/mount 將 Koa 應用或中間件裝載到指定路徑：

npm i koa-mount

// mount(<路徑>, <中間件>)
app.use(mount('/public', static(path.join(__dirname, './public'))))

Koa 中間件

中間件執(zhí)行棧

Koa 最大的特色和 Express 一樣，也是完全基于中間件（middleware）構建的 web 框架。

Koa 中間件和 Express 中間件有很大的區(qū)別，Koa 中間件完全基于洋蔥模型（如圖）：

• 多個中間件會形成一個棧結構（middle stack），以“先進后出”（first-in-last-out）的順序執(zhí)行。
• 最外層的中間件首先執(zhí)行。
• 調(diào)用 next 函數(shù)的時候，會把執(zhí)行權交給下一個中間件
• …
• 最內(nèi)層的中間件最后執(zhí)行
• 執(zhí)行結束后，把執(zhí)行權交回上一層的中間件
• …
• 最外層的中間件收回執(zhí)行權后，執(zhí)行 next 函數(shù)后面的代碼

下面通過代碼查看中間件的棧結構：

const one = (ctx, next) => {console.log('>> one')next()console.log('<< one')
}const two = (ctx, next) => {console.log('>> two')next()console.log('<< two')
}const three = (ctx, next) => {console.log('>> three')next()console.log('<< three')
}app.use(one)
app.use(two)
app.use(three)

打印結果：

>> one
>> two
>> three
<< three
<< two
<< one

如果中間件內(nèi)部沒有調(diào)用 next 函數(shù)，那么執(zhí)行權就不會傳遞下去。例如將 two 函數(shù)中的 next() 注釋，打印結果：

>> one
>> two
<< two
<< one

異步中間件

迄今為止，所有例子的中間件都是同步的，不包含異步操作。如果有異步操作（比如讀取數(shù)據(jù)庫、讀取文件），中間件就必須寫成 async 函數(shù)：

const Koa = require('koa')
const path = require('path')
const fsPromises = require('fs').promisesconst app = new Koa()app.use(async (ctx, next) => {const data = await fsPromises.readFile(path.join(__dirname, './views/index.html'))// 設置 content-type 為 text/html// 或者在讀取文件的時候設置編碼為 `utf8`ctx.type = 'html'ctx.body = datanext()
})app.listen(3000, () => {console.log('server is running on http://localhost:3000')
})

合并多個中間件

Koa 默認只能一個一個掛載中間件：

app.use(one)
app.use(two)
app.use(three)

可以使用中間件組合工具 koajs/compose，將多個中間件合并成同一個中間件去掛載。

npm i koa-compose

app.use(compose([one, two, three]))

全局異常處理

下面是捕獲并手動響應錯誤的中間件：

app.use(ctx => {try {JSON.parse('string')ctx.body = 'Hello Koa'} catch (error) {ctx.response.status = 500ctx.response.body = '服務端內(nèi)部錯誤'}
})

也可以使用 Koa 提供的快捷方法 ctx.throw 來響應錯誤：

app.use(ctx => {try {JSON.parse('string')ctx.body = 'Hello Koa'} catch (error) {// ctx.response.status = 500// ctx.response.body = '服務端內(nèi)部錯誤'// ctx.throw(500) // body => Internal Server Errorctx.throw(404) //  body => Not Found}
})

上例是對單個中間件的錯誤捕獲處理，如果要統(tǒng)一的處理程序中的異常，就要利用洋蔥中間件的模型，將捕獲錯誤的代碼寫在最外層：

const Koa = require('koa')
const app = new Koa()// 最外層添加異常捕獲的中間件
app.use((ctx, next) => {try {next()} catch (error) {ctx.response.status = 500ctx.response.body = error.message}
})app.use(ctx => {JSON.parse('string')ctx.body = 'Hello Koa'
})...

可以看到 Koa 處理錯誤的方式相比 Express 方便一些：不需要在每個中間件中 try-catch 捕獲錯誤并將錯誤傳遞給 next。

注意上例使用的都是同步中間件，如果是異步中間件就要在 try-catch 中使用 await：

// 最外層添加異常捕獲的中間件
app.use(async (ctx, next) => {try {// 使用 await 等待下一個中間件處理完成await next()} catch (error) {ctx.response.status = 500ctx.response.body = error.message}
})// 同步中間件：A
app.use((ctx, next) => {next()
})// 異步中間件：B
app.use(async ctx => {// 讀取不存在的文件await fsPromises.readFile('file.txt')
})

但是這樣不會捕獲中間件 B 的錯誤，因為上層的中間件 A 是同步的，并未等待下層中間件的結果，最外層的錯誤處理中間件 await 的是中間件 A 的執(zhí)行結果。

解決辦法有：

// 方案一，同步中間件返回下層中間件的執(zhí)行結果
// 同步中間件：A
app.use((ctx, next) => {return next()
})

// 方案二，將同步中間件改為異步中間件，await next()
// 同步中間件：A
app.use(async (ctx, next) => {await next()
})

這屬于 JS 的 Promise 語法問題，與 Koa 和中間件無關。

建議：所有的中間件都使用 asycn 異步函數(shù)，使用 await 等待 next()。

另一種異步處理方式

除了使用外層中間件的方式捕獲錯誤，Koa 還可以通過監(jiān)聽 error 事件捕獲錯誤：

// 可以在任意位置監(jiān)聽事件
app.on('error', err => {console.log(err)
})

**注意：**使用外層中間件 try-catch 捕獲并處理了錯誤，并不會觸發(fā) error 事件。

如果既要在中間件中處理異常，又要觸發(fā) error 事件，可以在中間件中手動觸發(fā) error 事件：

// 最外層添加異常捕獲的中間件
app.use(async (ctx, next) => {try {await next()} catch (error) {ctx.response.status = 500ctx.response.body = error.message// 觸發(fā) error 事件ctx.app.emit('error', error, ctx)}
})

實際項目中，使用二者之一即可（建議使用中間件）。