koa est un nouveau framework web basé sur node Cet article vous présentera le framework koa2 et vous aidera à comprendre et à implémenter quatre modules majeurs requis pour implémenter un framework koa.
Qu'est-ce que le framework koa ?
koa est un nouveau framework web basé sur node. Il a été créé par l'équipe originale du framework express. Il se caractérise par l'élégance, la simplicité, une forte expressivité et un haut degré de liberté. Comparé à Express, il s'agit d'un framework de nœuds plus léger car toutes ses fonctions sont implémentées via des plug-ins. Ce modèle de conception d'architecture de plug-in est très cohérent avec la philosophie Unix. [Apprentissage recommandé : "tutoriel nodejs"]
le framework koa a maintenant été mis à jour vers la version 2.x Cet article part de zéro et explique la structure du code source du framework et les principes de mise en œuvre de koa2. étape par étape, montrant et explication détaillée de plusieurs des concepts les plus importants du code source du framework koa2, puis vous apprendra étape par étape comment implémenter un framework koa2 simple pour vous aider à apprendre et à comprendre koa2 à un niveau plus profond après la lecture. cet article, vérifiez le code source de koa2, je pense que votre réflexion sera très fluide.
Le framework utilisé dans cet article est koa2, qui est différent de koa1 qui utilise la méthode d'exécution generate+co.js, tandis que koa2 utilise async/await, donc le code et la démo de cet article doivent être. exécuté sur le nœud 8 et supérieur, si la version du nœud du lecteur est inférieure, il est recommandé de mettre à niveau ou d'installer babel-cli et d'utiliser babel-node pour exécuter le code impliqué dans cet article.
Structure du code source de koa
L'image ci-dessus est le dossier lib du répertoire de code source de koa2 structure, lib Il y a quatre fichiers principaux de koa2 dans le dossier : application.js, context.js, request.js, Response.js.
application.js
application.js est le fichier d'entrée de koa Il exporte le constructeur qui crée des instances de classe. Il hérite des événements, de sorte que Donnez au framework le. capacité à écouter les événements et à déclencher des événements. L'application expose également certaines API couramment utilisées, telles que toJSON, Listen, Use, etc.
Le principe d'implémentation de Listen est en fait une encapsulation de http.createServer. L'accent est mis sur le rappel passé dans cette fonction, qui inclut la fusion du middleware, le traitement du contexte et le traitement spécial des res.
L'utilisation consiste à collecter des middlewares, à placer plusieurs middlewares dans une file d'attente de cache, puis à combiner et à appeler de manière récursive ces middlewares via le plug-in koa-compose.
context.js
Cette partie est le contexte d'application ctx de koa. En fait, il s'agit d'une simple exposition d'objet. L'accent est mis sur le délégué. le proxy. Ceci est conçu pour la commodité des développeurs. Par exemple, si nous voulons accéder à ctx.repsponse.status, nous pouvons y accéder directement en accédant à ctx.status via un délégué.
request.js, réponse.js
Ces deux parties sont des opérations sur les res et req natifs, et utilisent une grande partie de la syntaxe get et set d'es6 , pour obtenir des en-têtes ou définir des en-têtes, définir le corps, etc. Ceux-ci ne seront pas présentés en détail. Les lecteurs intéressés peuvent lire le code source par eux-mêmes.
Implémentation des quatre modules principaux de koa2
Ce qui précède décrit brièvement la structure générale du cadre du code source de koa2. Ensuite, nous allons implémenter. un framework koa2, l'auteur estime que la compréhension et la mise en œuvre d'un framework koa nécessitent la mise en œuvre de quatre modules principaux, qui sont :
Encapsulation du serveur http de nœud, création du constructeur de classe Koa
Construction d'objets de requête, de réponse et de contexte
Mise en œuvre d'un mécanisme middleware et d'un modèle d'épluchage d'oignon
Capture d'erreurs et gestion des erreurs
Ci-dessous, nous les analyserons et les mettrons en œuvre un par un.
Module 1 : Encapsulation du serveur http du nœud et création du constructeur de classe Koa
En lisant le code source de koa2, nous avons appris que l'application serveur et la surveillance des ports de koa sont en fait basés sur le code natif du nœud. Le code dans la figure ci-dessous est la surveillance du serveur implémentée via le code natif du nœud.
let http = require('http');
let server = http.createServer((req, res) => {
res.writeHead(200);
res.end('hello world');
});
server.listen(3000, () => {
console.log('listenning on 3000');
});Copier après la connexion
Nous devons encapsuler le code natif du nœud ci-dessus en mode koa :
const http = require('http');
const Koa = require('koa');
const app = new Koa();
app.listen(3000);
Copier après la connexion
La première étape pour implémenter koa est d'encapsuler le processus ci-dessus. Pour cela, nous devons créer une application .js. implémente le constructeur de la classe Application :
let http = require('http');
class Application {
constructor() {
this.callbackFunc;
}
listen(port) {
let server = http.createServer(this.callback());
server.listen(port);
}
use(fn) {
this.callbackFunc = fn;
}
callback() {
return (req, res) => {
this.callbackFunc(req, res);
};
}
}
module.exports = Application;Copier après la connexion
Créez ensuite example.js, introduisez application.js et exécutez l'instance de serveur pour démarrer le code de surveillance :
let Koa = require('./application');
let app = new Koa();
app.use((req, res) => {
res.writeHead(200);
res.end('hello world');
});
app.listen(3000, () => {
console.log('listening on 3000');
});Copier après la connexion
现在在浏览器输入localhost:3000即可看到浏览器里显示“hello world”。现在第一步我们已经完成了，对http server进行了简单的封装和创建了一个可以生成koa实例的类class，这个类里还实现了app.use用来注册中间件和注册回调函数，app.listen用来开启服务器实例并传入callback回调函数，第一模块主要是实现典型的koa风格和搭好了一个koa的简单的架子。接下来我们开始编写和讲解第二模块。
模块二：构造request、response、context对象
阅读koa2的源码得知，其中context.js、request.js、response.js三个文件分别是request、response、context三个模块的代码文件。context就是我们平时写koa代码时的ctx，它相当于一个全局的koa实例上下文this，它连接了request、response两个功能模块，并且暴露给koa的实例和中间件等回调函数的参数中，起到承上启下的作用。
request、response两个功能模块分别对node的原生request、response进行了一个功能的封装，使用了getter和setter属性，基于node的对象req/res对象封装koa的request/response对象。我们基于这个原理简单实现一下request.js、response.js，首先创建request.js文件，然后写入以下代码：
let url = require('url');
module.exports = {
get query() {
return url.parse(this.req.url, true).query;
}
};Copier après la connexion
这样当你在koa实例里使用ctx.query的时候，就会返回url.parse(this.req.url, true).query的值。看源码可知，基于getter和setter，在request.js里还封装了header、url、origin、path等方法，都是对原生的request上用getter和setter进行了封装，笔者不再这里一一实现。
接下来我们实现response.js文件代码模块，它和request原理一样，也是基于getter和setter对原生response进行了封装，那我们接下来通过对常用的ctx.body和ctx.status这个两个语句当做例子简述一下如果实现koa的response的模块，我们首先创建好response.js文件，然后输入下面的代码：
module.exports = {
get body() {
return this._body;
},
set body(data) {
this._body = data;
},
get status() {
return this.res.statusCode;
},
set status(statusCode) {
if (typeof statusCode !== 'number') {
throw new Error('something wrong!');
}
this.res.statusCode = statusCode;
}
};Copier après la connexion
以上代码实现了对koa的status的读取和设置，读取的时候返回的是基于原生的response对象的statusCode属性，而body的读取则是对this._body进行读写和操作。这里对body进行操作并没有使用原生的this.res.end，因为在我们编写koa代码的时候，会对body进行多次的读取和修改，所以真正返回浏览器信息的操作是在application.js里进行封装和操作。
现在我们已经实现了request.js、response.js，获取到了request、response对象和他们的封装的方法，然后我们开始实现context.js，context的作用就是将request、response对象挂载到ctx的上面，让koa实例和代码能方便的使用到request、response对象中的方法。现在我们创建context.js文件，输入如下代码：
let proto = {};
function delegateSet(property, name) {
proto.__defineSetter__(name, function (val) {
this[property][name] = val;
});
}
function delegateGet(property, name) {
proto.__defineGetter__(name, function () {
return this[property][name];
});
}
let requestSet = [];
let requestGet = ['query'];
let responseSet = ['body', 'status'];
let responseGet = responseSet;
requestSet.forEach(ele => {
delegateSet('request', ele);
});
requestGet.forEach(ele => {
delegateGet('request', ele);
});
responseSet.forEach(ele => {
delegateSet('response', ele);
});
responseGet.forEach(ele => {
delegateGet('response', ele);
});
module.exports = proto;Copier après la connexion
context.js文件主要是对常用的request和response方法进行挂载和代理，通过context.query直接代理了context.request.query，context.body和context.status代理了context.response.body与context.response.status。而context.request，context.response则会在application.js中挂载
本来可以用简单的setter和getter去设置每一个方法，但是由于context对象定义方法比较简单和规范，在koa源码里可以看到，koa源码用的是__defineSetter__和__defineSetter__来代替setter/getter每一个属性的读取设置，这样做主要是方便拓展和精简了写法，当我们需要代理更多的res和req的方法的时候，可以向context.js文件里面的数组对象里面添加对应的方法名和属性名即可。
目前为止，我们已经得到了request、response、context三个模块对象了，接下来就是将request、response所有方法挂载到context下，让context实现它的承上启下的作用，修改application.js文件，添加如下代码：
let http = require('http');
let context = require('./context');
let request = require('./request');
let response = require('./response');
createContext(req, res) {
let ctx = Object.create(this.context);
ctx.request = Object.create(this.request);
ctx.response = Object.create(this.response);
ctx.req = ctx.request.req = req;
ctx.res = ctx.response.res = res;
return ctx;
}Copier après la connexion
可以看到，我们添加了createContext这个方法，这个方法是关键，它通过Object.create创建了ctx，并将request和response挂载到了ctx上面，将原生的req和res挂载到了ctx的子属性上，往回看一下context/request/response.js文件，就能知道当时使用的this.res或者this.response之类的是从哪里来的了，原来是在这个createContext方法中挂载到了对应的实例上，构建了运行时上下文ctx之后，我们的app.use回调函数参数就都基于ctx了。
模块三：中间件机制和剥洋葱模型的实现
目前为止我们已经成功实现了上下文context对象、 请求request对象和响应response对象模块，还差一个最重要的模块，就是koa的中间件模块，koa的中间件机制是一个剥洋葱式的模型，多个中间件通过use放进一个数组队列然后从外层开始执行，遇到next后进入队列中的下一个中间件，所有中间件执行完后开始回帧，执行队列中之前中间件中未执行的代码部分，这就是剥洋葱模型，koa的中间件机制。
koa的剥洋葱模型在koa1中使用的是generator + co.js去实现的，koa2则使用了async/await + Promise去实现的，接下来我们基于async/await + Promise去实现koa2中的中间件机制。首先，假设当koa的中间件机制已经做好了，那么它是能成功运行下面代码的：
let Koa = require('../src/application');
let app = new Koa();
app.use(async (ctx, next) => {
console.log(1);
await next();
console.log(6);
});
app.use(async (ctx, next) => {
console.log(2);
await next();
console.log(5);
});
app.use(async (ctx, next) => {
console.log(3);
ctx.body = "hello world";
console.log(4);
});
app.listen(3000, () => {
console.log('listenning on 3000');
});Copier après la connexion
运行成功后会在终端输出123456，那就能验证我们的koa的剥洋葱模型是正确的。接下来我们开始实现，修改application.js文件，添加如下代码：
compose() {
return async ctx => {
function createNext(middleware, oldNext) {
return async () => {
await middleware(ctx, oldNext);
}
}
let len = this.middlewares.length;
let next = async () => {
return Promise.resolve();
};
for (let i = len - 1; i >= 0; i--) {
let currentMiddleware = this.middlewares[i];
next = createNext(currentMiddleware, next);
}
await next();
};
}
callback() {
return (req, res) => {
let ctx = this.createContext(req, res);
let respond = () => this.responseBody(ctx);
let onerror = (err) => this.onerror(err, ctx);
let fn = this.compose();
return fn(ctx);
};
}Copier après la connexion
koa通过use函数，把所有的中间件push到一个内部数组队列this.middlewares中，剥洋葱模型能让所有的中间件依次执行，每次执行完一个中间件，遇到next()就会将控制权传递到下一个中间件，下一个中间件的next参数，剥洋葱模型的最关键代码是compose这个函数：
compose() {
return async ctx => {
function createNext(middleware, oldNext) {
return async () => {
await middleware(ctx, oldNext);
}
}
let len = this.middlewares.length;
let next = async () => {
return Promise.resolve();
};
for (let i = len - 1; i >= 0; i--) {
let currentMiddleware = this.middlewares[i];
next = createNext(currentMiddleware, next);
}
await next();
};
}Copier après la connexion
createNext函数的作用就是将上一个中间件的next当做参数传给下一个中间件，并且将上下文ctx绑定当前中间件，当中间件执行完，调用next()的时候，其实就是去执行下一个中间件。
for (let i = len - 1; i >= 0; i--) {
let currentMiddleware = this.middlewares[i];
next = createNext(currentMiddleware, next);
}Copier après la connexion
上面这段代码其实就是一个链式反向递归模型的实现，i是从最大数开始循环的，将中间件从最后一个开始封装，每一次都是将自己的执行函数封装成next当做上一个中间件的next参数，这样当循环到第一个中间件的时候，只需要执行一次next()，就能链式的递归调用所有中间件，这个就是koa剥洋葱的核心代码机制。
到这里我们总结一下上面所有剥洋葱模型代码的流程，通过use传进来的中间件是一个回调函数，回调函数的参数是ctx上下文和next，next其实就是控制权的交接棒，next的作用是停止运行当前中间件，将控制权交给下一个中间件，执行下一个中间件的next()之前的代码，当下一个中间件运行的代码遇到了next()，又会将代码执行权交给下下个中间件，当执行到最后一个中间件的时候，控制权发生反转，开始回头去执行之前所有中间件中剩下未执行的代码，这整个流程有点像一个伪递归，当最终所有中间件全部执行完后，会返回一个Promise对象，因为我们的compose函数返回的是一个async的函数，async函数执行完后会返回一个Promise，这样我们就能将所有的中间件异步执行同步化，通过then就可以执行响应函数和错误处理函数。
当中间件机制代码写好了以后，运行我们的上面的例子，已经能输出123456了，至此，我们的koa的基本框架已经基本做好了，不过一个框架不能只实现功能，为了框架和服务器实例的健壮，还需要加上错误处理机制。
模块四：错误捕获和错误处理
要实现一个基础框架，错误处理和捕获必不可少，一个健壮的框架，必须保证在发生错误的时候，能够捕获到错误和抛出的异常，并反馈出来，将错误信息发送到监控系统上进行反馈，目前我们实现的简易koa框架还没有能实现这一点，我们接下加上错误处理和捕获的机制。
throw new Error('oooops');
Copier après la connexion
基于现在的框架，如果中间件代码中出现如上错误异常抛出，是捕获不到错误的，这时候我们看一下application.js中的callback函数的return返回代码，如下：
return fn(ctx).then(respond);
Copier après la connexion
可以看到，fn是中间件的执行函数，每一个中间件代码都是由async包裹着的，而且中间件的执行函数compose返回的也是一个async函数，我们根据es7的规范知道，async返回的是一个promise的对象实例，我们如果想要捕获promise的错误，只需要使用promise的catch方法，就可以把所有的中间件的异常全部捕获到，修改后callback的返回代码如下：
return fn(ctx).then(respond).catch(onerror);
Copier après la connexion
现在我们已经实现了中间件的错误异常捕获，但是我们还缺少框架层发生错误的捕获机制，我们希望我们的服务器实例能有错误事件的监听机制，通过on的监听函数就能订阅和监听框架层面上的错误，实现这个机制不难，使用nodejs原生events模块即可，events模块给我们提供了事件监听on函数和事件触发emit行为函数，一个发射事件，一个负责接收事件，我们只需要将koa的构造函数继承events模块即可，构造后的伪代码如下：
let EventEmitter = require('events');class Application extends EventEmitter {}Copier après la connexion
继承了events模块后，当我们创建koa实例的时候，加上on监听函数，代码如下：
let app = new Koa();
app.on('error', err => { console.log('error happends: ', err.stack);
});Copier après la connexion
这样我们就实现了框架层面上的错误的捕获和监听机制了。总结一下，错误处理和捕获，分中间件的错误处理捕获和框架层的错误处理捕获，中间件的错误处理用promise的catch，框架层面的错误处理用nodejs的原生模块events，这样我们就可以把一个服务器实例上的所有的错误异常全部捕获到了。至此，我们就完整实现了一个轻量版的koa框架了。
结尾
前为止，我们已经实现了一个轻量版的koa框架了，我们实现了封装node http server、创建Koa类构造函数、构造request、response、context对象、中间件机制和剥洋葱模型的实现、错误捕获和错误处理这四个大模块，理解了这个轻量版koa的实现原理，再去看koa2的源码，你就会发现一切都豁然开朗，koa2的源码无非就是在这个轻量版基础上加了很多工具函数和细节的处理，限于篇幅笔者就不再一一介绍了。
更多编程相关知识，请访问：编程视频！！
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
