koa2中介軟體koa和koa-compose原始碼分析原理(一)

龍恩0707發表於2019-01-01
原始碼

koa是基於nodejs平臺的下一代web開發框架，它是使用generator和promise，koa的中介軟體是一系列generator函式的物件。
當物件被請求過來的時候，會依次經過各個中介軟體進行處理，當有yield next就跳到下一個中介軟體，當中介軟體沒有 yield next執行的時候，然後就會逆序執行前面那些中介軟體剩下的邏輯程式碼，比如看如下的demo：

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

app.use(async (ctx, next) => {
  console.log(11111);
  await next();
  console.log(22222);
});

app.use(async (ctx, next) => {
  console.log(33333);
  await next();
  console.log(44444);
});

app.use(async (ctx, next) => {
  console.log(55555);
  await next();
  console.log(66666);
});
app.listen(3001);
console.log('app started at port 3000...');

// 執行結果為 11111  33333 55555 66666 44444 22222

當我們在瀏覽器訪問 http://localhost:3001 的時候，會分別輸出 11111 33333 55555 66666 44444 22222，如上程式碼是如下執行的：請求的時候，會執行第一個use裡面的非同步函式程式碼，先列印出 11111，然後碰到 await next() 函式，就執行第二個中介軟體，就會列印 33333， 然後又碰到 await next()後，就會跳轉到下一個中介軟體，因此會列印 55555， 然後再碰到 awaitnext() 方法後，由於下面沒有中介軟體了，因此先會列印 666666, 然後依次逆序返回上面未執行完的程式碼邏輯，然後我們就會列印44444，再依次就會列印 22222 了。

它的結構網上都叫洋蔥結構，當初為什麼要這樣設計呢？因為是為了解決複雜應用中頻繁的回撥而設計的級聯程式碼，它並不會把控制權完全交給一箇中介軟體的程式碼，而是碰到next就會去下一個中介軟體，等下面所有中介軟體執行完成後，就會再回來執行中介軟體未完成的程式碼，我們上面說過koa是由一系列generator函式物件的，如果我們不使用koa的async語法的話，我們可以再來看下使用generator函式來實現如下：

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

app.use(function *(next) {
  // 第一步進入
  const start = new Date;
  console.log('我是第一步');
  yield next;

  // 這是第五步進入的
  const ms = new Date - start;
  console.log(ms + 'ms');
});

app.use(function *(next) {
  // 這是第二步進入的
  const start = new Date;
  console.log('我是第二步');
  yield next;
  // 這是第四步進入的
  const ms = new Date - start;
  console.log('我是第四步' + ms);
  console.log(this.url);
});

// response
app.use(function *() {
  console.log('我是第三步');
  this.body = 'hello world';
});
app.listen(3001);
console.log('app started at port 3000...');

執行的結果如下所示：

koa-compose 原始碼分析

原始碼程式碼如下：

'use strict'

/**
 * Expose compositor.
 */

module.exports = compose

/**
 * Compose `middleware` returning
 * a fully valid middleware comprised
 * of all those which are passed.
 *
 * @param {Array} middleware
 * @return {Function}
 * @api public
 */

function compose (middleware) {
  /*
   如果中介軟體不是一個陣列的話，就丟擲錯誤，遍歷中介軟體，如果中介軟體不是一個函式的話，丟擲錯誤。
  */
  if (!Array.isArray(middleware)) throw new TypeError('Middleware stack must be an array!')
  for (const fn of middleware) {
    if (typeof fn !== 'function') throw new TypeError('Middleware must be composed of functions!')
  }

  /**
   * @param {Object} context
   * @return {Promise}
   * @api public
   */

  return function (context, next) {
    // last called middleware #
    let index = -1
    return dispatch(0)
    function dispatch (i) {
      if (i <= index) return Promise.reject(new Error('next() called multiple times'))
      index = i
      let fn = middleware[i]
      if (i === middleware.length) fn = next
      if (!fn) return Promise.resolve()
      try {
        return Promise.resolve(fn(context, dispatch.bind(null, i + 1)));
      } catch (err) {
        return Promise.reject(err)
      }
    }
  }
}

koa部分原始碼如下：

module.exports = class Application extends Emitter {
  /**
   * Initialize a new `Application`.
   *
   * @api public
   */

  constructor() {
    super();

    this.proxy = false;
    this.middleware = [];
    this.subdomainOffset = 2;
    this.env = process.env.NODE_ENV || 'development';
    this.context = Object.create(context);
    this.request = Object.create(request);
    this.response = Object.create(response);
    if (util.inspect.custom) {
      this[util.inspect.custom] = this.inspect;
    }
  }
  /**
   * Use the given middleware `fn`.
   *
   * Old-style middleware will be converted.
   *
   * @param {Function} fn
   * @return {Application} self
   * @api public
   */
  use(fn) {
    if (typeof fn !== 'function') throw new TypeError('middleware must be a function!');
    if (isGeneratorFunction(fn)) {
      deprecate('Support for generators will be removed in v3. ' +
                'See the documentation for examples of how to convert old middleware ' +
                'https://github.com/koajs/koa/blob/master/docs/migration.md');
      fn = convert(fn);
    }
    debug('use %s', fn._name || fn.name || '-');
    this.middleware.push(fn);
    return this;
  }

  /**
   * Return a request handler callback
   * for node's native http server.
   *
   * @return {Function}
   * @api public
   */
  callback() {
    const fn = compose(this.middleware);

    if (!this.listenerCount('error')) this.on('error', this.onerror);

    const handleRequest = (req, res) => {
      const ctx = this.createContext(req, res);
      return this.handleRequest(ctx, fn);
    };

    return handleRequest;
  }

  /**
   * Handle request in callback.
   *
   * @api private
   */

  handleRequest(ctx, fnMiddleware) {
    const res = ctx.res;
    res.statusCode = 404;
    const onerror = err => ctx.onerror(err);
    const handleResponse = () => respond(ctx);
    onFinished(res, onerror);
    return fnMiddleware(ctx).then(handleResponse).catch(onerror);
  }

  /**
   * Initialize a new context.
   *
   * @api private
   */

  createContext(req, res) {
    const context = Object.create(this.context);
    const request = context.request = Object.create(this.request);
    const response = context.response = Object.create(this.response);
    context.app = request.app = response.app = this;
    context.req = request.req = response.req = req;
    context.res = request.res = response.res = res;
    request.ctx = response.ctx = context;
    request.response = response;
    response.request = request;
    context.originalUrl = request.originalUrl = req.url;
    context.state = {};
    return context;
  }

  listen(...args) {
    debug('listen');
    const server = http.createServer(this.callback());
    return server.listen(...args);
  }
}

如上就是koa部分主要程式碼，和 koa-compose 原始碼；首先先看 koa的原始碼中 use 方法，use方法的作用是把所有的方法存入到一個全域性陣列middleware裡面去，然後返回 this，目的使函式能鏈式呼叫。我們之前做的demo如下這樣的：

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

app.use(function *(next) {
  // 第一步進入
  const start = new Date;
  console.log('我是第一步');
  yield next;

  // 這是第五步進入的
  const ms = new Date - start;
  console.log(ms + 'ms');
});

app.use(function *(next) {
  // 這是第二步進入的
  const start = new Date;
  console.log('我是第二步');
  yield next;
  // 這是第四步進入的
  const ms = new Date - start;
  console.log('我是第四步' + ms);
  console.log(this.url);
});

// response
app.use(function *() {
  console.log('我是第三步');
  this.body = 'hello world';
});
app.listen(3001);
console.log('app started at port 3000...');

我們來理解下，我們會把 app.use(function *(){}) 這樣的函式會呼叫use方法，然後use函式內部會進行判斷是不是函式，如果不是函式會報錯，如果是函式的話，就轉換成 async 這樣的函式，然後才會依次存入 middleware這個全域性陣列裡面去，存入以後，我們需要怎麼呼叫呢？我們下面會 使用 app.listen(3001), 這樣啟動一個伺服器，然後我們就會呼叫 koa中的listen這個方法，埠號是3001，listen方法上面有程式碼，我們複製下來一步步來理解下；如下基本程式碼：

listen(...args) {
  debug('listen');
  const server = http.createServer(this.callback());
  return server.listen(...args);
}

如上程式碼，它是通過node基本語法建立一個伺服器，const server = http.createServer(this.callback()); 這句程式碼就會執行 callback這個方法，來呼叫，可能看這個方法，我們不好理解，這個方法和下面的基本方法是類似的；如下node基本程式碼：

var http = require("http")
http.createServer(function(req,res){
  res.writeHead(200,{'Content-Type':'text/html'});
  res.write("holloe  world")    
  res.end("fdsa");
}).listen(8000);

如上程式碼我是建立一個8000伺服器，當我們訪問 http://localhost:8000/ 的時候，我們會呼叫 http.createServer 中的function函式程式碼，然後會列印資料，因此該方法是自動執行的。因此上面的listen方法也是這個道理的，會自動呼叫callback()方法內部程式碼執行的，因此koa中的callback程式碼如下：

/**
 * Return a request handler callback
 * for node's native http server.
 *
 * @return {Function}
 * @api public
 */
callback() {
  const fn = compose(this.middleware);

  if (!this.listenerCount('error')) this.on('error', this.onerror);

  const handleRequest = (req, res) => {
    const ctx = this.createContext(req, res);
    return this.handleRequest(ctx, fn);
  };

  return handleRequest;
}

然後會呼叫 const fn = compose(this.middleware); 這句程式碼，該compose 程式碼會返回一個函式，compose函式程式碼(也就是koa-compose原始碼)如下：

'use strict'

/**
 * Expose compositor.
 */

module.exports = compose

/**
 * Compose `middleware` returning
 * a fully valid middleware comprised
 * of all those which are passed.
 *
 * @param {Array} middleware
 * @return {Function}
 * @api public
 */

function compose (middleware) {
  /*
   如果中介軟體不是一個陣列的話，就丟擲錯誤，遍歷中介軟體，如果中介軟體不是一個函式的話，丟擲錯誤。
  */
  if (!Array.isArray(middleware)) throw new TypeError('Middleware stack must be an array!')
  for (const fn of middleware) {
    if (typeof fn !== 'function') throw new TypeError('Middleware must be composed of functions!')
  }

  /**
   * @param {Object} context
   * @return {Promise}
   * @api public
   */

  return function (context, next) {
    // last called middleware #
    let index = -1
    return dispatch(0)
    function dispatch (i) {
      if (i <= index) return Promise.reject(new Error('next() called multiple times'))
      index = i
      let fn = middleware[i]
      if (i === middleware.length) fn = next
      if (!fn) return Promise.resolve()
      try {
        return Promise.resolve(fn(context, dispatch.bind(null, i + 1)));
      } catch (err) {
        return Promise.reject(err)
      }
    }
  }
}

compose 函式程式碼 傳入一個陣列的中介軟體 middleware, 首先判斷是不是陣列，然後判斷是不是函式，該引數 middleware 就是我們把use裡面的所有函式存入該陣列中的。該函式會返回一個函式。

然後繼續往下執行 callback中的程式碼，如下程式碼執行：

const handleRequest = (req, res) => {
  const ctx = this.createContext(req, res);
  return this.handleRequest(ctx, fn);
};

return handleRequest;

首先會建立一個上下文物件 ctx，具體怎麼建立可以看 koa原始碼中的 createContext 這個方法，然後會呼叫 koa中的handleRequest(ctx, fn)這個方法, 該方法傳遞二個引數，第一個是ctx，指上下文物件，第二個是 compose 函式中返回的函式，koa中的 handleRequest函式程式碼如下：

handleRequest(ctx, fnMiddleware) {
  const res = ctx.res;
  res.statusCode = 404;
  const onerror = err => ctx.onerror(err);
  const handleResponse = () => respond(ctx);
  onFinished(res, onerror);
  return fnMiddleware(ctx).then(handleResponse).catch(onerror);
}

最後一句程式碼 fnMiddleware(ctx).then(handleResponse).catch(onerror); 中的 fnMiddleware(ctx) 就會呼叫koa-compose 中返回的函式的程式碼，compose 函式返回的程式碼如下函式：

return function (context, next) {
  // last called middleware #
  let index = -1
  return dispatch(0)
  function dispatch (i) {
    if (i <= index) return Promise.reject(new Error('next() called multiple times'))
    index = i
    let fn = middleware[i]
    if (i === middleware.length) fn = next
    if (!fn) return Promise.resolve()
    try {
      return Promise.resolve(fn(context, dispatch.bind(null, i + 1)));
    } catch (err) {
      return Promise.reject(err)
    }
  }
}

依次執行 app.use(function(req, res) {}) 中內這樣的函式，會執行如上 dispatch方法，從0開始，也就是說從第一個函式開始執行，然後就會執行完成後，會返回一個promise物件，Promise.resolve(fn(context, dispatch.bind(null, i + 1))); dispatch.bind(null, i + 1)) 該函式的作用是迴圈呼叫dispatch方法，返回promise物件後，執行then方法就會把值返回回來，因此執行所有的 app.use(function(req, res) {}); 裡面這樣的function方法，dispatch(i + 1) 就是將陣列指標移向下一個，執行下一個中介軟體的程式碼，然後一直這樣到最後一箇中介軟體，這就是一直use，然後next方法執行到最後的基本原理，但是我們從上面知道，我們執行完所有的use方法後，並沒有像洋蔥的結構那樣？那怎麼回去的呢？其實回去的程式碼其實就是函式壓棧和出棧，比如我們可以看如下程式碼就可以理解其函式的壓棧和出棧的基本原理了。

如下函式程式碼：

function test1() {
  console.log(1)
  test2();
  console.log(5)
  return Promise.resolve();
}
function test2() {
  console.log(2)
  test3();
  console.log(4)
}

function test3() {
  console.log(3)
  return;
}
test1();

列印的順序分別為 1, 2, 3, 4, 5;

如上程式碼就是koa的執行分析的基本原理了。

相關文章