【异步系列二】Promise原理及执行顺序详解

灰太狼 2024-04-06 11:34 60阅读 0赞

### 前言 ###

Promise 是 javascript 中非常重要的一环，熟悉它是必须的，而且在面试中也常常会问到相关面试题。  
在了解 `Promise` 之前，需要了解什么是异步编程，可以参考我的一篇文章：[JavaScript 中异步编程原理解析][JavaScript]

### 1. Promise 简介 ###

Promise 是 JavaScript 的一个内置对象，在语法上是一个构造函数，该构造函数只有一个参数，是一个函数。**初始化时，这个函数在构造之后会直接被异步运行**，所以称之为起始函数。

起始函数包含两个参数： resolve 和 reject.

resolve 和 reject 都是函数，其中调用 resolve 代表一切正常，是成功时的回调； reject 是出现异常是调用的。

**Promise 对象代表一个异步操作。**

有三种状态：

*  **pending**（进行中）：初始状态，既不是成功，也不是失败状态
 *  **resolved** （又称fufilled）（已成功）：意味着操作成功完成
 *  **rejected**（已失败）：意味着操作失败。

**一个 promise 对象只能改变一次状态**，成功或者失败后都会返回结果数据。

Promise 的状态一旦改变，就不能再次改变。因此，一旦执行了第一个 resolve 函数，就不会再执行其他的 resolve函数或者 reject函数。

// 初始状态为 pending
    let pro = new Promise((resolve, reject) => {
        
    	resolve(value);  // 若执行成功函数，则状态变为 resolved
    	reject(value);   // 若执行失败函数，则状态变为 rejected
    }) ;
    pro.then(fn1, fn2);  // fn1: 成功时的执行函数（即Promise状态变为resolved时调用），fn2：失败时的执行函数（Promise状态变为 rejected 时调用）

写几个有关 Promise 的例子，有助于理解。

**当 Promise 刚被new 出来，是pending状态**

const p = new Promise((resolve, reject) => {
        
        console.log(111)
    })
    console.log(p)

![在这里插入图片描述][44035179fe6f4fcab57b4ce62e0533a8.png]

**【PromiseState】就是 Promise 现在的状态**

**当调用 resolved 函数，状态立刻变成 fulfilled 成功**

![在这里插入图片描述][300274b9c955420997e3f839390da5fe.png]

**当调用 reject 函数，状态又会变成 rejected 失败**

![在这里插入图片描述][d3d7dae814bf4160866707745de810f1.png]

**如果两个回调函数都调用，那么则是谁先调用先返回谁的状态**

![在这里插入图片描述][2c2acbaa9f8d4186a4959f89dfce7f89.png]

当我们 new 一个 Promise 时，就已经开始自动执行函数。Promise 是同步的，但 then 是异步的，要注意区分。

![在这里插入图片描述][73f2d407b3534797bf1d5cdb7ee1ffa4.png]

### 2. Promise 的基本流程 ###

![在这里插入图片描述][3664f8ba99a84e81b715d42d9fb3a271.png]

### 3. Promise 的实例方法 ###

Proimse 拥有两个是方法 **then() 和 catch()**

#### then() 方法 ####

成功和失败的回调函数我们是通过 then() 添加，在Promise 状态改变时分别调用。

then() 方法可以接收两个参数，且通常都是函数，第二个参数可忽略。

**then() 方法会返回一个新的 promise**

#### catch() 方法 ####

该方法相当于最近的 then() 方法的第二个参数，指向 reject 的回调函数，另一个作用是：在执行resolve 回调函数时，如果出错，抛出异常，不会停止运行，而是进入 catch() 方法中

**注意：** catch 只捕获最近的 then 的回调函数，前面的 then 的执行不成功结果，有后面的 reject 回调函数执行，如果没有后续 then 回调函数执行，则会被 catch 捕获执行。

### 4. 关于 Promise 的执行顺序 ###

执行顺序：主任务 > 微任务（then()、catch()） > 宏任务 （setTimeout、requestAnimationFrame）

**当我们 new 一个 Promise 时，传入的回调函数为同步代码，会立即执行**，而 .then() .catch() 里面的为 异步微任务。

为了避免意外，**即使是一个已经变成 resolve 状态的 Promise，传递给 then() 的函数也是会被异步调用。**

Promise.resolve().then(() => console.log(2));
    console.log(1)
    
    // 输出结果为：
    // 1
    // 2

下面以一个例子来详细说明 Promise 的执行顺序，大家先认真思考下，然后对比下面的答案。

const p = new Promise((resolve, reject) => {
        
    	console.log(1)
    
    	const q = () => new Promise((resolve, reject) => {
        
    		console.log(3)
    		resolve(4)
    	})
    
    	const r = () => new Promise((resolve, reject) => {
        
    		console.log(7)
    		resolve(8)
    	})
    
    	setTimeout(() => {
        
    		console.log(10)
    	}, 0)
    	
    	resolve(2)
    	
    	q().then(res => {
        
    		console.log(res)
    		setTimeout(() => {
        
    			console.log(6)
    		},0)
    	})
    
    	r().then(res => {
        
    		console.log(res)
    		setTimeout(() => {
        
    			console.log(9)
    		},0)
    	})
    })
    
    console.log(5)
    p.then(res => {
        
    	console.log(res)
    })

/**
    	Promise 一旦被声明就会立即执行，此时内部的代码会按照顺序执行，但是 resolve(res) 的代码会是异步，所以当 Promise() 中的同步代码会先执行， resolve() 的代码会后执行，resolve() 之后的代码也先执行，Promise 中的所有同步和异步代码执行完毕之后，resolve() 才执行。
    	
    	上面这段代码的执行顺序如下所示:
    
    	我们将其分为三个阶段来分析这段代码的执行。
    
    	第一阶段：
    		同步代码先执行。
    		因为同步代码最先执行，又因为 Promise 一旦被调用就会立即执行所以会打印 --- 1
    		resolve(2) 作为异步，仍在等待同步代码执行完毕，且 p 内部的全部代码（同步、异步）执行完成之后才会被执行。
    		然后声明了一个 q，r 的Promise，然后调用q，同步代码立即执行，打印 --- 3
    		resolve(4), 作为异步仍在等待同步代码执行完毕，且 q 内部的代码全部执行完成之后才会被执行。
    		同理，打印 r  中的同步代码， resolve(8) 作为异步等待。  ----------- 7
    		到这里 p 内部的同步代码执行完毕，此时跳出 p 执行外部的同步代码，打印 ----5
    
    		此时代码执行顺序为：1  3  7  5
    
    	第二阶段：
    		Promise() 中异步的 resolve() 执行
    		当同步执行之后就是 resolve() 异步的代码， p() 先执行，但是 p() 自己的resolve() 必须等到其内部全部的异步 resolve() 执行完毕后才能够执行。
    		所以此时应该是先执行的是 q().then()， 打印 ----- 4
    		然后打印的是 r().then()，打印 --------- 8
    		然后 p() 内部的 resolve() 异步全部执行完毕，最后就要执行 p().then()，打印 ----- 2
    		
    		此时代码执行顺序为：4  8  2
    
    	第三阶段：
    	setTimeout() 异步函数的执行。
    	由于 Promise 是JS引擎的内部任务，而 setTimeout 是浏览器外部的API，所以 Promise 的优先级高于 setTimeout，也就是因此，只有所有的 Promise() 内的 resolve() 执行完成之后，才会执行 setTimeout 函数。
    	而 setTimeout 函数的执行顺序就看它被调用的先后顺序
    	从上到下一次调用，打印 ----- 10  6  9 	
    */

执行结果如下所示：

![在这里插入图片描述][96fdebc389fe4cc98c426921ed281ce5.png]

### 5. Promise执行顺序思路 ###

1、按照 **同步先行，异步靠后** 原则，阅读代码时，先分析同步代码和异步代码。Promise对象虽然是微任务，但 new Promise 时的回调函数（起始函数）是同步执行的。

2、在 resolve 执行时，Promise 对象的状态变更为 已完成，所以 then() 函数的回调被注册到 微任务事件中，此时并不执行，所以接下来会跳出 p 执行外部的同步代码，输出 5。

3、同步代码执行结束后，观察异步代码的**宏任务** 和 **微任务**。微任务会优先执行，Promise 为微任务，setTimeout 为宏任务

关于**宏任务** 与 **微任务** 的执行顺序，在我的\* 【异步系列五】博客中解释的更清楚，有需要的可以看下。

博客地址：[【异步系列五】关于async/await与promise执行顺序详细解析及原理详解][async_await_promise]

[JavaScript]: https://blog.csdn.net/qq_41131745/article/details/126968831?spm=1001.2014.3001.5502
[44035179fe6f4fcab57b4ce62e0533a8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/c8363f6755374cb182980b918545ad33.png
[300274b9c955420997e3f839390da5fe.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/6b501b7f79344530a27b9c800e97ed1d.png
[d3d7dae814bf4160866707745de810f1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/103f6e4a2071419192cf9f4de34decf2.png
[2c2acbaa9f8d4186a4959f89dfce7f89.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/f28a1991404a4fb7b83a0186c6d46890.png
[73f2d407b3534797bf1d5cdb7ee1ffa4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/4d25ace9a1684f0d931f1ef3ed1faf73.png
[3664f8ba99a84e81b715d42d9fb3a271.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/62dc5a3904b84cde9de61922630e45fd.png
[96fdebc389fe4cc98c426921ed281ce5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/10457a135efd406ebf29319c6b277188.png
[async_await_promise]: https://blog.csdn.net/qq_41131745/article/details/127755975?spm=1001.2014.3001.5502