新手如何快速理解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 相关文章推荐
Javascript 复制数组实现代码
Nov 26 Javascript
关于可运行代码无法正常执行的使用说明
May 13 Javascript
IE8提示Invalid procedure call or argument 异常的解决方法
Sep 30 Javascript
JS声明变量背后的编译原理剖析
Dec 28 Javascript
JS获取计算机mac地址以及IP的实现方法
Jan 08 Javascript
javascript实现右侧弹出“分享到”窗口效果
Feb 01 Javascript
JS控制伪元素的方法汇总
Apr 06 Javascript
AngularJS实现树形结构(ztree)菜单示例代码
Sep 18 Javascript
JavaScript基于自定义函数判断变量类型的实现方法
Nov 23 Javascript
js字符串与Unicode编码互相转换
May 17 Javascript
form表单数据封装成json格式并提交给服务器的实现方法
Dec 14 Javascript
Vue.js实现表格渲染的方法
Sep 07 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技术开发客服工单系统
2016/01/06 PHP
网页的分页下标生成代码(PHP后端方法)
2016/02/03 PHP
在云虚拟主机部署thinkphp5项目的步骤详解
2017/12/21 PHP
thinkphp5 URL和路由的功能详解与实例
2017/12/26 PHP
ThinkPHP 3.2.3实现加减乘除图片验证码
2018/12/05 PHP
网页的标准,IMG不支持onload标签怎么办
2006/06/29 Javascript
JavaScript实现当网页加载完成后执行指定函数的方法
2015/03/21 Javascript
js实现星星打分效果的方法
2020/07/05 Javascript
深入理解JavaScript 函数
2016/06/06 Javascript
Bootstrap基本布局实现方法详解
2016/11/25 Javascript
基于jQuery和CSS3实现APPLE TV海报视差效果
2017/06/16 jQuery
微信小程序后台解密用户数据实例详解
2017/06/28 Javascript
理解 javascript 中的函数表达式与函数声明
2017/07/07 Javascript
Vue学习笔记进阶篇之函数化组件解析
2017/07/21 Javascript
JavaScript数据类型的存储方法详解
2017/08/25 Javascript
JS判断数组那点事
2017/10/10 Javascript
利用vue + element实现表格分页和前端搜索的方法
2017/12/25 Javascript
基于jQuery.i18n实现web前端的国际化
2018/05/04 jQuery
如何基于jQuery实现五角星评分
2020/09/02 jQuery
浅谈python import引入不同路径下的模块
2017/07/11 Python
Python编程实现的简单神经网络算法示例
2018/01/26 Python
Python实现类似比特币的加密货币区块链的创建与交易实例
2018/03/20 Python
Python实现二叉树的常见遍历操作总结【7种方法】
2019/03/06 Python
pytorch 模拟关系拟合——回归实例
2020/01/14 Python
Python3之外部文件调用Django程序操作model等文件实现方式
2020/04/07 Python
python 中的命名空间,你真的了解吗?
2020/08/19 Python
python切片作为占位符使用实例讲解
2021/02/17 Python
Expedia法国:全球最大在线旅游公司
2018/09/30 全球购物
运动会通讯稿150字
2014/02/15 职场文书
志愿者活动总结
2014/04/28 职场文书
大学拉赞助协议书范文
2014/09/26 职场文书
二年级语文下册复习计划
2015/01/19 职场文书
为什么说餐饮很难做,是因为你不了解这些新规则
2019/08/20 职场文书
解决jupyter notebook图片显示模糊和保存清晰图片的操作
2021/04/24 Python
css3中transform属性实现的4种功能
2021/08/07 HTML / CSS
GO中sync包自由控制并发示例详解
2022/08/05 Golang