有没有把 Promise, Generator, 和 async/await 之间的关系讲解得比较清楚条理的文章或者博客?

2020-05-09 18:35:07 +08:00
 yazoox

如果,正在学习前端开发。对这几块有点迷糊。

感觉好像是 先有 Promise, 再有 generator,然后现在又有了 async/await

好像越来越“先进”和“简单”。

有没有对这三者的理解 /解析比较好的文章或者博客,想理解得更深入一些?

谢谢!

3100 次点击
所在节点    问与答
28 条回复
woodensail
2020-05-09 18:40:58 +08:00
先有 promise,解决了回调地狱的问题。但是副作用是一段逻辑被切分到多个作用域中,且 return 和异常都被拦截。因为本质上 js 一个函数必须同步执行完毕,想实现异步只能用多个函数来实现。

然后有了 generator,generator 的创举在于允许一个函数执行到一半挂起,等异步回调后继续执行,完美的解决了 promise 带来的副作用。

而 async/await 本质上是 generator 在特殊场景下使用时的一个语法糖而已,省得你去依赖 co 模块了。

至于文章手头还真没有,毕竟也是很老的东西了……
ClericPy
2020-05-09 18:44:57 +08:00
平时遇到问题都直接看 MDN 的, 非要找教程的话,

现代 JavaScript 教程 - https://zh.javascript.info/

是我之前看的, 感觉有点其他语言基础, 理解起来应该不费劲, 至于更深入... 得看想多深了
woodensail
2020-05-09 18:47:04 +08:00
另外再说下关于语法糖的问题,我一般把 async/await 看做 generator,因为 async/await 核心的异步挂起和作用域保持功能已经在 generator 实现了,就算没有 async/await,要不了多少代码也能封装类似的功能出来。

而 promise 到 generator 虽然也能通过 regenerator 的方式来实现,但是缺少作用域保持和异步挂起。
只能通过套一个函数保持作用域,然后多次调用同一个方法,通过 switch case 方式来分片执行。而你的原始代码也被编译得面目全非。是个非常不优雅的 hack 手段。远不如原生的 generator 好。
noobsheldon
2020-05-09 19:01:54 +08:00
Angular Observable
kidlj
2020-05-09 19:04:51 +08:00
阮一峰有一系列几篇博客,从回调,函数科里化,讲到 promise,过渡期的 co 库的实现,然后到 async/await. 非常不错。
sunjourney
2020-05-09 19:13:18 +08:00
@woodensail #3 又是一个阮一峰文章的受害者
helloSpringBoot
2020-05-09 19:39:09 +08:00
lizheming
2020-05-09 21:09:08 +08:00
CosimoZi
2020-05-09 21:09:49 +08:00
continuation 的不同表现形式而已.万变不离其宗.
giuem
2020-05-09 21:17:42 +08:00
https://zhuanlan.zhihu.com/p/83965949 看这篇文章的后半段
JayLin1011
2020-05-09 22:56:25 +08:00
可以看一下阮一峰老師的教程,深入淺出異步編程=。=
zhuowenli
2020-05-09 22:59:43 +08:00
《你不知道的 JavaScript 》中卷
mxT52CRuqR6o5
2020-05-10 02:56:30 +08:00
Promide 搞明白,async/await 自然就明白了,async/await 是 promise 的语法糖
autoxbc
2020-05-10 05:02:02 +08:00
尽管 Babel 的 async/await 是基于生成器实现的,然而在逻辑关系上,完全可以略过生成器,从 Promise 直接到 async/await

学习路径是
1. 彻底了解 Promise 的工作逻辑,注意工作逻辑不是实现细节
http://liubin.org/promises-book/

2. async/await 完全当成 Promise 的语法糖
async 就是在包装 Promise,await 就是解开 Promise
ysc3839
2020-05-10 07:17:37 +08:00
@woodensail Promise 没解决回调地狱,传递给 Promise then 的还是一个个回调函数。async function 才解决了。
按照我的理解,Promise 是提供了一个通用的异步回调和返回值的工具库。没有 Promise 的时候,异步回调一般是把回调函数作为函数参数传递进去,不同库的接口各不相同。有了 Promise 之后,大家都可以用一个统一的接口,可以简化开发。
ciaoly
2020-05-10 07:43:26 +08:00
@sunjourney 何以出此言?阮一峰的博客写的不对吗?
chengzi168
2020-05-10 08:32:22 +08:00
@sunjourney 求解释,阮一峰的文章不对么?
woodensail
2020-05-10 14:48:46 +08:00
@ysc3839 额,那是你用法不对,promise 的正确用法是 fun1().then(fun2).then(fun3)这样,无论多少个异步操作,只需要一层回调即可。缺点就是上面说的你没法直接 return,想 rutern 就只能抛异常,然后就把异常信息污染了。
ysc3839
2020-05-10 15:07:21 +08:00
@woodensail 我知道是这样一个个 then,但是还是把整个代码逻辑拆分成了一个个回调函数。
woodensail
2020-05-10 15:11:33 +08:00
@sunjourney 那啥,不知道你为什么会这么认为,但是我确实没读过他的文章

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/670088

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX