koa-static 实现

前言

狭义中间件 请求/拦截，最典型的场景是 Koa.js 传输静态文件中间件的实现koa-send。Koa.js 官方对 koa-send 进行二次封装，推出了koa-static 中间件，目标是用于做静态服务器或者项目静态资源管理。

本节主要以官方的 koa-static 中间件为参考，基于上一节实现的最简单koa-send, 实现了一个最简单的koa-static 中间件，方便原理讲解和后续二次自定义优化开发。

实现步骤

  • step 01 配置静态资源绝对目录地址
  • step 02 判断是否支持等待其他请求
  • step 03 判断是否为 GET 和 HEAD 类型的请求
  • step 04 通过koa-send 中间件读取和返回静态文件

实现源码

demo源码

https://github.com/chenshenhai/koajs-design-note/tree/master/demo/chapter-04-03

  1. ## 安装依赖
  2. npm i
  4. ## 执行 demo
  5. npm run start
  7. ## 最后启动chrome浏览器访问
  8. ##  http://127.0.0.1:3000/index.html

koa-static 依赖

koa-send 中间件，这里只用了上一节实现的最简单koa-send

koa-static 解读

  1. const {resolve} = require('path');
  2. const send = require('./send');
  4. function statics(opts = {
  5.   root: ''
  6. }) {
  7.   opts.root = resolve(opts.root);
  9.   // 是否需要等待其他请求
  10.   if (opts.defer !== true) {
  11.     // 如果需要等待其他请求
  12.     return async function statics(ctx, next) {
  13.       let done = false;
  15.       if (ctx.method === 'HEAD' || ctx.method === 'GET') {
  16.         try {
  17.           await send(ctx, ctx.path, opts);
  18.           done = true;
  19.         } catch (err) {
  20.           if (err.status !== 404) {
  21.             throw err;
  22.           }
  23.         }
  24.       }
  26.       if (!done) {
  27.         await next();
  28.       }
  29.     };
  30.   } else {
  31.     // 如果不需要等待其他请求
  32.     return async function statics(ctx, next) {
  33.       await next();
  35.       if (ctx.method !== 'HEAD' && ctx.method !== 'GET') {
  36.         return;
  37.       }
  39.       if (ctx.body != null || ctx.status !== 404) {
  40.         return;
  41.       }
  43.       try {
  44.         await send(ctx, ctx.path, opts);
  45.       } catch (err) {
  46.         if (err.status !== 404) {
  47.           throw err;
  48.         }
  49.       }
  50.     };
  51.   }
  52. }
  54. module.exports = statics;

koa-static 使用

  1. const path = require('path');
  2. const Koa = require('koa');
  3. const statics = require('./index');
  5. const app = new Koa();
  7. const root = path.join(__dirname, './public');
  8. app.use(statics({ root }));
  10. app.use(async(ctx, next) => {
  11.   if (ctx.path === '/hello') {
  12.     ctx.body = 'hello world';
  13.   }
  14. });
  16. app.listen(3000);
  17. console.log('listening on port 3000');

附录

参考