-
Notifications
You must be signed in to change notification settings - Fork 249
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
手写async await的最简实现(20行) #59
Labels
Comments
dataPromise.then((value1) => {
// data1的value被拿到了 继续调用next并且传递给data
var data2Promise = gen.next(value1)
// console.log('data: ', data);
// 此时就会打印出data
data2Promise.value.then((value2) => {
// data2的value拿到了 继续调用next并且传递value2
gen.next(value2)
// console.log('data2: ', data2);
// 此时就会打印出data2
})
}) 第一个dataPromise应该少了一个.value |
多谢指正~ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
前言
如果让你手写async函数的实现,你是不是会觉得很复杂?这篇文章带你用20行搞定它的核心。
经常有人说async函数是generator函数的语法糖,那么到底是怎么样一个糖呢?让我们来一层层的剥开它的糖衣。
有的同学想说,既然用了generator函数何必还要实现async呢?
这篇文章的目的就是带大家理解清楚async和generator之间到底是如何相互协作,管理异步的。
示例
思路
对于这个简单的案例来说,如果我们把它用generator函数表达,会是怎么样的呢?
我们知道,generator函数是不会自动执行的,每一次调用它的next方法,会停留在下一个yield的位置。
利用这个特性,我们只要编写一个自动执行的函数,就可以让这个generator函数完全实现async函数的功能。
那么大体上的思路已经确定了,
asyncToGenerator
接受一个generator
函数,返回一个promise
,关键就在于,里面用
yield
来划分的异步流程,应该如何自动执行。如果是手动执行
在编写这个函数之前,我们先模拟手动去调用这个
generator
函数去一步步的把流程走完,有助于后面的思考。我们先调用
testG
生成一个迭代器然后开始执行第一次
next
这里返回了一个
promise
,就是第一次getData()
所返回的promise
,注意这段代码要切割成左右两部分来看,第一次调用
next
,其实只是停留在了yield getData()
这里,data
的值并没有被确定。那么什么时候data的值会被确定呢?
下一次调用next的时候,传的参数会被作为上一个yield前面接受的值
也就是说,我们再次调用
gen.next('这个参数才会被赋给data变量')
的时候data
的值才会被确定为'这个参数才会被赋给data变量'
然后往下执行,直到遇到下一个
yield
,继续这样的流程...这是generator函数设计的一个比较难理解的点,但是为了实现我们的目标,还是得去学习它~
借助这个特性,如果我们这样去控制yield的流程,是不是就能实现异步串行了?
这样的一个看着像
callback hell
的调用,就可以让我们的generator函数把异步安排的明明白白。实现
有了这样的思路,实现这个高阶函数就变得很简单了。
先整体看一下结构,有个印象,然后我们逐行注释讲解。
不多不少,22行。
接下来逐行讲解。
源码地址
这个 js文件 的代码可以直接放进浏览器里运行,欢迎调戏。
总结
本文用最简单的方式实现了asyncToGenerator这个函数,这是babel编译async函数的核心,当然在babel中,generator函数也被编译成了一个很原始的形式,本文我们直接以generator替代。
这也是实现promise串行的一个很棒的模式,如果本篇文章对你有帮助,点个赞就好啦。
❤️感谢大家
1.如果本文对你有帮助,就点个赞支持下吧,你的「赞」是我创作的动力。
2.关注公众号「前端从进阶到入院」即可加我好友,我拉你进「前端进阶交流群」,大家一起共同交流和进步。
The text was updated successfully, but these errors were encountered: