Express, Koa, Redux中间件的区别,写法和执行流程

栏目: Node.js · 发布时间: 6年前

内容简介:Express 是一个自身功能极简,完全是由路由和中间件构成一个的 web 开发框架:从本质上来说,一个 Express 应用就是在调用各种中间件。如果当前中间件没有终结请求-响应循环,则必须调用

Express 是一个自身功能极简,完全是由路由和中间件构成一个的 web 开发框架:从本质上来说,一个 Express 应用就是在调用各种中间件。

中间件(Middleware) 是一个函数,它可以访问请求对象(request object ( req )), 响应对象(response object ( res )), 和 web 应用中处于请求-响应循环流程中的中间件,一般被命名为 next 的变量。

如果当前中间件没有终结请求-响应循环,则必须调用 next() 方法将控制权交给下一个中间件,否则请求就会挂起。

Koa

Koa目前主要分1.x版本和2.x版本,它们最主要的差异就在于中间件的写法,

Redux

redux的middleware是 提供的是位于 action 被发起之后,到达 reducer 之前的扩展点

对比

框架 异步方式
Express callback
Koa1 generator/yield+co
Koa2 Async/Await
Redux redux-thunk,redux-saga,redux-promise等

2. 写法

Express

//Express
var express = require('express')
var app = express()
app.get('/',(req,res)=>{
    res.send('Hello Express!')
})
app.listen(3000)
复制代码

Koa1

var koa = require('koa');
var app = koa();

// logger

app.use(function *(next){
  var start = new Date;
  yield next;
  var ms = new Date - start;
  console.log('%s %s - %s', this.method, this.url, ms);
});

// response

app.use(function *(){
  this.body = 'Hello World';
});

app.listen(3000);
复制代码

Koa2

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

// logger
// common function 最常见的,也称modern middleware
app.use((ctx, next) => {
  const start = new Date();
  return next().then(() => {
    const ms = new Date() - start;
    console.log(`${ctx.method} ${ctx.url} - ${ms}ms`);
  });
});

// logger
// generatorFunction 生成器函数,就是yield *那个
app.use(co.wrap(function *(ctx, next) {
  const start = new Date();
  yield next();
  const ms = new Date() - start;
  console.log(`${ctx.method} ${ctx.url} - ${ms}ms`);
}));

// logger
// async function 最潮的es7 stage-3特性 async 函数,异步终极大杀器
app.use(async (ctx, next) => {
  const start = new Date();
  await next();
  const ms = new Date() - start;
  console.log(`${ctx.method} ${ctx.url} - ${ms}ms`);
});

// response
app.use(ctx => {
  ctx.body = 'Hello Koa';
});

app.listen(3000);
复制代码

Redux

import { createStore, applyMiddleware } from 'redux'
/** 定义初始 state**/
const initState = {
  score : 0.5
}
/** 定义 reducer**/
const reducer = (state, action) => {
  switch (action.type) {
    case 'CHANGE_SCORE':
      return { ...state, score:action.score }
    default:
      break
  }
}

/** 定义中间件 **/
const logger = ({ dispatch, getState }) => next => action => {
  console.log('【logger】即将执行:', action)

  // 调用 middleware 链中下一个 middleware 的 dispatch。
  let returnValue = next(action)

  console.log('【logger】执行完成后 state:', getState())
  return returnValue
}

/** 创建 store**/
let store = createStore(reducer, initState, applyMiddleware(logger))

/** 现在尝试发送一个 action**/
store.dispatch({
  type: 'CHANGE_SCORE',
  score: 0.8
})
/** 打印:**/
// 【logger】即将执行: { type: 'CHANGE_SCORE', score: 0.8 }
// 【logger】执行完成后 state: { score: 0.8 }

复制代码

3. 执行流程

Express

其实express middleware的原理很简单,express内部维护一个函数数组,这个函数数组表示在发出响应之前要执行的所有函数,也就是中间件数组,每一次use以后,传进来的中间件就会推入到数组中,执行完毕后调用next方法执行函数的下一个函数,如果没用调用,调用就会终止。

Express, Koa, Redux中间件的区别,写法和执行流程

Koa

Koa会把多个中间件推入栈中,与express不同,koa的中间件是所谓的洋葱型模型。

Express, Koa, Redux中间件的区别,写法和执行流程
var koa = require('koa');
var app = koa();

app.use(function*(next) {
  console.log('begin middleware 1');
  yield next;
  console.log('end middleware 1');
});

app.use(function*(next) {
  console.log('begin middleware 2');
  yield next;
  console.log('end middleware 2');
});

app.use(function*() {
  console.log('middleware 3');
});

app.listen(3000);

// 输出
begin middleware 1
begin middleware 2
middleware 3
end middleware 2
end middleware 1
复制代码

Redux

Express, Koa, Redux中间件的区别,写法和执行流程

从上图中得出结论,middleware通过next(action)一层层处理和传递action直到redux原生的dispatch。而如果某个middleware使用store.dispatch(action)来分发action,就相当于重新来一遍。

在middleware中使用dispatch的场景一般是接受一个定向action,这个action并不希望到达原生的分发action,往往用在一步请求的需求里,如redux-thunk,就是直接接受dispatch。

如果一直简单粗暴调用store.dispatch(action),就会形成无限循环。


以上所述就是小编给大家介绍的《Express, Koa, Redux中间件的区别,写法和执行流程》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

劫持

劫持

玛丽•K. 斯温格尔(Mari K. Swingle) / 邓思渊 / 中信出版集团股份有限公司 / 2018-5-1 / CNY 59.00

《劫持》是一本探讨人与科技的关系的书,基于一位心理学博士20年的临床经验及其作为神经认知科学研究者的脑—电研究成果。在这本面向大众的科普书中,作者以深入浅出的方式,探讨了手机、电脑等便携式数字设备及让人“永不下线”的互联网对现代人尤其是青少年大脑的影响,从神经认知科学和精神分析的角度,有力地证明了数字媒介与大脑和人类行为的关系,探讨了手机等如何对人的大脑进行劫持或操控,并给出了自己作为从业医师的实......一起来看看 《劫持》 这本书的介绍吧!

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具