18对比Koa和Redux：分析前端中的中间件理念

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

// 最外层中间件，可以用于兜底 Koa 全局错误
app.use(async (ctx, next) => {
  try {
    // console.log('中间件 1 开始执行')
    // 执行下一个中间件
    await next();
    // console.log('中间件 1 执行结束')
  } catch (error) {
    console.log(`[koa error]: ${error.message}`)
  }
});
// 第二层中间件，可以用于日志记录
app.use(async (ctx, next) => {
  // console.log('中间件 2 开始执行')
  const { req } = ctx;
  console.log(`req is ${JSON.stringify(req)}`);
  await next();
  console.log(`res is ${JSON.stringify(ctx.res)}`);
  // console.log('中间件 2 执行结束')
});

1
2
3
4

use(fn) {
    this.middleware.push(fn);
    return this;
}

1
2
3
4
5

// 通过 createServer 方法启动一个 Node.js 服务
listen(...args) {
    const server = http.createServer(this.callback());
    return server.listen(...args);
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

callback() {
    // 从 this.middleware 数组中，组合中间件
    const fn = compose(this.middleware);

    // handleRequest 方法作为 `http` 模块的 `createServer` 方法参数，该方法通过 `createContext` 封装了 `http.createServer` 中的 `request` 和 `response`对象，并将这两个对象放到 ctx 中
    const handleRequest = (req, res) => {
        const ctx = this.createContext(req, res);
        // 将 ctx 和组合后的中间件函数 fn 传递给 this.handleRequest 方法
        return this.handleRequest(ctx, fn);
    };

    return handleRequest;
}
handleRequest(ctx, fnMiddleware) {
    const res = ctx.res;
    res.statusCode = 404;
    const onerror = err => ctx.onerror(err);
    const handleResponse = () => respond(ctx);
    // on-finished npm 包提供的方法，该方法在一个 HTTP 请求 closes，finishes 或者 errors 时执行
    onFinished(res, onerror);
    // 将 ctx 对象传递给中间件函数 fnMiddleware
    return fnMiddleware(ctx).then(handleResponse).catch(onerror);
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

function compose(middleware) {
    // 这里返回的函数，就是上文中的 fnMiddleware
    return function (context, next) {
        let index = -1
        return dispatch(0)

        function dispatch(i) {
        	  // 
            if (i <= index) return Promise.reject(new Error('next() called multiple times'))
            index = i
            // 取出第 i 个中间件为 fn
            let fn = middleware[i]

            if (i === middleware.length) fn = next

            // 已经取到了最后一个中间件，直接返回一个 Promise 实例，进行串联
            // 这一步的意义是保证最后一个中间件调用 next 方法时，也不会报错
            if (!fn) return Promise.resolve()

            try {
                // 把 ctx 和 next 方法传入到中间件 fn 中，并将执行结果使用 Promise.resolve 包装
                // 这里可以发现，我们在一个中间件中调用的 next 方法，其实就是dispatch.bind(null, i + 1)，即调用下一个中间件
                return Promise.resolve(fn(context, dispatch.bind(null, i + 1)));
            } catch (err) {
                return Promise.reject(err)
            }
        }
    }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

async function middleware1() {
  ...
  await (async function middleware2() {
    ...
    await (async function middleware3() {
      ...
    });
    ...
  });
  ...
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

((req, res) => {
  console.log('第一个中间件');
  ((req, res) => {
    console.log('第二个中间件');
    (async(req, res) => {
      console.log('第三个中间件 => 是一个 route 中间件，处理 /api/test1');
      await sleep(2000)
      res.status(200).send('hello')
    })(req, res)
    console.log('第二个中间件调用结束');
  })(req, res)
  console.log('第一个中间件调用结束')
})(req, res)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

var express = require('express')
var app = express()
var requestTime = function (req, res, next) {
  req.requestTime = Date.now()
  next()
}
app.use(requestTime)
app.get('/', function (req, res) {
  var responseText = 'Hello World!<br>

'
  responseText += '<small>Requested at: ' + req.requestTime + '</small>'
  res.send(responseText)
})
app.listen(3000)

1
2
3

function compose(...funcs: Function[]) {
	return funcs.reduce((a, b) => (...args: any) => a(b(...args)));
}

1
2
3

compose([fn1, fn2, fn3])(args)
=>
compose(fn1, fn2, fn3) (...args) = > fn1(fn2(fn3(...args)))

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

// 这是一个简单的打日志中间件
function logger({ getState, dispatch }) {
    // next 代表下一个中间件包装过后的 dispatch 方法，action 表示当前接收到的动作
    return next => action => {
        console.log("before change", action);
        // 调用下一个中间件包装的 dispatch 
        let val = next(action);
        console.log("after change", getState(), val);
        return val;
    };
}
// 使用 logger 中间件，创建一个增强的 store
let createStoreWithMiddleware = Redux.applyMiddleware(logger)(Redux.createStore)
function applyMiddleware(...middlewares) {
  // middlewares 为中间件列表，返回一个接受原始 createStore 方法（Redux.createStore）作为参数的函数
  return createStore => (...args) => {
    // 创建原始的 store
    const store = createStore(...args)
    // 每个中间件都会被传入 middlewareAPI 对象，作为中间件参数
    const middlewareAPI = {
      getState: store.getState,
      dispatch: (...args) => dispatch(...args)
    }

    // 给每个中间件传入 middlewareAPI 参数
    // 中间件的统一模板为 next => action => next(action) 格式
    // chain 中保存的都是 next => action => {next(action)} 的方法
    const chain = middlewares.map(middleware => middleware(middlewareAPI))

    // 传入最原始 store.dispatch 方法，作为 compose 二级参数，compose 方法最终返回一个增强的dispatch 方法
    dispatch = compose(...chain)(store.dispatch)

    return {
      ...store,
      dispatch  // 返回一个增强版的 dispatch
    }
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

const fetchWrap = require('fetch-wrap');
// 这里可以接入自己的核心 Fetch 底层实现，比如使用原生 Fetch，或同构的 isomorphic-fetch 等
let fetch = require('isomorphic-fetch');
// 扩展 Fetch 中间件
fetch = fetchWrap(fetch, [
  middleware1,
  middleware2,
  middleware3,
]);
// 一个典型的中间件
function middleware1(url, options, innerFetch) {
	// ...
	// 业务扩展
	// ...
	return innerFetch(url, options);
}
// 一个更改 URL 的中间件
function(url, options, fetch) {
	// modify url or options
	return fetch(url.replace(/^(http:)?/, 'https:'), options);
},
// 一个修改返回结果的中间件
function(url, options, fetch) {
	return fetch(url, options).then(function(response) {
	  if (!response.ok) {
	    throw new Error(result.status + ' ' + result.statusText);
	  }
	  if (/application\/json/.test(result.headers.get('content-type'))) {
	    return response.json();
	  }
	  return response.text();
	});
}
// 一个做错误处理的中间件
function(url, options, fetch) {
	// catch errors
	return fetch(url, options).catch(function(err) {
	  console.error(err);
	  throw err;
	});
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

// 接受第一个参数为基础 Fetch，第二个参数为中间件数组或单个中间件
module.exports = function fetchWrap(fetch, middleware) {
    // 没有使用中间件，则返回原生 fetch
	if (!middleware || middleware.length < 1) {
		return fetch;
	}
	
	// 递归调用 extend 方法，每次递归时剔除出 middleware 数组中的首项
	var innerFetch = middleware.length === 1 ? fetch : fetchWrap(fetch, middleware.slice(1));
	
	var next = middleware[0];
	
	return function extendedFetch(url, options) {
		try {
		  // 每一个 Fetch 中间件通过 Promsie 来串联
		  return Promise.resolve(next(url, options || {}, innerFetch));
		} catch (err) {
		  return Promise.reject(err);
		}
	};
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

class Onion {
  constructor() {
    this.middlewares = [];
  }
  // 存储中间件
  use(newMiddleware) {
    this.middlewares.push(newMiddleware);
  }
  // 执行中间件
  execute(params = null) {
    const fn = compose(this.middlewares);
    return fn(params);
  }
}
export default function compose(middlewares) {
  return function wrapMiddlewares(params) {
    let index = -1;
    function dispatch(i) {
      index = i;
      const fn = middlewares[i];
      if (!fn) return Promise.resolve();
      return Promise.resolve(fn(params, () => dispatch(i + 1)));
    }
    return dispatch(0);
  };
}