JavaScript之Promise/Async/Await

JavaScript之Promise/Async/Await

---

前言

对JavaScript中的异步问题Promise/Async/Await等做笔记方便后续的复习

---

提示：以下是本篇文章正文内容

一、什么是异步编程？

Js是单线程事件循环模型。好比一个家里有且只有一个家庭主妇在做家务：打扫卫生、洗衣服、做饭。由于只有一个家庭主妇，因此家庭主妇只能先打扫卫生，再洗衣服，然后是做饭，但是这样消耗的时间太长了。家庭主妇可以将衣服放在洗衣机，将饭放在电饭煲，然后去打扫卫生，卫生打扫好之后再从洗衣机拿衣服出来晾晒，然后取出米饭来吃。

Js也是如此，当Js处理的事件A耗时久的时候，可以将其他的事件B用B模块去处理，事件C用C模块去处理。当B事件处理完之后将处理结果放在Js的队列中，C也是如此。等Js处理完事件A，再到任务队列中取出B事件的结果进行处理，取出C事件的结果进行处理,这就是Js异步编程

总结：1.JS是单线程的 2.主线程任务执行完成后，通过轮询遍历任务队列，把里面的所有任务执行完。

---

二、定时器的任务轮询

定时器（setInterval&&clearInterval）

在Js中，有专门的模块来管理计时器。在主线程进行的同时，定时器模块会去处理定时器事件，当定时器的时间到了之后，定时器模块就会把定时器中的任务放入到任务队列中。当主线程的任务完成之后（可能会很久），Js就会去任务队列中轮询队列中的任务。注：当满足某个条件触发了clearInterval之后，定时器模块就不会再往任务队列中添加任务。

---

三、文件加载任务排序和依赖关系

任务排序

1.在任务列表中，谁先放到任务列表中就先干谁的活。
2.文件加载过程是有快慢的，谁先加载完，谁就先放到队列中。

依赖关系

当某个文件A依赖于另一个文件B的时候，就需要让B先加载，这个时候可以把加载A的任务放在加载B任务的嵌套中。但是嵌套过多会导致回调地狱，使得代码难以维护。

---

四、ajax异步请求任务管理

ajax请求

Js会用专门的Http模块处理请求，当http收到回来的数据之后，就会把数据和任务放到任务队列中。当主线程的任务完成之后，Js就会去任务队列中轮询队列中的任务。

ajax请求嵌套

当某个请求A依赖于上一个请求B的数据的时候，就可以将请求B嵌套在请求A中。Js会用专门的Http模块处理请求A，当Http收到回来的数据之后，就会把数据和任务（A）放到任务队列中。当主线程的任务完成之后，Js就会去任务队列中轮询队列中的任务进而处理A，处理A的时候又会发送B请求，这时候用Http模块处理请求B，当Http收到回来的数据之后，就会把数据和任务（B）放到任务队列中。当主线程的任务完成之后，Js就会去任务队列中轮询队列中的任务进而处理B。但是嵌套过多会导致回调地狱，使得代码难以维护。

---

五、Promise微任务处理机制

微任务队列

用Promise会产生微任务，而像定时器等模块产生的任务为宏任务。微任务会放到微任务队列中，Js会优先处理微任务队列中的任务

Promise

每个then都会产生一个Promise

// An highlighted block
new Promise((resolve,reject) => {
   
resolve('操作成功');
})
	.then(
		val => {
   
		console.log("成功处理业务"