新手如何快速理解js异步编程


Posted in Javascript onJune 24, 2019

前言

异步编程从早期的 callback、事件发布\订阅模式到 ES6 的 Promise、Generator 在到 ES2017 中 async,看似风格迥异,但是还是有一条暗线将它们串联在一起的,就是希望将异步编程的代码表达尽量地贴合自然语言的线性思维。

以这条暗线将上述几种解决方案连在一起,就可以更好地理解异步编程的原理、魅力。
├── 事件发布\订阅模式 <= Callback
├── Promise <= 事件发布\订阅模式
├── Async、Await <= Promise、Generator

事件发布\订阅模式 <= Callback

这个模式本质上就是回调函数的事件化。它本身并无同步、异步调用的问题,我们只是使用它来实现事件与回调函数之间的关联。比较典型的有 NodeJS 的 events 模块

const { EventEmitter } = require('events')
const eventEmitter = new EventEmitter()
// 订阅
eventEmitter.on("event", function(msg) {
console.log("event", msg)
})
// 发布
eventEmitter.emit("event", "Hello world")

那么这种模式是如何与 Callback 关联的呢?我们可以利用 Javascript 简单实现 EventEmitter,答案就显而易见了。

class usrEventEmitter {
constructor () {
this.listeners = {}
}
// 订阅,callback 为每个 event 的侦听器
on(eventName, callback) {
if (!this.listeners[eventName]) this.listeners[eventName] = []
this.listeners[eventName].push(callback)
}
// 发布
emit(eventName, params) {
this.listeners[eventName].forEach(callback => {
callback(params)
})
}
// 注销
off(eventName, callback) {
const rest = this.listeners[eventName].fitler(elem => elem !== callback)
this.listeners[eventName] = rest
}
// 订阅一次
once(eventName, callback) { 
const handler = function() {
callback()
this.off(eventName, handler)
}
this.on(eventName, handler)
}
}

上述实现忽略了很多细节,例如异常处理、多参数传递等。只是为了展示事件订阅\发布模式。

很明显的看出,我们使用这种设计模式对异步编程做了逻辑上的分离,将其语义化为

// 一些事件可能会被触发
eventEmitter.on
// 当它发生的时候,要这样处理
eventEmitter.emit

也就是说,我们将最初的 Callback 变成了事件监听器,从而优雅地解决异步编程。

Promise <= 事件发布\订阅模式

使用事件发布\订阅模式时,需要我们事先严谨地设置目标,也就是上面所说的,必须要缜密地设定好有哪些事件会发生。这与我们语言的线性思维很违和。那么有没有一种方式可以解决这个问题,社区产出了 Promise。

const promise = new Promise(function(resolve, reject) {
try {
setTimeout(() => {
resolve('hello world')
}, 500)
} catch (error) {
reject(error)
}
})
// 语义就变为先发生一些异步行为,then 我们应该这么处理
promise.then(msg => console.log(msg)).catch(error => console.log('err', error))

那么这种 Promise 与事件发布\订阅模式有什么联系呢?我们可以利用 EventEmitter 来实现 Promise,这样可能会对你有所启发。

我们可以将 Promise 视为一个 EventEmitter,它包含了 { state: 'pending' } 来描述当前的状态,同时侦听它的变化

  • 当成功时 { state: 'fulfilled' },要做些什么 on('resolve', callback);
  • 当失败时 { state: 'rejected' },要做些什么 on('reject', callback)。

具体实现如下

const { EventEmitter } = require('events')
class usrPromise extends EventEmitter {
// 构造时候执行
constructor(executor) {
super()
// 发布
const resolve = (value) => this.emit('resolve', value)
const reject = (reason) => this.emit('reject', reason)
if (executor) {
// 模拟 event loop,注此处利用 Macrotask 来模拟 Microtask
setTimeout(() => executor(resolve, reject))
}
}
then(resolveHandler, rejectHandler) {
const nextPromise = new usrPromise()
// 订阅 resolve 事件
if (resolveHandler) {
const resolve = (data) => {
const result = resolveHandler(data)
nextPromise.emit('resolve', result)
}
this.on('resolve', resolve)
}
// 订阅 reject 事件
if (rejectHandler) {
const reject = (data) => {
const result = rejectHandler(data)
nextPromise.emit('reject', result)
}
this.on('reject', reject)
} else {
this.on('reject', (data) => {
promise.emit('reject', data)
})
}
return nextPromise
}
catch(handler) {
this.on('reject', handler)
}
}

我们使用 then 方法来将预先需要定义的事件侦听器存放起来,同时在 executor 中设定这些事件该在什么时候实行。

可以看出从事件发布\订阅模式到 Promise,带来了语义上的巨大变革,但是还是需要使用 new Promise 来描述整个状态的转换,那么有没有更好地实现方式呢?

async、await <= Promise、Generator

async、await 标准是 ES 2017 引入,提供一种更加简洁的异步解决方案。

async function say(greeting) {
return new Promise(function(resolve, then) {
setTimeout(function() {
resolve(greeting)
}, 1500)
})
}
;(async function() {
let v1 = await say('Hello')
console.log(v1)
let v2 = await say('World')
console.log(v2)
})()

await 可以理解为暂停当前 async function 的执行,等待 Promise 处理完成。。若 Promise 正常处理(fulfilled),其回调的resolve函数参数作为 await 表达式的值。

async、await 的出现,减少了多个 then 的链式调用形式的代码。下面我们结合 Promise 与 Generator 来实现 async、await

function async(makeGenerator) {
return function() {
const generator = makeGenerator.apply(this, arguments)
function handle({ value, done }) {
if (done === true) return Promise.resolve(value)
return Promise.resolve(value).then(
(res) => {
return handle(generator.next(res))
},
function(err) {
return handle(generator.throw(err))
}
)
}
try {
return handle(generator.next())
} catch (ex) {
return Promise.reject(ex)
}
}
}
async(function*() {
var v1 = yield say('hello')
console.log(1, v1)
var v2 = yield say('world')
console.log(2, v2)
})()

本质上就是利用递归完成 function* () { ... } 的自动执行。相比与 Generator 函数,这种形式无需手动执行,并且具有更好的语义。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,

Javascript 相关文章推荐
js判断运行jsp页面的浏览器类型以及版本示例
Oct 30 Javascript
原生javascript实现无间缝滚动示例
Jan 28 Javascript
javascript类型转换使用方法
Feb 08 Javascript
jQuery+PHP实现动态数字展示特效
Mar 14 Javascript
AngularJS入门教程之Scope(作用域)
Jul 27 Javascript
js实现无缝滚动图
Feb 22 Javascript
详解Vue iview IE浏览器不兼容报错(Iview Bable polyfill)
Jan 07 Javascript
详解vue-cli@2.x项目迁移日志
Jun 06 Javascript
在vue项目中使用codemirror插件实现代码编辑器功能
Aug 27 Javascript
深入理解基于vue-cli的webpack打包优化实践及探索
Oct 14 Javascript
es6数组的flat(),flatMap()函数用法实例分析
Apr 18 Javascript
ant-design-vue 时间选择器赋值默认时间的操作
Oct 27 Javascript
简单了解小程序+node梳理登陆流程
Jun 24 #Javascript
JS数组扁平化(flat)方法总结详解
Jun 24 #Javascript
深入了解query和params的使用区别
Jun 24 #Javascript
如何使用JavaScript实现栈与队列
Jun 24 #Javascript
简单了解JavaScript中的执行上下文和堆栈
Jun 24 #Javascript
一次让你了解全部JavaScript的作用域
Jun 24 #Javascript
通过循环优化 JavaScript 程序
Jun 24 #Javascript
You might like
汉字转化为拼音(php版)
2006/10/09 PHP
PHP定时更新程序设计思路分享
2014/06/10 PHP
php实现无限级分类
2014/12/24 PHP
7个鲜为人知却非常实用的PHP函数
2015/07/01 PHP
php删除一个路径下的所有文件夹和文件的方法
2018/02/07 PHP
jquery模拟alert的弹窗插件
2015/07/31 Javascript
js文本框走动跑马灯效果代码分享
2015/08/25 Javascript
JavaScript仿网易选项卡制作代码
2016/10/06 Javascript
jQuery元素选择器实例代码
2017/02/06 Javascript
javascript 判断一个对象为数组的方法
2017/05/03 Javascript
vue中用H5实现文件上传的方法实例代码
2017/05/27 Javascript
基于Vue实现页面切换左右滑动效果
2020/06/29 Javascript
Vue.js递归组件构建树形菜单
2017/12/24 Javascript
JS实现关键词高亮显示正则匹配
2018/06/22 Javascript
使用JS实现导航切换时高亮显示的示例讲解
2018/08/22 Javascript
babel7.x和webpack4.x配置vue项目的方法步骤
2019/05/12 Javascript
layui form表单提交之后重新加载数据表格的方法
2019/09/11 Javascript
layui按条件隐藏表格列的实例
2019/09/19 Javascript
python的描述符(descriptor)、装饰器(property)造成的一个无限递归问题分享
2014/07/09 Python
用Python的Django框架来制作一个RSS阅读器
2015/07/22 Python
Python正则表达式非贪婪、多行匹配功能示例
2017/08/08 Python
python目标检测给图画框,bbox画到图上并保存案例
2020/03/10 Python
Django Model层F,Q对象和聚合函数原理解析
2020/11/12 Python
使用CSS3的appearance属性改变任何元素的浏览器默认风格
2012/12/24 HTML / CSS
CSS3实现水平居中、垂直居中、水平垂直居中的实例代码
2020/02/27 HTML / CSS
HTML5的结构和语义(4):语义性的内联元素
2008/10/17 HTML / CSS
印度尼西亚最完整和最大的在线药房网站:Farmaku.com
2019/11/23 全球购物
高二学生评语大全
2014/04/25 职场文书
小学生作文批改评语
2014/12/25 职场文书
村干部任职承诺书
2015/01/21 职场文书
2015年机关党委工作总结
2015/05/23 职场文书
小学总务工作总结
2015/08/13 职场文书
先进基层党组织事迹材料2016
2016/02/29 职场文书
优秀乡村医生事迹材料(2016精选版)
2016/02/29 职场文书
Python自动化爬取天眼查数据的实现
2021/06/15 Python
mysql备份策略的实现(全量备份+增量备份)
2021/07/07 MySQL