JavaScript异步编程:Generator与Async
从Promise
开始,JavaScript就在引入新功能,来帮助更简单的方法来处理异步编程,帮助我们远离回调地狱。
Promise
是下边要讲的Generator
/yield
与async
/await
的基础,希望你已经提前了解了它。
在大概ES6
的时代,推出了Generator
/yield
两个关键字,使用Generator
可以很方便的帮助我们建立一个处理Promise
的解释器。
然后,在ES7
左右,我们又得到了async
/await
这样的语法,可以让我们以接近编写同步代码的方式来编写异步代码(无需使用.then()
或者回调函数)。
两者都能够帮助我们很方便的进行异步编程,但同样,这两者之间也是有不少区别的。
Generator
Generator
是一个函数,可以在函数内部通过yield
返回一个值(此时,Generator
函数的执行会暂定,直到下次触发.next()
)
创建一个Generator
函数的方法是在function
关键字后添加*
标识。
在调用一个Generator
函数后,并不会立即执行其中的代码,函数会返回一个Generator
对象,通过调用对象的next
函数,可以获得yield
/return
的返回值。
无论是触发了yield
还是return
,next()
函数总会返回一个带有value
和done
属性的对象。
value
为返回值,done
则是一个Boolean
对象,用来标识Generator
是否还能继续提供返回值。
P.S. Generator
函数的执行时惰性的,yield
后的代码只在触发next
时才会执行
function * oddGenerator () {
yield 1
yield 3 return 5
} let iterator = oddGenerator() let first = iterator.next() // { value: 1, done: false }
let second = iterator.next() // { value: 3, done: false }
let third = iterator.next() // { value: 5, done: true }
next的参数传递
我们可以在调用next()
的时候传递一个参数,可以在上次yield
前接收到这个参数:
function * outputGenerator () {
let ret1 = yield 1
console.log(`got ret1: ${ret1}`)
let ret2 = yield 2
console.log(`got ret2: ${ret2}`)
} let iterator = outputGenerator() iterator.next(1)
iterator.next(2) // got ret1: 2
iterator.next(3) // got ret2: 3
第一眼看上去可能会有些诡异,为什么第一条log
是在第二次调用next
时才进行输出的
这就又要说到上边的Generator
的实现了,上边说到了,yield
与return
都是用来返回值的语法。
函数在执行时遇到这两个关键字后就会暂停执行,等待下次激活。
然后let ret1 = yield 1
,这是一个赋值表达式,也就是说会先执行=
右边的部分,在=
右边执行的过程中遇到了yield
关键字,函数也就在此处暂停了,在下次触发next()
时才被激活,此时,我们继续进行上次未完成的赋值语句let ret1 = XXX
,并在再次遇到yield
时暂停。
这也就解释了为什么第二次调用next()
的参数会被第一次yield
赋值的变量接收到
用作迭代器使用
因为Generator
对象是一个迭代器,所以我们可以直接用于for of
循环:
但是要注意的是,用作迭代器中的使用,则只会作用于
yield
return
的返回值不计入迭代
function * oddGenerator () {
yield 1
yield 3
yield 5 return 'won\'t be iterate'
} for (let value of oddGenerator()) {
console.log(value)
}
// > 1
// > 3
// > 5
Generator函数内部的Generator
除了yield
语法以外,其实还有一个yield*
语法,可以粗略的理解为是Generator
函数版的[...]
用来展开Generator
迭代器的。
function * gen1 () {
yield 1
yield* gen2()
yield 5
} function * gen2 () {
yield 2
yield 3
yield 4
return 'won\'t be iterate'
} for (let value of gen1()) {
console.log(value)
}
// > 1
// > 2
// > 3
// > 4
// > 5
模拟实现Promise执行器
然后我们结合着Promise
,来实现一个简易的执行器。
最受欢迎的类似的库是: co
function run (gen) {
gen = gen()
return next(gen.next()) function next ({done, value}) {
return new Promise(resolve => {
if (done) { // finish
resolve(value)
} else { // not yet
value.then(data => {
next(gen.next(data)).then(resolve)
})
}
})
}
} function getRandom () {
return new Promise(resolve => {
setTimeout(_ => resolve(Math.random() * 10 | 0), 1000)
})
} function * main () {
let num1 = yield getRandom()
let num2 = yield getRandom() return num1 + num2
} run(main).then(data => {
console.log(`got data: ${data}`);
})
一个简单的解释器的模拟(仅作举例说明)
在例子中,我们约定yield
后边的必然是一个Promise
函数
我们只看main()
函数的代码,使用Generator
确实能够让我们让近似同步的方式来编写异步代码
但是,这样写就意味着我们必须有一个外部函数负责帮我们执行main()
函数这个Generator
,并处理其中生成的Promise
,然后在then
回调中将结果返回到Generator
函数,以便可以执行下边的代码。
Async
我们使用async
/await
来重写上边的Generator
例子:
function getRandom () {
return new Promise(resolve => {
setTimeout(_ => resolve(Math.random() * 10 | 0), 1000)
})
} async function main () {
let num1 = await getRandom()
let num2 = await getRandom() return num1 + num2
}
console.log(`got data: ${await main()}`)
这样看上去,好像我们从Generator
/yield
换到async
/await
只需要把*
都改为async
,yield
都改为await
就可以了。 所以很多人都直接拿Generator
/yield
来解释async
/await
的行为,但这会带来如下几个问题:
Generator
有其他的用途,而不仅仅是用来帮助你处理Promise
- 这样的解释让那些不熟悉这两者的人理解起来更困难(因为你还要去解释那些类似
co
的库)
async
/await
是处理Promise
的一个极其方便的方法,但如果使用不当的话,也会造成一些令人头疼的问题
Async函数始终返回一个Promise
一个async
函数,无论你return 1
或者throw new Error()
。
在调用方来讲,接收到的始终是一个Promise
对象:
async function throwError () {
throw new Error()
}
async function returnNumber () {
return 1
} console.log(returnNumber() instanceof Promise) // true
console.log(throwError() instanceof Promise) // true
也就是说,无论函数是做什么用的,你都要按照Promise
的方式来处理它。
Await是按照顺序执行的,并不能并行执行
JavaScript
是单线程的,这就意味着await
一只能一次处理一个,如果你有多个Promise
需要处理,则就意味着,你要等到前一个Promise
处理完成才能进行下一个的处理,这就意味着,如果我们同时发送大量的请求,这样处理就会非常慢,one by one
:
const bannerImages = [] async function getImageInfo () {
return bannerImages.map(async banner => await getImageInfo(banner))
}
就像这样的四个定时器,我们需要等待4s
才能执行完毕:
function delay () {
return new Promise(resolve => setTimeout(resolve, 1000))
} let tasks = [1, 2, 3, 4] async function runner (tasks) {
for (let task of tasks) {
await delay()
}
} console.time('runner')
await runner(tasks)
console.timeEnd('runner')
像这种情况,我们可以进行如下优化:
function delay () {
return new Promise(resolve => setTimeout(resolve, 1000))
} let tasks = [1, 2, 3, 4] async function runner (tasks) {
tasks = tasks.map(delay)
await Promise.all(tasks)
} console.time('runner')
await runner(tasks)
console.timeEnd('runner')
草案中提到过
await*
,但现在貌似还不是标准,所以还是采用Promise.all
包裹一层的方法来实现
我们知道,Promise
对象在创建时就会执行函数内部的代码,也就意味着,在我们使用map
创建这个数组时,所有的Promise
代码都会执行,也就是说,所有的请求都会同时发出去,然后我们通过await Promise.all
来监听所有Promise
的响应。
结论
Generator
与async function
都是返回一个特定类型的对象:
Generator
: 一个类似{ value: XXX, done: true }
这样结构的Object
Async
: 始终返回一个Promise
,使用await
或者.then()
来获取返回值
Generator
是属于生成器,一种特殊的迭代器,用来解决异步回调问题感觉有些不务正业了。。 而async
则是为了更简洁的使用Promise
而提出的语法,相比Generator + co
这种的实现方式,更为专注,生来就是为了处理异步编程。
现在已经是2018
年了,async
也是用了好久,就让Generator
去做他该做的事情吧。。
参考资料
示例代码:code-resource
JavaScript异步编程:Generator与Async的更多相关文章
- javascript异步编程的前世今生,从onclick到await/async
javascript与异步编程 为了避免资源管理等复杂性的问题, javascript被设计为单线程的语言,即使有了html5 worker,也不能直接访问dom. javascript 设计之初是为 ...
- 5分种让你了解javascript异步编程的前世今生,从onclick到await/async
javascript与异步编程 为了避免资源管理等复杂性的问题,javascript被设计为单线程的语言,即使有了html5 worker,也不能直接访问dom. javascript 设计之初是 ...
- JavaScript异步编程的主要解决方案—对不起,我和你不在同一个频率上
众所周知(这也忒夸张了吧?),Javascript通过事件驱动机制,在单线程模型下,以异步的形式来实现非阻塞的IO操作.这种模式使得JavaScript在处理事务时非常高效,但这带来了很多问题,比如异 ...
- JavaScript异步编程原理
众所周知,JavaScript 的执行环境是单线程的,所谓的单线程就是一次只能完成一个任务,其任务的调度方式就是排队,这就和火车站洗手间门口的等待一样,前面的那个人没有搞定,你就只能站在后面排队等着. ...
- 深入解析Javascript异步编程
这里深入探讨下Javascript的异步编程技术.(P.S. 本文较长,请准备好瓜子可乐 :D) 一. Javascript异步编程简介 至少在语言级别上,Javascript是单线程的,因此异步编程 ...
- 探索Javascript异步编程
异步编程带来的问题在客户端Javascript中并不明显,但随着服务器端Javascript越来越广的被使用,大量的异步IO操作使得该问题变得明显.许多不同的方法都可以解决这个问题,本文讨论了一些方法 ...
- javascript异步编程方案汇总剖析
code[class*="language-"] { padding: .1em; border-radius: .3em; white-space: normal; backgr ...
- Func-Chain.js 另一种思路的javascript异步编程解决方案
本文转载自:https://www.ctolib.com/panruiplay-func-chain.html Func-Chain.js 另一种思路的javascript异步编程,用于解决老式的回调 ...
- javascript异步编程,promise概念
javascript 异步编程 概述 采用单线程模式工作的原因: 避免多线dom操作同步问题,javascript的执行环境中负责执行代码的线程只有一个 内容概要 同步模式和异步模式 事件循环和消息队 ...
- JavaScript异步编程(2)- 先驱者:jsDeferred
JavaScript当前有众多实现异步编程的方式,最为耀眼的就是ECMAScript 6规范中的Promise对象,它来自于CommonJS小组的努力:Promise/A+规范. 研究javascri ...
随机推荐
- 理解WebKit和Chromium: Chromium WebView和Chrome浏览器渲染机制
转载请注明原文地址:http://blog.csdn.net/milado_nju ## 数据对比 前面介绍过Chromium WebView的时候,说过有关ChromiumWebView同Chrom ...
- 如何彻底的删除MySQL数据库(图文教程)
最近有个小课题数据库使用Mysql,提前写一下Mysql作为复习. 第一步当然是要看如何卸载Mysql,因为安装之前要清理掉一切与Mysql有关的数据,否则后边安装失败. 以下操作以Window7操作 ...
- A*寻路算法入门(三)
大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请告诉我,如果觉得不错请多多支持点赞.谢谢! hopy ;) 免责申明:本博客提供的所有翻译文章原稿均来自互联网,仅供学习交流 ...
- ubuntu16.04中可以用于教学的有趣的应用
ubuntu16.04中可以用于教学的有趣的应用 在ubuntu自带的软件中心里,内置了非常丰富的教育应用,可以用于物理,化学等科学课教学,只选取我用过用于教学的软件,优秀的软件不止这些,可以慢慢发掘 ...
- 尚学堂马士兵struts2 课堂笔记(四)
27 结果类型 主要就四种种 dispatch和rediret chain和drdirectaction <package name="resultTypes" namesp ...
- JavaScript进阶(十)Array 数组详解
JS array 数组详解 数组的声明方法 arrayObj = new Array(); 的数组 ,并且第一位是5 数组的运算(传地址) var t2=new Array(); t2[0]=1; t ...
- Leetcode_26_Remove Duplicates from Sorted Array
本文是在学习中的总结,欢迎转载但请注明出处:http://blog.csdn.net/pistolove/article/details/41558551 Remove Duplicates from ...
- Android Wear开发
Android Wear从2014年3月发布到现在已经从1.0发展到2.0(目前还没正式发布).其产品定位也发化了巨大变化,因为Android Wear 1.0通讯方式只有蓝牙,限定了系统,比较依赖手 ...
- Zookeeper Java客户端API的使用
1. 原生api 具体查看下面github代码 2. ZkClient ZkClient是Github上一个开源的ZooKeeper客户端.ZkClient在ZooKeeper原生 A ...
- spring mvc接收List集合、JUI传JSP List
JUI页面是这样的 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 <div class=&quo ...