摘要：随着前端的发展，异步这个词真是越来越常见了。真正带来革命性改变的是规范。借助，我们可以这样完成异步任务好棒写起来像同步处理的函数一样别着急，少年。总结以上就是笔者总结的几种异步编程模式。
随着前端的发展，异步这个词真是越来越常见了。假设我们现在有这么一个异步任务：
向服务器发起数次请求，每次请求的结果作为下次请求的参数。
来看看我们都有哪些处理方法：
Callbacks最先想到也是最常用的便是回调函数了，我们来进行简单的封装：
javascriptlet makeAjaxCall = (url, cb) => {
// do some ajax
// callback with result
}
makeAjaxCall("http://url1", (result) => {
result = JSON.parse(result)
})
嗯，看起来还不错！但是当我们尝试嵌套多个任务时，代码看起来会是这样的：
javascriptmakeAjaxCall("http://url1", (result) => {
result = JSON.parse(result)
makeAjaxCall(`http://url2?q=${result.query}`, (result) => {
result = JSON.parse(result)
makeAjaxCall(`http://url3?q=${result.query}`, (result) => {
// ...
})
})
})
天哪！快让那堆 }) 见鬼去吧！
于是，我们想尝试借助 JavaScript 事件模型：
Pub/Sub在 DOM 事件的处理中，Pub/Sub 是一种很常见的机制，比如我们要为元素加上事件监听：
javascriptelem.addEventListener(type, (evt) => {
// handler
})
所以我们是不是也可以构造一个类似的模型来处理异步任务呢？
首先是要构建一个分发中心，并添加 on / emit 方法：
javascriptlet PubSub = {
events: {},
on(type, handler) {
let events = this.events
events[type] = events[type] || []
events[type].push(handler)
},
emit(type, ...datas) {
let events = this.events
if (!events[type]) {
return
}
events[type].forEach((handler) => handler(...datas))
}
}
然后我们便可以这样使用：
javascriptconst urls = [
"http://url1",
"http://url2",
"http://url3"
]
let makeAjaxCall = (url) => {
// do some ajax
PubSub.emit("ajaxEnd", result)
}
let subscribe = (urls) => {
let index = 0
PubSub.on("ajaxEnd", (result) => {
result = JSON.parse(result)
if (urls[++index]) {
makeAjaxCall(`${urls[index]}?q=${result.query}`)
}
})
makeAjaxCall(urls[0])
}
嗯……比起回调函数好像没有什么革命性的改变，但是这样做的好处是：我们可以将请求和处理函数放在不同的模块中，减少耦合。
Promise真正带来革命性改变的是 Promise 规范[1]。借助 Promise，我们可以这样完成异步任务：
javascriptlet makeAjaxCall = (url) => {
return new Promise((resolve, reject) => {
// do some ajax
resolve(result)
})
}
makeAjaxCall("http://url1")
.then(JSON.parse)
.then((result) => makeAjaxCall(`http://url2?q=${result.query}`))
.then(JSON.parse)
.then((result) => makeAjaxCall(`http://url3?q=${result.query}`))
好棒！写起来像同步处理的函数一样！
别着急，少年。我们还有更棒的：
GeneratorsES6 的另外一个大杀器便是 Generators[2]。在一个 generator function 中，我们可以通过 yield 语句来中断函数的执行，并在函数外部通过 next 方法来迭代语句，更重要的是我们可以通过 next 方法向函数内部注入数据，动态改变函数的行为。比如：
javascriptfunction* gen() {
let a = yield 1
let b = yield a * 2
return b
}
let it = gen()
it.next() // output: {value: 1, done: false}
it.next(10) // a = 10, output: {value: 20, done: false}
it.next(100) // b = 100, output: {value: 100, done: true}
通过 generator 将我们之前的 makeAjaxCall 函数进行封装：
javascriptlet makeAjaxCall = (url) => {
// do some ajax
iterator.next(result)
}
function* requests() {
let result = yield makeAjaxCall("http://url1")
result = JSON.parse(result)
result = yield makeAjaxCall(`http://url2?q=${result.query}`)
result = JSON.parse(result)
result = yield makeAjaxCall(`http://url3?q=${result.query}`)
}
let iterator = requests()
iterator.next() // get everything start
哦！看起来逻辑很清楚的样子，但是每次都得从外部注入 iterator 感觉好不舒服……
别急，我们让 Promise 和 Generator 混合一下，看会产出什么黑魔法：
javascriptlet makeAjaxCall = (url) => {
return new Promise((resolve, reject) => {
// do some ajax
resolve(result)
})
}
let runGen = (gen) => {
let it = gen()
let continuer = (value, err) => {
let ret
try {
ret = err ? it.throw(err) : it.next(value)
} catch (e) {
return Promise.reject(e)
}
if (ret.done) {
return ret.value
}
return Promise
.resolve(ret.value)
.then(continuer)
.catch((e) => continuer(null, e))
}
return continuer()
}
function* requests() {
let result = yield makeAjaxCall("http://url1")
result = JSON.parse(result)
result = yield makeAjaxCall(`http://url2?q=${result.query}`)
result = JSON.parse(result)
result = yield makeAjaxCall(`http://url3?q=${result.query}`)
}
runGen(requests)
runGen 函数看起来像个自动机一样，好厉害！
实际上，这个 runGen 的方法是对 ECMAScript 7 async function 的一个实现：
async functionES7 中，引入了一个更自然的特性 async function[3]。利用 async function 我们可以这样完成任务：
javascriptlet makeAjaxCall = (url) => {
return new Promise((resolve, reject) => {
// do some ajax
resolve(result)
})
}
;(async () => {
let result = await makeAjaxCall("http://url1")
result = JSON.parse(result)
result = await makeAjaxCall(`http://url2?q=${result.query}`)
result = JSON.parse(result)
result = await makeAjaxCall(`http://url3?q=${result.query}`)
})()
就像我们在上文把 Promise 和 Generator 结合在一起时一样，await 关键字后同样接受一个 Promise。在 async function 中，只有在 await 后的语句完成后剩下的语句才会被执行，整个过程就像我们用 runGen 函数封装 Generator 一样。
总结以上就是笔者总结的几种 JavaScript 异步编程模式。在行文过程中，我们只是简单描述了这几种模式，并没有提及错误处理的过程，您要是对此感兴趣，可以参考下文列出的引用文章。
（全文完）
参考资料Promises/A+ Specification
Going Async With ES6 Generators
ES7 async functions
Simplifying Asynchronous Coding with ES7 Async Functions
从第三方实现看 Promise
重编自我的博客，原文地址：https://idiotwu.me/going-async-with-javascript/
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/85736.html
摘要：应用日益复杂，模块化已经成为一个迫切需求。异步模块加载机制。引用的资源列表太长，懒得回调函数中写一一对应的相关参数假定这里引用的资源有数十个，回调函数的参数必定非常多这就是传说中的 简述 缘起 模块通常是指编程语言所提供的代码组织机制，利用此机制可将程序拆解为独立且通用的代码单元。 模块化主要是解决代码分割、作用域隔离、模块之间的依赖管理以及发布到生产环境时的自动化打包与处理等多个方面...
摘要：从最开始的到封装后的都在试图解决异步编程过程中的问题。为了让编程更美好，我们就需要引入来降低异步编程的复杂性。异步编程入门的全称是前端经典面试题从输入到页面加载发生了什么这是一篇开发的科普类文章，涉及到优化等多个方面。 TypeScript 入门教程 从 JavaScript 程序员的角度总结思考，循序渐进的理解 TypeScript。 网络基础知识之 HTTP 协议 详细介绍 HTT...
摘要：提出标准，允许脚本创建多个线程，但是子线程完全受主线程控制，且不得操作。所以，这个新标准并没有改变单线程的本质。事件循环主线程线程只会做一件事，就是从消息队列里面取消息执行消息，再取消息再执行。工作线程是生产者，主线程是消费者。 最近项目中遇到了一个场景，其实很常见，就是定时获取接口刷新数据。那么问题来了，假设我设置的定时时间为1s，而数据接口返回大于1s，应该用同步阻塞还是异步？我们...
摘要：当主线程开始执行异步任务，实际就是执行对应的回调函数。异步任务必须指定回调函数。所以注意的是，只是将事件插入了任务队列，必须等到当前代码执行栈执行完，主线程才会去执行它指定的回调函数。 最近本人对于js的运行机制，特别是异步，还有回调函数感觉很乱，于是参考了很多有用的博客（博客原文地址会在文末给出），整理如下： js单线程 我们都知道，Javascript语言的执行环境是单线程（si...
摘要：曾经的理解首先，是单线程语言，也就意味着同一个时间只能做一件事，那么为什么不是多线程呢这样还能提高效率啊假定同时有两个线程，一个线程在某个节点上编辑了内容，而另一个线程删除了这个节点，这时浏览器就很懵逼了，到底以执行哪个操作呢所以，设计者把 Event Loop曾经的理解 首先，JS是单线程语言，也就意味着同一个时间只能做一件事，那么 为什么JavaScript不是多线程呢？这样还能提...
阅读 3919·2021-11-24 09:38
阅读 3091·2021-11-17 09:33
阅读 3865·2021-11-10 11:48
阅读 1238·2021-10-14 09:48
阅读 3126·2019-08-30 13:14
阅读 2547·2019-08-29 18:37
阅读 3390·2019-08-29 12:38
阅读 1413·2019-08-29 12:30
