从源码分析express/koa/redux/axios等中间件的实现方式

const express = require('express');
const app = express();
const port = 3000;
const indexRouter = require('./routes/index');
const usersRouter = require('./routes/users');

app.use(express.json());
app.use(express.urlencoded({  extended: false}));
app.use(express.static(path.join(__dirname, 'public')));

app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

app.get('/', (req, res) => res.send('Hello World!'));
app.get('/user', (req, res) => res.json({ user: 'andy' }));
app.get('/test', (req, res) => res.status(403).send('403'));

app.listen(port, () => console.log(`Example app listening on port ${port}!`));

app.use = function use(fn) {
  var offset = 0;
  var path = '/';

  // ...处理fns、patch等参数
  var fns = flatten(slice.call(arguments, offset));

  // setup router
  this.lazyrouter();
  var router = this._router;

  fns.forEach(function (fn) {
    // non-express app
    if (!fn || !fn.handle || !fn.set) {
      return router.use(path, fn);
    }
    // ... 构造mounted_app方法，然后调用 router.use(path, mounted_app)
  }, this);

  return this;
};

router.use = function use(fn) {
  var offset = 0;
  var path = '/';

  var callbacks = flatten(slice.call(arguments, offset));
  for (var i = 0; i < callbacks.length; i++) {
    var fn = callbacks[i];
    // 中间件是一个Layer对象，其中包含了当前路由匹配相关的正则，以及layer.handle = fn
    var layer = new Layer(path, {
      sensitive: this.caseSensitive,
      strict: false,
      end: false
    }, fn);
    layer.route = undefined;
    // 使用一个数组将中间件对象保存起来
    this.stack.push(layer);
  }
  return this;
};

var app = function(req, res, next) {
  app.handle(req, res, next);
};

app.listen = function listen() {
  var server = http.createServer(this);
  return server.listen.apply(server, arguments);
};

app.handle = function handle(req, res, callback) {
  var router = this._router;

  // final handler
  var done = callback || finalhandler(req, res, {
    env: this.get('env'),
    onerror: logerror.bind(this)
  });
  router.handle(req, res, done);
};

router.handle = function handle(req, res, out) {
  var self = this;
  var idx = 0;
  var stack = self.stack;
  var done = restore(out, req, 'baseUrl', 'next', 'params');
  // ... 省略处理req等方法的代码
  next();

  function next(err) {
    // no more matching layers
    if (idx >= stack.length) {
      setImmediate(done, layerError);
      return;
    }

    // 从 req 获取path，然后根据path从stack中找到下一个匹配的layer
    // ... 根据path从stack中找到对应的layer
    while (match !== true && idx < stack.length) {
      layer = stack[idx++]; // next通过闭包维持了对于idx游标的引用，当调用next时，就会从下一个中间件开始查找
      match = matchLayer(layer, path);
      route = layer.route
      // ...
    }

    // ...处理参数等
    self.process_params(layer, paramcalled, req, res, function (err) {
      if (err) {
        return next(layerError || err);
      }
      if (route) {
        // 执行中间件方法，同时传入next参数
        return layer.handle_request(req, res, next);
      }
    });
  }
};

Layer.prototype.handle_request = function handle(req, res, next) {
  var fn = this.handle; // 前面注册的中间件方法
  // ...
  try {
    fn(req, res, next); // 真正执行中间件的地方
  } catch (err) {
    next(err);
  }
};

// 核心的next机制
handle(req, res, stack) {
  const next = () => {
// 中间件队列出队，拿到第一个匹配的中间件，stack数组是同一个，所以每执行一次next()，都会取出下一个中间件
    const middleware = stack.shift();
    if (middleware) {
// 执行中间件函数
      middleware(req, res, next);
    }
  }
// 立马执行
  next();
}

app.use(function(req, res, next) {
  res.sendFile(filePath, function(err) {
    if (err) {
      next(new Error("Error sending file!"));
    }
  });
});
app.use(function(err, req, res, next) {
    // 记录错误
    console.error(err);
    // 继续到下一个错误处理中间件
    next(err);
});

const http = require('http');
const slice = Array.prototype.slice;

class LikeExpress {
  constructor() {
    // 存放路径和中间件，all中存放的是调用use传入的路径和中间件
    this.routes = {
      all: [],
      get: [],
      post: [],
    };
  }

  // 分离出路径和中间件，info.path中存放路径，info.stack 中存放中间件
  register(path) {
    const info = {};
    if (typeof path === 'string') {
      info.path = path;
      // info.stack 存放所有的中间件
      // 如果第一个参数是路由在取中间件时就要从数组的第2个位置开始取
      // slice.call(arguments, 1) 的作用就是取arguments从第二个位置开始之后的所有元素都取出来并变成数组的形式。
      info.stack = slice.call(arguments, 1);
    } else {
      // 如果第一个参数不是一个路由，那么我们就假定第一个参数是一个根路由
      info.path = '/';
      info.stack = slice.call(arguments, 0);
    }
    return info;
  }

  use() {
    // 实际使用时，参数是通过use传递进来的
    // 将所有的参数传入到register函数中
    const info = this.register.apply(this, arguments);
    // info 是一个对象，info.path 中存放的是路径，info.stack 中存放的是中间件
    this.routes.all.push(info);
  }

  get() {
    const info = this.register.apply(this, arguments);
    this.routes.get.push(info);
  }

  post() {
    const info = this.register.apply(this, arguments);
    this.routes.post.push(info);
  }

  // 匹配use,get或post方法会执行的中间件
  match(method, url) {
    let stack = [];
    if (url === '/favicon.ico') {
      return stack;
    }
    // 获取routes
    let curRoutes = [];
    // concat 是数组中的一个方法，如果没有参数，那么会生成一个当前数组的副本并将其赋值给前面的变量，如果有参数会将参数加入到生成的副本的后面然后将其赋值给变量
    // 如果是use，那么就把use中的路径和中间列表复制到curRoutes中
    // 如果方法是get或post那么下面这句话，由于this.routes.all是undefined，所以会将当前curRoutes生成一个副本赋值给curRoutes，其实一点变化都没有
    curRoutes = curRoutes.concat(this.routes.all);
    // 如果是get或post，那么就把相应的路径和中间件复制到curRoutes中
    curRoutes = curRoutes.concat(this.routes[method]);

    curRoutes.forEach((routeInfo) => {
      // url='/api/get-cookie' routeInfo.path='/'
      // url='/api/get-cookie' routeInfo.path='/api'
      // url='api/get-cookie' routeInfo.path='/api/get-cookie'
      if (url.indexOf(routeInfo.path) === 0) {
        // 匹配成功
        stack = stack.concat(routeInfo.stack);
      }
    });
    return stack;
  }

  // 核心的 next 机制
  handle(req, res, stack) {
    const next = () => {
      // 拿到第一个匹配的中间件
      // shift 取得数组的第一项
      const middleware = stack.shift();
      if (middleware) {
        // 执行中间件函数
        middleware(req, res, next);
      }
    };
    // 定义完后立即执行
    next();
  }


  // callback是一个(req, res) => {} 的函数，结合http-test中的代码去理解
  callback() {
    return (req, res) => {
      // res.json 是一个函数，在express中使用时传入一个对象即可在屏幕中显示出来，这里实现了这个功能
      res.json = (data) => {
        res.setHeader('Content-type', 'application/json');
        res.end(JSON.stringify(data));
      };

      const url = req.url;
      const method = req.method.toLowerCase();
      // 找到需要执行的中间件(通过路径和method，有可能一个需要执行的中间件也没有)
      const resultList = this.match(method, url);
      this.handle(req, res, resultList);
    };
  }

  // express 中listen的作用不仅仅是监听端口，还要创建服务器
  listen(...args) {
    const server = http.createServer(this.callback());
    server.listen(...args);
  }
}

module.exports = () => new LikeExpress();

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

app.use(async ctx => {
  console.log('我是中间件1！')
  await next();
  console.error('第一个中间件执行结束')
});
app.use(async (ctx, next) => {
  console.log('我是中间件2！');
  ctx.response.status = 200;
  ctx.response.body = '<h2>response content</h2>';
  await next();
  console.error('第二个中间件执行结束')
});

app.listen(3000);

// lib/application.js
module.exports = class Application extends Emitter {
    constructor(options) {
        super();
        options = options || {};
        // ...初始化相关参数
        this.middleware = [];
        this.context = Object.create(context);
        this.request = Object.create(request); // request包含header、url、method等多个接口
        this.response = Object.create(response);// response包含status、headers等接口
    }
    use(fn) {
        // 检测fn是不是合格的中间件
        this.middleware.push(fn);
        return this;
    }
    // 通过createServer启动一个node服务
    listen(...args) {
        const server = http.createServer(this.callback());
        return server.listen(...args);
    }

}

class Application extends Emitter {
    // ...
    callback() {
        // 组合中间件
        const fn = compose(this.middleware); // 重点关注此行代码
        if (!this.listenerCount('error')) this.on('error', this.onerror);
        const handleRequest = (req, res) => {
            // `createContext`封装了`http.createServer`中的`request`和`response`对象，并将其挂载到了context上，
            // 这也是我们为什么能拿到`ctx.request`和`ctx.response`的原因
            const ctx = this.createContext(req, res); // 此处创建context
            return this.handleRequest(ctx, fn);
        };
        return handleRequest;
    }
    // 辅助函数  真正的请求回调函数
    handleRequest(ctx, fnMiddleware) {
        const res = ctx.res;
        res.statusCode = 404;
        const onerror = err => ctx.onerror(err);
        // respond实际上是封装了的响应处理函数，在内部调用ctx.resoponse.end(ctx.body)的方式将数据返回给浏览器
        const handleResponse = () => respond(ctx);
        onFinished(res, onerror);
        // 开始执行组合后的中间件函数
        return fnMiddleware(ctx).then(handleResponse).catch(onerror); // 此行代码也很关键
    }
}

function compose(middleware) {
    // ...检查中间件的类型：middleware列表必须为数组，每个中间件必须为函数

    // 返回的就是上面的fnMiddleware，执行fnMiddleware后返回的实际上是一个promise对象
    return function (context, next) {
        let index = -1
        return dispatch(0)
        function dispatch(i) {  // 关键函数dispatch
            // 验证给定的中间件方法中，不能多次next()
            if (i <= index) return Promise.reject(new Error('next() called multiple times'))
            index = i
            let fn = middleware[i]
            // 如果middleware列表已经调用完毕，如果传入了额外的next，则下一次会调用next方法，
            // 可以看见在上面的fnMiddleware中此处并没有传值
            if (i === middleware.length) fn = next
            // 如果无fn了，则表示中间件已经从第一个依次执行到最后一个中间件了
            if (!fn) return Promise.resolve()
            try {
                // 把ctx和next传入到中间件中，可以看见我们在中间件中调用的next实际上就是dispatch.bind(null, i + 1))
                return Promise.resolve(fn(context, dispatch.bind(null, i + 1)));
            } catch (err) {
                return Promise.reject(err)
            }
        }
    }
}

function mid(ctx, next){}
// next被包装成dispatch.bind(null, i + 1))的性能

var p = fn(context, dispatch.bind(null, i + 1)) 
Promise.resolve(p) === p // 如果fn返回的是一个promise对象，则此处返回true

async function mid(ctx, next){
    await next() // 必须在此处暂停等待下一个中间件执行完毕，
}

function logger({ getState, dispatch }) {
    // next代表下一个中间件，action表示当前接收到的动作
    return next => action => {
        console.log("before change", action);
        // 调用 middleware 链中下一个 middleware 的 dispatch。
        let val = next(action);
        console.log("after change", getState(), val);
        return val;
    };
}

let createStoreWithMiddleware = Redux.applyMiddleware(logger)(Redux.createStore)
// 可以把中间件看做是增强版的createStore
let store = createStoreWithMiddleware(reducer, initState);
// 也可以使用createStore第三个参数enhancer
// let store = Redux.createStore(reducer,initState,Redux.applyMiddleware(logger));

const pureMiddleware = ({dispatch, getState}) => next => action => next(action)

// 普通实现
const add = (a, b) => a + b

// 柯里化实现
const add = (a) => (b) => a + b
const add10 = add(10) // 一个可以复用的add(10)函数
add10(20) // 30
add10(30) // 30
const add100 = add(100) // 依次类推，可以生成高度复用的新函数

// 组合函数, 如compose(f, g, h)会返回 (...args) => f(g(h(...args)))
export default function compose(...funcs) {
  if (funcs.length === 0) {
    return arg => arg
  }

  if (funcs.length === 1) {
    return funcs[0]
  }
  // 返回的是一个组合后的函数
  // 调用时，funcs列表中的方法，从后向前依次调用，并将上一个方法的返回值作为作为下一个方法的参数

  return funcs.reduce((a, b) => (...args) => a(b(...args)))
}

var funcs = [
    (a)=>{
        console.log(a)
        return a+1
    },
    (b)=>{
        console.log(b)
        return b+2
    }
]
var res = compose(...funcs)
console.log(res(1)) // 1,3,4，注意调用的顺序

export default function applyMiddleware(...middlewares) {
  // 返回的是一个接收createStore参数的闭包，中间件通过middlewares参数列表维护
  return createStore => (...args) => {
    // 创建原始的store
    const store = createStore(...args)

    let dispatch = () => {
      throw new Error(
        'Dispatching while constructing your middleware is not allowed. ' +
          'Other middleware would not be applied to this dispatch.'
      )
    }
    // 每个中间件都包含统一参数：getState和dispatch
    const middlewareAPI = {
      getState: store.getState,
      dispatch: (...args) => dispatch(...args) // 这里使用闭包，让每个中间件维持对组合dispatch的引用
    }
    // 初始化store时，中间件按参数顺序依次调用，每个中间件返回的是 next => action => next(action) 统一格式
    const chain = middlewares.map(middleware => middleware(middlewareAPI))
    // compose(...chain)返回的是一个组合的 next => action => next(action) 方法
    // compose(...chain)(store.dispatch)会将store.dispatch作为最后一个next中间件传入，返回一个组合后的dispatch
    dispatch = compose(...chain)(store.dispatch)
    // compose是按照从右向左的顺序支持函数列表，因此当在视图中调用dispatch(action)时，只有在最后一个中间件中调用next(action)才会触发真实的store.dispatch(action)
    // 在此之前state未更新，在此之后state已更新，最后一个中间件执行完毕，控制权返回上一个中间件的next后面部分，依次退出调用栈
    // 如果前面某个中间件未调用next，则后面所有的中间件都不会执行
    return {
      ...store,
      dispatch  // 返回一个增强了dispatch的store
    }
  }
}

正常同步调用next，在dispatch前执行next前面的代码部分，在dispatch后执行next后面的部分
mid1 before next -> mid2 before next -> mid3 before next-> dispatch -> mid3 after next -> mid2 after next -> mid1 after next

正常同步调用，如果在mid2中未调用next，则
mid1 before next -> mid2 full -> mid1 after next

如果在mid2中是异步调用next，则
mid1 before nex -> mid2 full sync -> mid1 after next -> mid2 async before next -> mid3 before next -> dispatch -> mid3 after next -> mid2 async after next

function compose(...funcs) {
  return funcs.reduce((a, b) => (...args) => a(b(...args)));
}

function createStore(reducer, middlewares) {
  let currentState;

  function dispatch(action) {
    currentState = reducer(currentState, action);
  }

  function getState() {
    return currentState;
  }
  // 初始化一个随意的dispatch，要求外部在type匹配不到的时候返回初始状态
  // 在这个dispatch后 currentState就有值了。
  dispatch({ type: "INIT" });

  let enhancedDispatch = dispatch;
  // 如果第二个参数传入了middlewares
  if (middlewares) {
    // 用compose把middlewares包装成一个函数
    // 让dis
    enhancedDispatch = compose(...middlewares)(dispatch);
  }

  return {
    dispatch: enhancedDispatch,
    getState
  };
}

const otherDummyMiddleware = dispatch => {
  // 返回一个新的dispatch
  return action => {
    console.log(`type in dummy is ${type}`);
    return dispatch(action);
  };
};

// 这个dispatch其实是otherDummyMiddleware执行后返回otherDummyDispatch
const typeLogMiddleware = dispatch => {
  // 返回一个新的dispatch
  return ({ type, ...args }) => {
    console.log(`type is ${type}`);
    return dispatch({ type, ...args });
  };
};

// 中间件从右往左执行。
const counterStore = createStore(counterReducer, [
  typeLogMiddleware,
  otherDummyMiddleware
]);

console.log(counterStore.getState().count);
counterStore.dispatch({ type: "add", payload: 2 });
console.log(counterStore.getState().count);

// 输出：
// 0
// type is add
// type in dummy is add
// 2

store.subscribeAction({
  before: (action, state) => {
    console.log(`before action ${action.type}`);
  },
  after: (action, state) => {
    console.log(`after action ${action.type}`);
  }
});

import {
  Actions,
  ActionSubscribers,
  ActionSubscriber,
  ActionArguments
} from "./vuex.type";

class Vuex {
  state = {};

  action = {};

  _actionSubscribers = [];

  constructor({ state, action }) {
    this.state = state;
    this.action = action;
    this._actionSubscribers = [];
  }

  dispatch(action) {
    // action前置监听器
    this._actionSubscribers.forEach(sub => sub.before(action, this.state));

    const { type, payload } = action;

    // 执行action
    this.action[type](this.state, payload).then(() => {
      // action后置监听器
      this._actionSubscribers.forEach(sub => sub.after(action, this.state));
    });
  }

  subscribeAction(subscriber) {
    // 把监听者推进数组
    this._actionSubscribers.push(subscriber);
  }
}

const store = new Vuex({
  state: {
    count: 0
  },
  action: {
    async add(state, payload) {
      state.count += payload;
    }
  }
});

store.subscribeAction({
  before: (action, state) => {
    console.log(`before action ${action.type}, before count is ${state.count}`);
  },
  after: (action, state) => {
    console.log(`after action ${action.type},  after count is ${state.count}`);
  }
});

store.dispatch({
  type: "add",
  payload: 2
});

function Axios(instanceConfig) {
  this.defaults = instanceConfig;
  this.interceptors = {
    request: new InterceptorManager(),
    response: new InterceptorManager()
  };
}

axios.interceptors.request.use(
  function(config) {
    // 在发送请求之前做些什么
    return config;
  },
  function(error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

// 添加响应拦截器
axios.interceptors.response.use(
  function(response) {
    // 对响应数据做点什么
    return response;
  },
  function(error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  }
);

axios.interceptors.response.use(func1, func2) { // 在内部存储为
    resolved: func1,
    rejected: func2
}

// 先构造一个对象 存放拦截器
axios.interceptors = {
  request: [],
  response: []
};

// 注册请求拦截器
axios.useRequestInterceptor = (resolved, rejected) => {
  axios.interceptors.request.push({ resolved, rejected });
};

// 注册响应拦截器
axios.useResponseInterceptor = (resolved, rejected) => {
  axios.interceptors.response.push({ resolved, rejected });
};

// 运行拦截器
axios.run = config => {
  const chain = [
    {
      resolved: axios,
      rejected: undefined
    }
  ];

  // 把请求拦截器往数组头部推
  axios.interceptors.request.forEach(interceptor => {
    chain.unshift(interceptor);
  });

  // 把响应拦截器往数组尾部推
  axios.interceptors.response.forEach(interceptor => {
    chain.push(interceptor);
  });

  // 把config也包装成一个promise
  let promise = Promise.resolve(config);

  // 暴力while循环解忧愁
  // 利用promise.then的能力递归执行所有的拦截器
  while (chain.length) { // 核心 精髓
    const { resolved, rejected } = chain.shift();
    promise = promise.then(resolved, rejected);
  }

  // 最后暴露给用户的就是响应拦截器处理过后的promise
  return promise;
};

function InterceptorManager() {
  this.handlers = [];
}
// 添加拦截器
InterceptorManager.prototype.use = function use(fulfilled, rejected) {
  this.handlers.push({
    fulfilled: fulfilled,
    rejected: rejected
  });
  return this.handlers.length - 1;
};
// 取消拦截器
InterceptorManager.prototype.eject = function eject(id) {
  if (this.handlers[id]) {
    this.handlers[id] = null;
  }
};
// 遍历拦截器
InterceptorManager.prototype.forEach = function forEach(fn) {
  utils.forEach(this.handlers, function forEachHandler(h) {
    if (h !== null) {
      fn(h);
    }
  });
};

Axios.prototype.request = function request(config) {
    // ...初始化配置

    // 构建任务链
  var chain = [dispatchRequest, undefined];
  var promise = Promise.resolve(config);
    // 注册请求拦截器
  this.interceptors.request.forEach(function unshiftRequestInterceptors(interceptor) {
    chain.unshift(interceptor.fulfilled, interceptor.rejected);
  });
    // 注册响应拦截器
  this.interceptors.response.forEach(function pushResponseInterceptors(interceptor) {
    chain.push(interceptor.fulfilled, interceptor.rejected);
  });

  while (chain.length) {
    promise = promise.then(chain.shift(), chain.shift());
  }

  return promise;
};

[
    // 请求拦截器是通过unshift逆序调用的
    request2.fulfilled, request2.rejected, 
    request1.fulfilled, request1.rejected, 
    ... , 
    dispatchRequest, undefined, // dispatchRequest是真实发送网络请求的地方
    // 响应拦截器通过push按顺序调用的
    response1.fulfilled, response1.rejected, 
    response2.fulfilled, response2.rejected, 
    ... ,
]

while (chain.length) {
    promise = promise.then(chain.shift(), chain.shift());
}

var CancelToken = axios.CancelToken;
var source = CancelToken.source();

axios.get('/user/12345', {
  cancelToken: source.token
}).catch(function(thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // 处理错误
  }
});

// 取消请求（message 参数是可选的）
// 使用同一个 cancel token 取消多个请求
source.cancel('Operation canceled by the user.');

var CancelToken = axios.CancelToken;
var cancel;

axios.get('/user/12345', {
  cancelToken: new CancelToken(function executor(c) {
    // executor 函数接收一个 cancel 函数作为参数
    cancel = c;
  })
});

// 取消请求
cancel();

function CancelToken(executor) {
  if (typeof executor !== 'function') {
    throw new TypeError('executor must be a function.');
  }

  var resolvePromise;
  this.promise = new Promise(function promiseExecutor(resolve) {
    resolvePromise = resolve;
  });

  var token = this;
  executor(function cancel(message) {
    if (token.reason) {
      // Cancellation has already been requested
      return;
    }
        // 设置reason
    token.reason = new Cancel(message);
    resolvePromise(token.reason);
  });
}

CancelToken.prototype.throwIfRequested = function throwIfRequested() {
  if (this.reason) {
    throw this.reason;
  }
};

function throwIfCancellationRequested(config) {
  if (config.cancelToken) {
    config.cancelToken.throwIfRequested();
  }
}
function dispatchRequest(config) {
  // 判断是否cancelToken是否已经执行了cancel方法，如果已执行，则抛出异常终止后续的promise
  throwIfCancellationRequested(config);
  // ...网路请求逻辑
  return adapter(config).then(function onAdapterResolution(response) {
    throwIfCancellationRequested(config);
    // ...
  },function(){
    throwIfCancellationRequested(config);
    // ...
  })
}