浅谈Express异步进化史


Posted in Javascript onSeptember 09, 2017

1、导言

在 Javascript 的世界里,异步(由于JavaScript的单线程运行,所以JavaScript中的异步是可以阻塞的)无处不在。

Express 是 node 环境中非常流行的Web服务端框架,有很大比例的 Node Web应用 采用了 Express。

当使用 JavaScript 编写服务端代码时,我们无可避免的会大量使用到异步。随着 JavaScript、Node 的进化,我们的异步处理方式,也就随之进化。

接下来,我们就来看看 Express 中异步处理的进化过程。

2、JavaScript的异步处理

在异步的世界里,我们需要想办法获取的异步方法完毕的通知,那在 JavaScript 中,会有哪些方式呢?

2.1、回调

回调是 JS 中最原始,也是最古老的异步通知机制。

function asyncFn(callback) {
 // 利用setTimeout模拟异步
 setTimeout(function () {
  console.log('执行完毕');
  callback(); // 发通知
 }, 2000);
}

asyncFn(function () {
 console.log('我会在2s后输出');
});

2.2、事件监听

要获取结果的函数,监听某个时间。在异步方法完成后,触发该事件,达到通知的效果。

2.3、发布/订阅

通过观察者模式,在异步完成时,修改发布者。这个时候,发布者会把变更通知到订阅者。

2.4、Promise

Promise 是回调函数的改进。使用它, 我们可以将异步平行化,避免回调地狱。

function asyncFn() {
 return new Promise((resolve, reject) => {
  // 利用setTimeout模拟异步
  setTimeout(function () {
   console.log('执行完毕');
   resolve(); // 发通知(是否有感觉到回调的影子?)
  }, 2000);
 });
}

asyncFn()
 .then(function () {
  console.log('我会在2s后输出');
 });

2.5、生成器(Generator)

Generator 函数是 ES6 提供的一种异步编程解决方案。

以下代码只是简单演示,实际上 Generator 的使用过程,相对是比较复杂的,这是另外一个话题,本文暂且不表。

function asyncFn() {
 return new Promise((resolve, reject) => {
  // 利用setTimeout模拟异步
  setTimeout(function () {
   console.log('执行完毕');
   resolve(); // 发通知(是否有感觉到回调的影子?)
  }, 2000);
 });
}

function* generatorSync() {
 var result = yield asyncFn();
}

var g = generatorSync();
g.next().value.then(()=>{
 console.log('我会在2s后输出');
});

2.6、async...await

可以说是当前 JavaScript 中,处理异步的最佳方案。

function asyncFn() {
 return new Promise((resolve, reject) => {
  // 利用setTimeout模拟异步
  setTimeout(function () {
   console.log('执行完毕');
   resolve(); // 发通知(是否有感觉到回调的影子?)
  }, 2000);
 });
}

async function run(){
 await asyncFn();
 console.log('我会在2s后输出');
}

run();

3、Express中的异步处理

在Express中,我们一般常用的是方案是:回调函数、Promise、以及async...await。

为了搭建演示环境,通过 express-generator 初始化一个express项目。一般的服务端项目,都是路由调用业务逻辑。所以,我们也遵循这个原则:

打开 routs/index.js,我们会看到如下内容,以下Demo就以此文件来做演示。

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
 res.render('index', { title: 'Express' });
});

module.exports = router;

3.1、回调函数处理Express异步逻辑

在 Express 中,路由可以加载多个中间件,所以我们可以把业务逻辑按照中间件的写法进行编写。这样通过一层层的next,就能非常方便的拆分异步逻辑。

var express = require('express');
var router = express.Router();

function asyncFn(req, res, next) {
 setTimeout(() => {
  req.user = {}; // 设置当前请求的用户
  next();
 }, 2000);
}

function asyncFn2(req, res, next) {
 setTimeout(() => {
  req.auth = {}; // 设置用户权限
  next();
 }, 2000);
}

function asyncFn3(req, res, next) {
 setTimeout(() => {
  res.locals = { title: 'Express Async Test' }; // 设置数据
  res.render('index'); // 响应
 }, 2000);
}

/* GET home page. */
router.get('/', asyncFn, asyncFn2, asyncFn3); // 一步步执行中间件

module.exports = router;

3.2、Promise 处理Express异步逻辑

该方案中,将多个业务逻辑,包装为返回 Promise 的函数。通过业务方法进行组合调用,以达到一进一出的效果。

var express = require('express');
var router = express.Router();

function asyncFn(req, res) {
 return new Promise((resolve, reject) => {
  setTimeout(() => {
   req.user = {}; // 设置当前请求的用户
   resolve(req);
  }, 2000);
 });
}

function asyncFn2(req) {
 return new Promise((resolve, reject) => {
  setTimeout(() => {
   req.auth = {}; // 设置用户权限
   resolve();
  }, 2000);
 });
}

function asyncFn3(res) {
 return new Promise((resolve, reject) => {
  setTimeout(() => {
   res.locals = { title: 'Express Async Test' }; // 设置数据
   res.render('index'); // 响应
  }, 2000);
 });
}

function doBizAsync(req, res, next) {
 asyncFn(req)
  .then(() => asyncFn2(req))
  .then(() => asyncFn3(res))
  .catch(next); // 统一异常处理
};

/* GET home page. */
router.get('/', doBizAsync);

module.exports = router;

3.3、async...await 处理Express异步逻辑

实际上,该方案也是需要 Promise 的支持,只是写法上,更直观,错误处理也更直接。

需要注意的是,Express是早期的方案,没有对async...await进行全局错误处理,所以可以采用包装方式,进行处理。

var express = require('express');
var router = express.Router();

function asyncFn(req) {
 return new Promise((resolve, reject) => {
  setTimeout(() => {
   req.user = {}; // 设置当前请求的用户
   resolve(req);
  }, 2000);
 });
}

function asyncFn2(req) {
 return new Promise((resolve, reject) => {
  setTimeout(() => {
   req.auth = {}; // 设置用户权限
   resolve();
  }, 2000);
 });
}

function asyncFn3(res) {
 return new Promise((resolve, reject) => {
  setTimeout(() => {

  }, 2000);
 });
}

async function doBizAsync(req, res, next) {
 var result = await asyncFn(req);
 var result2 = await asyncFn2(req);
 res.locals = { title: 'Express Async Test' }; // 设置数据
 res.render('index'); // 响应
};

const tools = {
 asyncWrap(fn) {
  return (req, res, next) => {
   fn(req, res, next).catch(next); // async...await在Express中的错误处理
  }
 }
};

/* GET home page. */
router.get('/', tools.asyncWrap(doBizAsync)); // 需要用工具方法包裹一下

module.exports = router;

4、总结

虽然 koa 对更新、更好的用法(koa是generator,koa2原生async)支持的更好。但作为从 node 0.x 开始跟的我,对 Express 还是有特殊的好感。

以上的一些方案,已经与 koa 中使用无异,配合 Express 庞大的生态圈,无异于如虎添翼。

本文Github地址

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript hashtable实现代码
Oct 13 Javascript
javascript基础第一章 JavaScript与用户端
Jul 22 Javascript
js 单击式的下拉菜单效果实例
Aug 13 Javascript
全面兼容的javascript时间格式化函数(比较实用)
May 14 Javascript
深入理解JavaScript系列(35):设计模式之迭代器模式详解
Mar 03 Javascript
使用Sticky组件实现带sticky效果的tab导航和滚动导航的方法
Mar 22 Javascript
vuejs在解析时出现闪烁的原因及防止闪烁的方法
Sep 19 Javascript
详解jQuery中关于Ajax的几个常用的函数
Jul 17 jQuery
基于JavaScript实现多级菜单效果
Jul 25 Javascript
基于substring()和substr()的使用以及区别(实例讲解)
Dec 28 Javascript
简单了解JavaScript异步
May 23 Javascript
微信小程序实现限制用户转发功能的实例代码
Feb 22 Javascript
vue组件学习教程
Sep 09 #Javascript
weex里Vuex state使用storage持久化详解
Sep 09 #Javascript
Vue2几种常见开局方式详解
Sep 09 #Javascript
使用JS动态显示文本
Sep 09 #Javascript
深入理解ES7的async/await的用法
Sep 09 #Javascript
jQuery事件对象的属性和方法详解
Sep 09 #jQuery
微信通过页面(H5)直接打开本地app的解决方法
Sep 09 #Javascript
You might like
DC宇宙的第一个英雄,堪称动漫史鼻祖,如今成为美国文化的象征
2020/04/09 欧美动漫
PHP 生成的XML以FLASH获取为乱码终极解决
2009/08/07 PHP
PHP字符串长度计算 - strlen()函数使用介绍
2013/10/15 PHP
php实现支付宝当面付(扫码支付)功能
2018/05/30 PHP
用JQuery 实现AJAX加载XML并解析的脚本
2009/07/25 Javascript
学习JS面向对象成果 借国庆发布个最新作品与大家交流
2009/10/03 Javascript
javascript scrollTop正解使用方法
2013/11/14 Javascript
input输入框鼠标焦点提示信息
2015/03/17 Javascript
jQuery使用$.get()方法从服务器文件载入数据实例
2015/03/25 Javascript
js模拟淘宝网的多级选择菜单实现方法
2015/08/18 Javascript
关于javascript中限定时间内防止按钮重复点击的思路详解
2016/08/16 Javascript
基于jQuery实现表格的排序
2016/12/02 Javascript
Vue数据驱动模拟实现5
2017/01/13 Javascript
JS实现的验证身份证及获取地区功能示例
2017/01/16 Javascript
vue分类筛选filter方法简单实例
2017/03/30 Javascript
Vue组件的使用及个人理解与介绍
2019/02/09 Javascript
layui表格数据重载
2019/07/27 Javascript
JavaScript 接口原理与用法实例详解
2020/05/12 Javascript
详细介绍Python中的偏函数
2015/04/27 Python
一步步教你用Python实现2048小游戏
2017/01/19 Python
Anaconda下配置python+opencv+contribx的实例讲解
2018/08/06 Python
Python图像处理之图像的缩放、旋转与翻转实现方法示例
2019/01/04 Python
python pandas生成时间列表
2019/06/29 Python
Python 转换文本编码实现解析
2019/08/27 Python
python自动化测试无法启动谷歌浏览器问题
2019/10/10 Python
Python3爬虫RedisDump的安装步骤
2021/02/20 Python
英国最专业的健身器材供应商之一:Best Gym Equipment
2017/12/22 全球购物
园林设计师自荐信
2013/11/18 职场文书
家长学校实施方案
2014/03/15 职场文书
社区文艺活动方案
2014/08/19 职场文书
三提三创主题教育活动查摆整改措施
2014/10/25 职场文书
会计师事务所实习证明
2014/11/16 职场文书
2014年档案室工作总结
2014/12/01 职场文书
实名检举信范文
2015/03/02 职场文书
2015年社区精神文明工作总结
2015/05/26 职场文书
vue route新窗口跳转页面并且携带与接收参数
2022/04/10 Vue.js