2. Koa中間件與洋蔥模型

1. async await

　爲了更好的理解aysnc、await， 咱們先請求兩個接口

　1. 請求github中的用戶接口

//請求github用戶接口
fetch("//api.github.com/users")
    .then(res => res.json())
    .then(json => console.log(json))

　2. 請求github中的用戶接口後， 請求特定用戶接口　　

fetch("//api.github.com/users")
    .then(res => res.json())
    .then(json => {
      console.log(json)
      fetch("//api.github.com/users/CQzhanghao")
      .then(res => res.json())
      .then(json => console.log(json))
    })
    

　由此咱們能夠看出，代碼的可讀性很差，而咱們這裏僅僅是兩層嵌套。那咱們該怎麼解決這個問題呢？

　咱們能夠嘗試使用下ES7的新語法 async、await， 號稱是解決異步請求的最終方案

 

　3. 用async、await重寫上面兩段請求方法

　　

//請求github用戶接口, 再請求特定用戶
async () => {
  const res = await fetch("//api.github.com/users")
  const json = await res.json()
  console.log(json)
  const res2 = await fetch("//api.github.com/users/CQzhanghao")
  const json2 = await res.json()
  console.log(json2)
}

　　對比一下， 能夠明顯看出用async、await寫出的代碼可讀性很是高， 就像咱們寫同步請求同樣。

 

2. 洋蔥模型

　洋蔥模型是Koa中的一個重要概念， 咱們經過一個例子來看看它是什麼

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

//第一個中間件
app.use(async (ctx, next) => {
  console.log("第一個中間件 next執行前")
  await next()
  console.log("第一個中間件 next執行後")
})

//第二個中間件
app.use(async (ctx, next) => {
  console.log('第二個中間件 next執行前')
  await next()
  console.log('第二個中間件 next執行後')
})

//第三個中間件
app.use(async (ctx, next) => {
  console.log('第三個中間件 next執行前')
  await next()
  console.log('第三個中間件 next執行後')
})

app.listen(3002)

　一箇中間件有兩個參數， 第一個是ctx。ctx是由koa傳入的封裝了request和response的變量，咱們能夠經過它訪問request和response.

　另外一個是next, next是指這個中間件下面的那個中間件，koa裏面的全部功能都是經過中間件來完成的

　在上面的代碼中，咱們能夠使用用await next()執行下一個中間件

　

　因此說， 咱們應該能猜到上述代碼的結果了：

　

 

 　能夠看出， 這執行過程就像一個洋蔥， 從外到裏，再由裏到外。