早期的回调函数
回调函数我们经常有写到,比如:
ajax(url,(res)=>{console.log(res);})复制代码
但是这种回调函数有一个大缺陷,就是会写出回调地狱(Callback hell
)。
比如,如果多个回调存在依赖,可能会写成:
ajax(url,(res)=>{console.log(res);//...处理代码ajax(url2,(res2)=>{console.log(res2);//...处理代码ajax(url3,(res3)=>{console.log(res3);//...处理代码})})})复制代码
这个就是回调地狱:
内嵌函数存在耦合,牵一发而动全身,改一个会影响其它地方
内嵌函数多了,发生错误要怎么处理呢?这是一个难题
早期回调函数的优缺点:
优点:解决了同步阻塞的问题(只要有一个任务耗时很长,后面的任务都必须排队等着,会拖延整个程序的执行)
缺点:回调地狱;不能用try catch
捕获错误;不能return
过渡方案Generator
ES6 新引入了Generator
函数(生成器函数),可以通过yield
关键字,把函数的执行流挂起,为改变执行流程提供了可能,从而为异步编程提供解决方案。最大的特点就是可以控制函数的执行。
Generator
有两个区分于普通函数的部分:
一是在function
后面,函数名之前有个*
,用来表示函数为Generator
函数
函数内部有yield
表达式,用来定义函数内部的状态
Generator
函数的具体使用方式是:
在Generator
函数内部执行一段代码,如果遇到yield
关键字,那么 JS 引擎将返回关键字后面的内容给外部,并暂停该函数的执行。
外部函数可以通过next
方法恢复函数的执行。
function*fn(){console.log("one");yield'1';console.log("two");yield'2';console.log("three");return'3';}复制代码
调用Generator
函数和调用普通函数一样,在函数名后面加上()
即可,但是Generator
函数不会像普通函数一样立即执行,而是返回一个指向内部状态对象的指针,所以要调用遍历器对象Iterator
的next
方法,指针就会从函数头部或者上一次停下来的地方开始执行。
如下:
next
方法:
一般情况下,next
方法不传入参数的时候,yield
表达式的返回值是undefined
。当next
传入参数的时候,该参数会作为上一步yield
的返回值。
Generator
生成器也是通过同步的方式写异步代码的,也可以解决回调地狱的问题,但是比较难以理解,希望下面的例子能够帮助你理解Generator
生成器:
function*sum(a){console.log('a:',a);letb=yield1;console.log('b:',b);letc=yield2;console.log('c:',c);letsum=a+b+c;console.log('sum:',sum)returnsum;}复制代码
next
不传参时,yield
返回undefined
如下图:
当第一次执行next
时,传参会被忽略,并且函数暂停在yield 1
处,所以返回1
当第二次执行next
时,不传参,那么yield 1
返回的是undefined
,所以b
的值是undefined
第三次同理,c
的值为undefined
当next
传入参数时,该参数会作为上一步yield
的返回值
如下图:
当第一次执行next
时,传参(20
)会被忽略,并且函数暂停在yield 1
处,所以返回1
当第二次执行next
时,传参30
,作为yield 1
返回的值,所以b = yield 1
,b
的值是30
当第二次执行next
时,传参40
,作为yield 2
返回的值,所以c = yield 2
,c
的值是40
协程
我们知道,async
/await
是一个自动执行的Generator
函数,上面已经介绍了Generator
函数,那么接下来很有必要介绍一下V8 引擎是如何实现一个函数的暂停和恢复的呢?
要搞懂函数为何能暂停和恢复,首先要了解协程的概念。进程和线程我们都知道,那么协程是什么呢?
协程是一种比线程更加轻量级的存在。可以把协程看成是跑在线程上的任务,一个线程上可以存在多个协程,但是在线程上同时只能执行一个协程,比如当前执行的是 A 协程,要启动 B 协程,那么 A 协程就需要将主线程的控制权交给 B 协程,这就体现在 A 协程暂停执行,B 协程恢复执行;同样,也可以从 B 协程中启动 A 协程。通常,如果从 A 协程启动 B 协程,我们就把 A 协程称为 B 协程的父协程。
正如一个进程可以拥有多个线程一样,一个线程也可以拥有多个协程。最重要的是,协程不是被操作系统内核所管理,而是完全由程序所控制(即在用户态执行)。这样带来的好处就是性能得到了很大的提升,不会像线程切换那样消耗资源。
可以结合代码理解:
function*genDemo(){console.log("开始执行第一段")yield'generator2'console.log("开始执行第二段")yield'generator2'console.log("开始执行第三段")yield'generator2'console.log("执行结束")return'generator2'}console.log('main0')letgen=genDemo()console.log(gen.next().value)console.log('main1')console.log(gen.next().value)console.log('main2')console.log(gen.next().value)console.log('main3')console.log(gen.next().value)console.log('main4')复制代码
执行过程如下图所示,可以重点关注协程之间的切换:
从图中可以看出来协程的四点规则:
通过调用生成器函数genDemo
来创建一个协程gen
,创建之后,gen
协程并没有立即执行。
要让gen
协程执行,需要通过调用gen.next
。
当协程正在执行的时候,可以通过yield
关键字来暂停gen
协程的执行,并返回主要信息给父协程。
如果协程在执行期间,遇到了return
关键字,那么 JS 引擎会结束当前协程,并将return
后面的内容返回给父协程。
协程之间的切换:
gen
协程和父协程是在主线程上交互执行的,并不是并发执行的,它们之前的切换是通过yield
和gen.next
来配合完成的。
当在gen
协程中调用了yield
方法时,JS 引擎会保存gen
协程当前的调用栈信息,并恢复父协程的调用栈信息。同样,当在父协程中执行gen.next
时,JS 引擎会保存父协程的调用栈信息,并恢复gen
协程的调用栈信息。
其实在 JS 中,Generator
生成器就是协程的一种实现方式。
成熟方案Promise
关于Promise
,可以去看我上一篇文章:《异步编程 Promise:从使用到手写实现(4200字长文)》,在这一篇文章中详细介绍了Promise
如何解决回调地狱的问题,了解Promise
和微任务的渊源,然后带你一步一步的解构手写实现一个简单的Promise
,最后简单介绍并手写实现了一些Promise
的 API,包括Promise.all
、Promise.allSettled
、Promise.race
、Promise.finally
等API。
终极解决方案async
/await
使用Promise
能很好地解决回调地狱的问题,但是这种方式充满了Promise
的then()
方法,如果处理流程比较复杂的话,那么整段代码将充斥着then
,语义化不明显,代码不能很好地表示执行流程。
基于这个原因,ES7 引入了async
/await
,这是 JavaScript 异步编程的一个重大改进,提供了在不阻塞主线程的情况下使用同步代码实现异步访问资源的能力,并且使得代码逻辑更加清晰。
其实async
/await
技术背后的秘密就是Promise
和Generator
生成器应用,往低层说就是微任务和协程应用。要搞清楚async
和await
的工作原理,我们得对async
和await
分开分析。
async
async
到底是什么?根据 MDN 定义,async
是一个通过异步执行并隐式返回Promise
作为结果的函数。重点关注两个词:异步执行和隐式返回Promise
。
先来看看是如何隐式返回Promise
的,参考下面的代码:
asyncfunctionasync1(){return'秀儿';}console.log(async1());//Promise{<fulfilled>:"秀儿"}复制代码
执行这段代码,可以看到调用async
声明的async1
函数返回了一个Promise
对象,状态是resolved
,返回结果如下所示:Promise {<fulfilled>: "秀儿"}
。和Promise
的链式调用then
中处理返回值一样。
await
await
需要跟async
搭配使用,结合下面这段代码来看看await
到底是什么:
asyncfunctionfoo(){console.log(1)leta=await100console.log(a)console.log(2)}console.log(0)foo()console.log(3)复制代码
站在协程的视角来看看这段代码的整体执行流程图:
结合上图来分析async
/await
的执行流程:
首先,执行console.log(0)
这个语句,打印出来0
。
紧接着就是执行foo
函数,由于foo
函数是被async
标记过的,所以当进入该函数的时候,JS 引擎会保存当前的调用栈等信息,然后执行foo
函数中的console.log(1)
语句,并打印出1
。
当执行到await 100
时,会默认创建一个Promise
对象
代码如下所示:let promise_ = new Promise((resolve,reject){ resolve(100) })
在这个promise_
对象创建的过程中,可以看到在executor
函数中调用了resolve
函数,JS 引擎会将该任务提交给微任务队列。
然后 JS 引擎会暂停当前协程的执行,将主线程的控制权转交给父协程执行,同时会将promise_
对象返回给父协程。
主线程的控制权已经交给父协程了,这时候父协程要做的一件事是调用promise_.then
来监控promise
状态的改变。
接下来继续执行父协程的流程,执行console.log(3)
,并打印出来3
。
随后父协程将执行结束,在结束之前,会进入微任务的检查点,然后执行微任务队列,微任务队列中有resolve(100)
的任务等待执行,执行到这里的时候,会触发promise_.then
中的回调函数,如下所示:
promise_.then((value)=>{//回调函数被激活后//将主线程控制权交给foo协程,并将vaule值传给协程})复制代码
该回调函数被激活以后,会将主线程的控制权交给foo
函数的协程,并同时将value
值传给该协程。
foo
协程激活之后,会把刚才的value
值赋给了变量a
,然后foo
协程继续执行后续语句,执行完成之后,将控制权归还给父协程。
以上就是await
/async
的执行流程。正是因为async
和await
在背后做了大量的工作,所以我们才能用同步的方式写出异步代码来。
当然也存在一些缺点,因为await
将异步代码改造成了同步代码,如果多个异步代码没有依赖性却使用了await
会导致性能上的降低。
async
/await
总结
Promise
的编程模型依然充斥着大量的then
方法,虽然解决了回调地狱的问题,但是在语义方面依然存在缺陷,代码中充斥着大量的then
函数,这就是async
/await
出现的原因。
使用async
/await
可以实现用同步代码的风格来编写异步代码,这是因为async
/await
的基础技术使用了Generator
生成器和Promise
,Generator
生成器是协程的实现,利用Generator
生成器能实现生成器函数的暂停和恢复。
另外,V8 引擎还为async
/await
做了大量的语法层面包装,所以了解隐藏在背后的代码有助于加深你对async
/await
的理解。
async
/await
无疑是异步编程领域非常大的一个革新,也是未来的一个主流的编程风格。其实,除了 JavaScript,Python、Dart、C# 等语言也都引入了async
/await
,使用它不仅能让代码更加整洁美观,而且还能确保该函数始终都能返回Promise
。
异步编程总结
早期的异步回调函数虽然解决了同步阻塞的问题,但是容易写出回调地狱。
Generator
生成器最大的特点是可以控制函数的执行,是协程的一种实现方式。
Promise
的更多内容可以看我的这篇文章:《异步编程 Promise:从使用到手写实现(4200字长文)》:/post/6978419919582920740
async
/await
可以算是异步编程的终极解决方案,它通过同步的方式写异步代码,可以把await
看作是让出线程的标志,先去执行async
函数外部的代码,等调用栈为空再回来调用await
后面的代码。
关于本文
来源:起风了Q
/post/6978689182809997320
1. JavaScript 重温系列(22篇全)
2. ECMAScript 重温系列(10篇全)
3. JavaScript设计模式 重温系列(9篇全)
4.正则 / 框架 / 算法等 重温系列(16篇全)
5.Webpack4 入门(上)||Webpack4 入门(下)
6.MobX 入门(上)||MobX 入门(下)
7. 120+篇原创系列汇总
回复“加群”与大佬们一起交流学习~
点击“阅读原文”查看 120+ 篇原创文章