JS只能是单线程的
- 进程:CPU资源分配的基本单位
- 线程:CPU执行的最小单位;是建立在进程的基础上运行的单位,共享进程的内存空间
JavaScript的单线程,与它的用途有关。作为浏览器脚本语言,JavaScript的主要用途是与用户互动,以及操作DOM。这决定了它只能是单线程,否则会带来很复杂的同步问题。比如,假定JavaScript同时有两个线程,一个线程在某个DOM节点上添加内容,另一个线程删除了这个节点,这时浏览器应该以哪个线程为准?
任务队列
单线程就意味着,所有任务需要排队,前一个任务结束,才会执行后一个任务。如果前一个任务耗时很长,后一个任务就不得不一直等着。
如果排队是因为计算量大,CPU忙不过来,倒也算了,但是很多时候CPU是闲着的,因为IO设备(输入输出设备)很慢(比如Ajax操作从网络读取数据),不得不等着结果出来,再往下执行。
JavaScript语言的设计者意识到,这时主线程完全可以不管IO设备,挂起处于等待中的任务,先运行排在后面的任务。等到IO设备返回了结果,再回过头,把挂起的任务继续执行下去。
程序里面所有的任务,可以分成两类:同步任务(synchronous)和异步任务(asynchronous)。
-
同步任务是那些没有被引擎挂起、在主线程上排队执行的任务。只有前一个任务执行完毕,才能执行后一个任务。
-
异步任务是那些被引擎放在一边,不进入主线程、而进入任务队列的任务。只有引擎认为某个异步任务可以执行了(比如 Ajax 操作从服务器得到了结果),该任务(采用回调函数的形式)才会进入主线程执行。排在异步任务后面的代码,不用等待异步任务结束会马上运行,也就是说,异步任务不具有“堵塞”效应。
举例来说,Ajax 操作可以当作同步任务处理,也可以当作异步任务处理,由开发者决定。如果是同步任务,主线程就等着 Ajax 操作返回结果,再往下执行;如果是异步任务,主线程在发出 Ajax 请求以后,就直接往下执行,等到 Ajax 操作有了结果,主线程再执行对应的回调函数
具体来说,异步执行的运行机制如下。(同步执行也是如此,因为它可以被视为没有异步任务的异步执行。)
(1)所有同步任务都在主线程上执行,形成一个执行栈(execution context stack)。
(2)主线程之外,还存在一个"任务队列"(task queue)。只要异步任务有了运行结果,就在"任务队列"之中放置一个事件。
(3)一旦"执行栈"中的所有同步任务执行完毕,系统就会读取"任务队列",看看里面有哪些事件。那些对应的异步任务,于是结束等待状态,进入执行栈,开始执行。
(4)主线程不断重复上面的第三步。
下图就是主线程和任务队列的示意图。
只要主线程空了,就会去读取”任务队列”,这就是JavaScript的运行机制。这个过程会不断重复。
事件和回调函数
“任务队列”是一个事件的队列(也可以理解成消息的队列),IO设备完成一项任务,就在”任务队列”中添加一个事件,表示相关的异步任务可以进入”执行栈”了。主线程读取”任务队列”,就是读取里面有哪些事件。
“任务队列”中的事件,除了IO设备的事件以外,还包括一些用户产生的事件(比如鼠标点击、页面滚动等等)。只要指定过回调函数,这些事件发生时就会进入”任务队列”,等待主线程读取。
所谓”回调函数”(callback),就是那些会被主线程挂起来的代码。异步任务必须指定回调函数,当主线程开始执行异步任务,就是执行对应的回调函数。
“任务队列”是一个先进先出的数据结构,排在前面的事件,优先被主线程读取。主线程的读取过程基本上是自动的,只要执行栈一清空,”任务队列”上第一位的事件就自动进入主线程。但是,由于存在后文提到的”定时器”功能,主线程首先要检查一下执行时间,某些事件只有到了规定的时间,才能返回主线程。
Event Loop
主线程从”任务队列”中读取事件,这个过程是循环不断的,所以整个的这种运行机制又称为Event Loop(事件循环)
![img](https://i-blog.csdnimg.cn/blog_migrate/7e39b7f7caa78b2d70776c76e800a2f0.png)
上图中,主线程运行的时候,产生堆(heap)和栈(stack),栈中的代码调用各种外部API,它们在”任务队列”中加入各种事件(click,load,done)。只要栈中的代码执行完毕,主线程就会去读取”任务队列”,依次执行那些事件所对应的回调函数。
加入任务队列中的事件是因为要获取到结果会很慢,进而释放CPU的执行权,进入任务队列;CPU继续执行函数栈中的代码,执行完毕,再去执行任务队列中的回调函数
执行栈中的代码(同步任务),总是在读取”任务队列”(异步任务)之前执行。请看下面这个例子。
var req = new XMLHttpRequest();
req.open('GET', url);
req.onload = function (){};
req.onerror = function (){};
req.send();
上面代码中的req.send方法是Ajax操作向服务器发送数据,它是一个异步任务,意味着只有当前脚本的所有代码执行完,系统才会去读取”任务队列”。所以,它与下面的写法等价。
var req = new XMLHttpRequest();
req.open('GET', url);
req.send();
req.onload = function (){};
req.onerror = function (){};
也就是说,指定回调函数的部分(onload和onerror),在send()方法的前面或后面无关紧要,因为它们属于执行栈的一部分,系统总是执行完它们,才会去读取”任务队列”。
JS中的异步编程
异步任务
- 定时任务
- ajax请求
- 事件函数
上图的代码是打印的依然是---
,并不是接口返回的数据,因为ajax是异步任务,JS会将其回调函数放到任务队列,主线程接着去执行下面的代码:console.log(ret)
,那么打印出来的自然是'---'
;等到主线程所有任务执行完毕,再去依次执行任务队列的回调函数们
多次异步调用的依赖分析
-
多次异步调用的结果顺序不确定
多次执行n个ajax请求,每个请求的延迟不同,回调函数的执行顺序也是不同的
-
异步调用结果如果存在依赖,需要嵌套
通过回调函数的嵌套,实现异步调用的按照顺序执行;但是如果嵌套层次比较多,那么代码可读性比较差,称为回调地狱
Promise
本质上,Promise 是一个对象,代表操作的中间状态 —— 正如它的单词含义 ‘承诺’ ,它保证在未来可能返回某种结果。虽然 Promise 并不保证操作在何时完成并返回结果,但是它保证当结果可用时,你的代码能正确处理结果,当结果不可用时,你的代码同样会被执行,来优雅的处理错误。
好处
使用promise的好处:
- 避免多层异步调用嵌套问题(回调地狱)
- promise对象提供了简洁的api,控制异步操作更加简单
注意
- 创建promise时,它既不是成功也不是失败状态。这个状态叫作pending(待定)。
- 当promise返回时,称为resolved(已解决)
- 一个成功resolved的promise称为fulfilled(实现)。它返回一个值,可以通过将
.then()
块链接到promise链的末尾来访问该值。.then()
块中的执行程序函数将包含promise的返回值。 - 一个不成功resolved的promise被称为rejected(拒绝)了。它返回一个原因(reason),一条错误消息,说明为什么拒绝promise。可以通过将
.catch()
块链接到promise链的末尾来访问此原因。
- 一个成功resolved的promise称为fulfilled(实现)。它返回一个值,可以通过将
基本用法
![image-20211117154532370](http://cdn.upeveryday.cn/img/image-20211117154532370.png)
![image-20211117154357639](http://cdn.upeveryday.cn/img/image-20211117154357639.png)
发送多个ajax请求并保证顺序
将回调地狱改善成了链式编程,实现线性调用
![image-20211117155714512](http://cdn.upeveryday.cn/img/image-20211117155714512.png)
![image-20211117155312707](http://cdn.upeveryday.cn/img/image-20211117155312707.png)
then参数中的函数返回值对象
-
返回promise实例对象
返回的该实例对象会调用下一个then
-
返回普通值
返回的普通值会传递给下一个then,通过then参数中函数的参数接收该值
没有返回实例对象,then会默认创建一个promise实例对象,以此来保证可以调用下一个then
![image-20211117160718221](http://cdn.upeveryday.cn/img/image-20211117160718221.png)
promise的实例方法
console.dir(Promise)
就可以打印此对象所有的属性和方法,那么就可以看到原型方法prototype中的方法,通过函数对象调用
p.then():得到异步任务的正确结果;即resolve函数的参数值
p.catch():获取异常信息;即reject函数的参数值
p.finally:成功与否都会执行
promise的对象方法
通过函数名称调用的方法
p1,p2,p3都是实例对象
async和await
async必须在await所在的函数前面
-
await会阻塞后面代码的执行,事实上, await 只在异步函数里面才起作用。它可以放在任何异步的,基于 promise 的函数之前。它会暂停代码在该行上,直到 promise 完成,然后返回结果值。在暂停的同时,其他正在等待执行的代码就有机会执行了。等到promise的结果确定后再继续执行
-
将async添加到函数声明中,可以告诉函数返回的是promise,而不是直接返回值
![image-20211117164526818](http://cdn.upeveryday.cn/img/image-20211117164526818.png)
axios.get
的返回值是一个Promise实例对象,在其前面加上await,直接得到异步的结果(在promise中存放着),不再需要调用实例方法then和回调函数,代码更加简洁,可以直接获取到异步任务的结果
async函数的返回值是Promise实例对象,那么可以调用实例方法then得到其返回值
多个异步请求的场景: