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中间件的区别,写法和执行流程》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

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

One Click

One Click

Richard L. Brandt / Portfolio Hardcover / 2011-10-27 / 25.95

An insightful look at how Amazon really works and how its founder and CEO makes it happen. Amazon's business model is deceptively simple: make online shopping so easy and convenient that customers ......一起来看看 《One Click》 这本书的介绍吧!

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具