Promise原理

喜欢ヅ旅行 2024-03-31 15:25 55阅读 0赞

JS引擎是单线程的，直白来说就是一个时间点下JS引擎只能去做一件事情，而java这种多线程语言可以同时做几件事情。JS做的任务分为同步和异步两种，所谓异步简单说就是一个任务不是连续完成的，先执行第一段等做好了准备再回过头执行第二段，第二段也被叫做回调。而同步则是连贯完成的。

像读取文件、网络请求这种任务属于异步任务，花费时间很长但中间的操作不需要JS引擎自己完成，他只用等别人准备好了把数据给他他再继续执行回调部分。

异步任务的回调遵循先进先出，在JS引擎空闲时会一轮一轮地被取出，所以被叫做循环。

常见的异步任务：定时器，ajax，事件绑定，回调函数，async await，promise

#### 微任务和宏任务 ####

V8是浏览器的引擎，JS执行时V8引擎会创建一个全局执行上下文，在创建上下文的同时，V8也会在内部创建一个微任务队列。有微任务队列自然就有宏任务队列，任务队列中的每一个任务则都称为宏任务，在当前宏任务执行过程中如果有新的微任务产生就会添加到微任务队列中。

<table style="width:598px;"> 
 <tbody> 
  <tr> 
   <td style="width:288px;">宏任务</td> 
   <td style="width:307px;">微任务</td> 
  </tr> 
  <tr> 
   <td style="width:288px;">渲染事件</td> 
   <td style="width:307px;">Promise.[then/catch/finally]</td> 
  </tr> 
  <tr> 
   <td style="width:288px;">请求</td> 
   <td style="width:307px;">proxy代理</td> 
  </tr> 
  <tr> 
   <td style="width:288px;">script代码块</td> 
   <td style="width:307px;">MutationObserver(监听DOM)</td> 
  </tr> 
  <tr> 
   <td style="width:288px;">setTimeout</td> 
   <td style="width:307px;">node中的process.nextTick</td> 
  </tr> 
  <tr> 
   <td style="width:288px;">setinterval</td> 
   <td style="width:307px;">queueMicrotask</td> 
  </tr> 
  <tr> 
   <td style="width:288px;">Node中的setimmediate</td> 
   <td style="width:307px;">async/await</td> 
  </tr> 
  <tr> 
   <td style="width:288px;">I/O</td> 
   <td style="width:307px;">...</td> 
  </tr> 
  <tr> 
   <td style="width:288px;">...</td> 
   <td style="width:307px;"> <p></p> </td> 
  </tr> 
 </tbody> 
</table>

执行顺序描述：

首先走第一个宏任务，第一个宏任务执行结束后就会判断现在微任务队列里面有没有可执行的微任务，如果有就执行所有微任务，会清空微任务队列然后再开始新的宏任务。

宏任务是一个一个执行的，但每执行完一个宏任务都会把微任务清空，这样就构成了一个循环，这个循环就叫做事件循环。Eventloop事件循环机制

事件循环由宏任务和在执行宏任务期间产生的所有微任务组成。完成当下的宏任务后会立刻执行所有在此期间入队的微任务。这种设计是为了给紧急任务一个插队的机会否则新入队的任务永远被放在队尾。本轮循环中的微任务实际上就是在插队，这样微任务中所做的状态修改，在下一轮事件循环中也能得到同步。

微任务是ES6语法规定的，微任务的响应速度比setTimeout会更快

宏任务是由浏览器规定的 ，宏任务可以理解是每次执行栈执行的代码就是一个宏任务（包括每次从事件队列中获取一个事件回调并放到执行栈中执行）。事件的触发是依赖于浏览器的实现，平台有他自己的事件注册和派发机制，所以不管怎样事件的独立注册表和派发机制导致他也不会和js存在一个进程中，事件的管理中心一定是另外一个进程中实现的，那么去派发事件，也就是宏任务。

规定的地方不一样导致存放位置的不一样所以才有了图中存放位置的不同

[【study】宏任务和微任务的区别是什么 - 掘金 (juejin.cn)][study_ - _ _juejin.cn]

输出结果1 5 6 8 4 7 2 3

*  Promise 是一个类，在执行这个类的时候会传入一个函数，这个函数会立即执行。
 *  Promise 会有三种状态
    
     *  Pending 等待
     *  Fulfilled 完成
     *  Rejected 失败

状态只能由 Pending --> Fulfilled 或者 Pending --> Rejected，且一但发生改变便不可二次修改。

三个方法`reject`、`resolve`、`then`。其中前两个可以直接调用，也可以在回调中使用，说明是内部方法也是静态方法。`then`可以链式调用，说明应该是返回了一个新的Promise对象。

Promise 中使用 resolve 和 reject 两个函数来更改状态。

*  每次调用`then`都创建了微任务。
    
     *  如果状态是成功，调用成功回调函数
     *  如果状态是失败，调用失败回调函数

[study_ - _ _juejin.cn]: https://juejin.cn/post/6880787856353132552