從零組裝新工具 - Koa2

時間 2019-11-10

標籤組裝工具 koa2 koa 简体版

原文原文鏈接

原由

做爲一個前端，Node.js算是必備知識之一。同時由於本身須要作一些後臺性的工做，或者完成一個小型應用。因此學習了Node的Express框架，用於輔助和加速開發。javascript

不過當初本身對Express的學習和了解，並非很深刻。要求也僅僅是停留在能發送靜態文件，構建後臺API，與數據庫完成簡單交互而已。因此當初本身選用Express時，靠的是Express 應用生成器，至關於Express的最佳實踐。
在使用了一段時間以後，被Express的「回調地獄」，「自定義程度不高」等問題所困擾，因而決定更換至新的框架。html

在選擇框架時，遵循了本身學習新技術的原則：前端

要麼找值得學習的，深刻學習並理解。要麼找適合當前業務，能快速解決問題的。不要在具體某某某個技術上糾結過久。java

這句話也是本身看餘果大大的《Web全棧工程師的自我修養》這本書的體會。git

選擇Koa

在上面原則的指導下，很容易的就找到了一款符合本身需求的框架：Koa。
Koa由於應用了ES6的生成器語法，因此很是優雅的解決了Node.js的回調地獄問題。
好比說這樣的Ajax代碼，看起來就比回調函數的寫法優雅不少。es6

function* main() {
  var result = yield request("http://some.url");
  var resp = JSON.parse(result);
  console.log(resp.value);
}

function request(url) {
  makeAjaxCall(url, function(response){
    it.next(response);
  });
}

例子來源： Generator 函數github

雖然yield的寫法有點奇怪，但仍是能夠接受的。數據庫

選擇Koa2

同時在Koa的github首頁中，看到了Koa2。
Koa2應用了ES7的Async/Await來替代Koa1中的生成器函數與yield。
因此上一段代碼的main函數，在Koa2里長這樣：express

async function main() {
  var result = await request("http://some.url");
  var resp = JSON.parse(result);
  console.log(resp.value);
}

使用了Async/Await後，整段代碼是變的更加好看的。npm

理解Koa的中間件

在一開始學習Koa時，是不太理解Koa的中間件級聯這個概念的。
就是下圖這玩意。

這個算是Koa的核心概念了，不理解這個，只能安安心心繼續用Express。

還好本身平時愛去看各類開發大會的視頻，來提高本身的眼界。因此昨晚正好在慕課網看到了《阿里D2前端技術論壇——2015融合》的大會視頻，便開心的點開學習。
而第一篇《用 Node.js 構建海量頁面渲染服務——by 不四》講的就有Koa框架，還梳理了Koa的中間件級聯這個概念。
在不四前輩介紹完Koa的中間件級聯後，我發現本身好像理解了。
配合着本身以前學習的ES6知識，才發現原來是這樣。
在這兒我貼一段代碼和本身的理解，有興趣的同窗能夠看一看。

var koa = require('koa');
var app = koa();

// x-response-time

app.use(function *(next){
  // 首先啓動第一個中間件，記錄下時間
  var start = new Date;
  // 進入中間件，並等待返回。
  yield next;
  // 返回後，表明操做已完成，記錄結束時間並輸出。
  var ms = new Date - start;
  this.set('X-Response-Time', ms + 'ms');
});

// response
app.use(function *(){
  // 最後一箇中間件，將body寫成'Hello World'
  this.body = 'Hello World';
});

app.listen(3000);

整個的流程，會是這樣的：

.middleware1 {
  // (1) do some stuff
  .middleware2 {
    // (2) do some other stuff
    .middleware3 {
      // (3) NO next yield !
      // this.body = 'hello world'
    }
    // (4) do some other stuff later
  }
  // (5) do some stuff lastest and return
}

至此，學習Koa的最後一個難關，也被攻克了。