---
title: Promise
author: powerfulyang
date: 2023-02-16
public: true
tags: 
    - Promise
---

## Promise的三种状态

 (1). 待定(pending): 初始状态，既没有被兑现，也没有被拒绝；当执行executor中的代码时，处于该状态；

 (2). 已兑现(fulfilled): 意味着操作成功完成；执行了resolve时，处于该状态； (这个状态通常**也叫做 resolved**，更容易被记住)

 (3). 已拒绝(rejected): 意味着操作失败；执行了reject时，处于该状态；

 注：一旦状态被确定下来，Promise的状态会被 锁死，该Promise的状态是不可更改的。

在我们调用resolve的时候，如果resolve传入的值本身不是一个Promise，那么会将该Promise的状态变成 兑现（fulfilled）； 在之后我们去调用reject时，已经不会有任何的响应了（并不是这行代码不会执行，而是无法改变Promise状态)

```js
{
    console.log("----------3. Promise的三种状态----------");
    /* const myPromise = new Promise((resolve, reject) => {
        resolve("333");
    });
    myPromise.then(res => {}).catch(err => {}); */
    // 下面代码是立即执行的，等价于上面代码
    new Promise((resolve, reject) => {
        // 状态1 该进来的时候是 pending状态, 待定状态
        console.log("------------------------");
        resolve(11); //状态2 fulfilled 成功状态
        reject(22); //状态3  rejected 失败状态 (注：不生效了，因为前面resolve已经确定状态了，就锁定了，不能再改了)
    })
        .then(res => {
            console.log(res);
        })
        .catch(err => {
            console.log(err);
        });
}
```

## resolve 参数

(1). 如果resolve传入一个普通的值或者对象，那么这个值会作为then回调的参数。

(2). 如果resolve中传入的是另外一个Promise，那么这个新Promise会决定原外层Promise的状态.

      A. 内层Promise调用resolve(fulfilled状态)，那么就进入then中的回调成功的位置

      B. 内层Promise调用reject(rejected状态)，那么就进入then中回调失败的位置  或者  catch 中

(3). resolve中传入的是一个对象，并且这个对象有实现then方法，那么会执行该then方法，并且根据then方法的结果来决定Promise的状态

       A. then中调用resolve，那么最终进入then中的回调成功的位置

       B. then中调用reject，那么最终就进入then中回调失败的位置  或者  catch 中
```js
// 4.1 传入普通值
{
    console.log("--------------4.1 传入普通值------------------");
    const promiseResult = new Promise((resolve, reject) => {
        resolve("ypf1");
    });
    promiseResult.then(res => console.log(res)); //ypf1
}
// 4.2 传入Promise
{
    console.log("-------------- 4.2 传入Promise------------------");
    const promiseResult = new Promise((resolve, reject) => {
        resolve(
            new Promise((resolve2, reject2) => {
                reject2("ypf2");
            })
        );
    });
    promiseResult.then(null, err => console.log(err)); //ypf2
}

// 4.3 传入对象，且对象有实现then方法
{
    console.log("------4.3 传入对象，且对象有实现then方法-----------");
    const promiseResult = new Promise((resolve, reject) => {
        resolve({
            then: function (resolve2, reject2) {
                reject2("ypf3");
            },
        });
    });
    promiseResult.then(null, err => console.log(err)); //ypf3
}
```

## 对象方法

### then

(1). then方法接收两个参数：

      A.fulfilled的回调函数：当状态变成fulfilled时会回调的函数；

      B.reject的回调函数：当状态变成reject时会回调的函数；

**注：reject的回调函数等价于catch方法中调用**

(2). **then方法本身也是有返回值的, 它的返回值是Promise.**

  A. 如果我们返回的是一个普通值(数值/字符串/普通对象/undefined), 那么这个普通的值被作为一个新的Promise的resolve值

  B. 如果我们返回的是一个Promise，那么当前的Promise的状态会由传入的Promise的状态来决定 相当于状态进行了移交 【原理同 ‘resolve参数’】

  C. 如果返回的是一个对象, 并且该对象实现了then方法，则由then方法中的状态进行决定哦 【原理同 ‘resolve参数’】

  D. 当then方法抛出一个异常时，那么它处于reject状态；

### catch

catch 也是支持链式吊用的。
```js
{
    console.log("-------2.3 catch的返回值------------");
    const promise = new Promise((resolve, reject) => {
        reject("ypf1");
    });

    promise
        .then(res => {
            console.log("res:", res);
        })
        .catch(err => {
            console.log("err:", err); //先执行这句话 【err: ypf1】
            return "ypf2";
        })
        .then(res => {
            console.log("res result:", res); //再执行这句话 【res result: ypf2】
        })
        .catch(err => {
            console.log("err result:", err);
        });
}
```

### finally

## 静态方法

### resolve

### reject

### all

(1). 它的作用是将多个Promise包裹在一起形成一个新的Promise；

(2). 新的Promise状态由包裹的所有Promise共同决定：

      A. 当所有的Promise状态变成fulfilled状态时(resolved)，新的Promise状态为fulfilled，并且会将所有Promise的返回值组成一个数组；

      B. 当有一个Promise状态为reject时，新的Promise状态为reject，并且会将第一个reject的返回值作为参数；

### allSettled

(1). 背景

　　all方法有一个缺陷：当有其中一个Promise变成reject状态时，新Promise就会立即变成对应的reject状态。

   那么对于resolved的，以及依然处于pending状态的Promise，我们是获取不到对应的结果的；

(2). 在ES11（ES2020）中，添加了新的API Promise.allSettled：该方法会在**所有的Promise都有结果（settled），无论是fulfilled，还是reject时，才会有最终的状态**；

       并且这个Promise的结果一定是fulfilled的；

(3).返回值：

      allSettled的结果是一个数组，数组中存放着每一个Promise的结果，并且是对应一个对象的；这个对象中包含status状态，以及对应的value值；

      console.log(item.status, item.value, item.reason);

      A.statue：表示状态， fulfilled 或 rejected

      B.value: fulfilled时对应的内容

      C.reason: reject时对应的内容

### race

如果有一个Promise有了结果，我们就希望决定最终新Promise的状态，那么可以使用race方法：

### any

any方法是ES12中新增的方法，和race方法是类似的：

  (1). any方法会等到一个fulfilled状态，才会决定新Promise的状态；

  (2). 如果所有的Promise都是reject的，那么也会等到所有的Promise都变成rejected状态；

 注： 如果所有的Promise都是reject的，那么会报一个AggregateError的错误。

## Promise 的实现

```js
class Promise {
    constructor(executor) {
        this.status = 'PENDING'; // 初始化状态声明 PENDING RESOLVED REJECTED
        this.data = null; // 成功值
        this.reason = null; // 失败值
        this.resolvecbQueue = []; // 成功回调队列
        this.rejectcbQueue = []; // 失败回调队列

        executor(this.resolve.bind(this), this.reject.bind(this));
    }

    resolve(data) {
        // 负责执行
        if (this.status === 'PENDING') {
            this.status = 'RESOLVED';
            this.data = data;
            // 执行回调
            this.resolvecbQueue.forEach((itemFn) => {
                itemFn(data);
            });
        }
    }

    reject(reason) {
        if (this.status === 'PENDING') {
            this.status = 'REJECTED';
            this.reason = reason;
            // 执行回调
            this.rejectcbQueue.forEach((itemFn) => {
                itemFn(reason);
            });
        }
    }

    // then 一定是要返回 Promise, 两个传进来的参数是成功回调, 失败回调
    // promise1.then(onResolved, onRejected)
    then(onResolvedFn, onRejectedFn) {
        // 类型判断, 如果不是function类型, 则让它是个function
        onResolvedFn = typeof onResolvedFn === 'function' ?  onResolvedFn : function (value) {};
        onRejectedFn = typeof onRejectedFn === 'function' ?  onRejectedFn : function (reason) {};
        
        // 在注册阶段执行
        if (this.status === 'PENDING') {
            return new Promise((resolve, reject) => {
                // 注册阶段 我们并不确定是调用哪个类型, 所以需要将两种情况都放入到队列里
                this.resolvecbQueue.push(value => {
                    const returndata = onResolvedFn(value); // 执行的时候需要做判断
                    if (returndata instanceof Promise) {
                        returndata.then(resolve, reject);
                    } else {
                        resolve(value);
                    }
                });
                // 同理
                // this.rejectcbQueue.push(reason => onRejectedFn(reason));
            });
        }

        // 说明是要返回Promise
        if (this.status === 'RESOLVED') {
            return new Promise((resolve, reject) => {
                // eg: .then(value => value, () => {})
                // 需要判断onResolvedFn 返回值 Promise类型, 没有则直接 resolve
                const returndata = onResolvedFn(this.data);
                // 需要继续then下去
                if (returndata instanceof Promise) {
                    // 继续执行
                    returndata.then(resolve, reject);
                } else {
                    resolve(this.data);
                }
            });
        }

        if (this.status === 'REJECTED') {
            return new Promise((resolve, reject) => {
                const returndata = onRejectedFn(this.data);
                if (returndata instanceof Promise) {
                    returndata.then(resolve, reject);
                } else {
                    reject(this.value);
                }
            });
        }
    }
}
```

## 关于 postMessage 

> https://stackoverflow.com/questions/60694838/js-web-worker-is-a-macro-task

Concretely this does mean that if you schedule two asynchronous tasks from the same event loop, the message event should win, even though it's been called after:
```js
setTimeout( () => console.log( 'timeout' ), 0 );
onmessage = e => console.log( 'message' );
postMessage( '', '*' );
// timeout 
// message
```

Promise

---
title: Promise
author: powerfulyang
date: 2023-02-16
public: true
tags: 
    - Promise
    - Standard built-in objects
---

## Promise的三种状态

 (1). 待定(pending): 初始状态，既没有被兑现，也没有被拒绝；当执行executor中的代码时，处于该状态；

 (2). 已兑现(fulfilled): 意味着操作成功完成；执行了resolve时，处于该状态； (这个状态通常**也叫做 resolved**，更容易被记住)

 (3). 已拒绝(rejected): 意味着操作失败；执行了reject时，处于该状态；

 注：一旦状态被确定下来，Promise的状态会被 锁死，该Promise的状态是不可更改的。

在我们调用resolve的时候，如果resolve传入的值本身不是一个Promise，那么会将该Promise的状态变成 兑现（fulfilled）； 在之后我们去调用reject时，已经不会有任何的响应了（并不是这行代码不会执行，而是无法改变Promise状态)

```js
{
    console.log("----------3. Promise的三种状态----------");
    /* const myPromise = new Promise((resolve, reject) => {
        resolve("333");
    });
    myPromise.then(res => {}).catch(err => {}); */
    // 下面代码是立即执行的，等价于上面代码
    new Promise((resolve, reject) => {
        // 状态1 该进来的时候是 pending状态, 待定状态
        console.log("------------------------");
        resolve(11); //状态2 fulfilled 成功状态
        reject(22); //状态3  rejected 失败状态 (注：不生效了，因为前面resolve已经确定状态了，就锁定了，不能再改了)
    })
        .then(res => {
            console.log(res);
        })
        .catch(err => {
            console.log(err);
        });
}
```

## resolve 参数

(1). 如果resolve传入一个普通的值或者对象，那么这个值会作为then回调的参数。

(2). 如果resolve中传入的是另外一个Promise，那么这个新Promise会决定原外层Promise的状态.

      A. 内层Promise调用resolve(fulfilled状态)，那么就进入then中的回调成功的位置

      B. 内层Promise调用reject(rejected状态)，那么就进入then中回调失败的位置  或者  catch 中

(3). resolve中传入的是一个对象，并且这个对象有实现then方法，那么会执行该then方法，并且根据then方法的结果来决定Promise的状态

       A. then中调用resolve，那么最终进入then中的回调成功的位置

       B. then中调用reject，那么最终就进入then中回调失败的位置  或者  catch 中
```js
// 4.1 传入普通值
{
    console.log("--------------4.1 传入普通值------------------");
    const promiseResult = new Promise((resolve, reject) => {
        resolve("ypf1");
    });
    promiseResult.then(res => console.log(res)); //ypf1
}
// 4.2 传入Promise
{
    console.log("-------------- 4.2 传入Promise------------------");
    const promiseResult = new Promise((resolve, reject) => {
        resolve(
            new Promise((resolve2, reject2) => {
                reject2("ypf2");
            })
        );
    });
    promiseResult.then(null, err => console.log(err)); //ypf2
}

// 4.3 传入对象，且对象有实现then方法
{
    console.log("------4.3 传入对象，且对象有实现then方法-----------");
    const promiseResult = new Promise((resolve, reject) => {
        resolve({
            then: function (resolve2, reject2) {
                reject2("ypf3");
            },
        });
    });
    promiseResult.then(null, err => console.log(err)); //ypf3
}
```

### Promise 的构造函数

new Promise() 的过程是同步的，如下代码的执行顺序：
```js
new Promise(() => {
  console.log('new Promise')
})

console.log('after new Promise')
// new Promise
// after new Promise
```

## 对象方法

### then

(1). then方法接收两个参数：

      A.fulfilled的回调函数：当状态变成fulfilled时会回调的函数；

      B.reject的回调函数：当状态变成reject时会回调的函数；

**注：reject的回调函数等价于catch方法中调用**

(2). **then方法本身也是有返回值的, 它的返回值是Promise.**

  A. 如果我们返回的是一个普通值(数值/字符串/普通对象/undefined), 那么这个普通的值被作为一个新的Promise的resolve值

  B. 如果我们返回的是一个Promise，那么当前的Promise的状态会由传入的Promise的状态来决定 相当于状态进行了移交 【原理同 ‘resolve参数’】

  C. 如果返回的是一个对象, 并且该对象实现了then方法，则由then方法中的状态进行决定哦 【原理同 ‘resolve参数’】

  D. 当then方法抛出一个异常时，那么它处于reject状态；

### catch

catch 也是支持链式吊用的。
```js
{
    console.log("-------2.3 catch的返回值------------");
    const promise = new Promise((resolve, reject) => {
        reject("ypf1");
    });

    promise
        .then(res => {
            console.log("res:", res);
        })
        .catch(err => {
            console.log("err:", err); //先执行这句话 【err: ypf1】
            return "ypf2";
        })
        .then(res => {
            console.log("res result:", res); //再执行这句话 【res result: ypf2】
        })
        .catch(err => {
            console.log("err result:", err);
        });
}
```

### finally

## 静态方法

### resolve

### reject

### all

(1). 它的作用是将多个Promise包裹在一起形成一个新的Promise；

(2). 新的Promise状态由包裹的所有Promise共同决定：

      A. 当所有的Promise状态变成fulfilled状态时(resolved)，新的Promise状态为fulfilled，并且会将所有Promise的返回值组成一个数组；

      B. 当有一个Promise状态为reject时，新的Promise状态为reject，并且会将第一个reject的返回值作为参数；

### allSettled

(1). 背景

　　all方法有一个缺陷：当有其中一个Promise变成reject状态时，新Promise就会立即变成对应的reject状态。

   那么对于resolved的，以及依然处于pending状态的Promise，我们是获取不到对应的结果的；

(2). 在ES11（ES2020）中，添加了新的API Promise.allSettled：该方法会在**所有的Promise都有结果（settled），无论是fulfilled，还是reject时，才会有最终的状态**；

       并且这个Promise的结果一定是fulfilled的；

(3).返回值：

      allSettled的结果是一个数组，数组中存放着每一个Promise的结果，并且是对应一个对象的；这个对象中包含status状态，以及对应的value值；

      console.log(item.status, item.value, item.reason);

      A.statue：表示状态， fulfilled 或 rejected

      B.value: fulfilled时对应的内容

      C.reason: reject时对应的内容

### race

如果有一个Promise有了结果，我们就希望决定最终新Promise的状态，那么可以使用race方法：

### any

any方法是ES12中新增的方法，和race方法是类似的：

  (1). any方法会等到一个fulfilled状态，才会决定新Promise的状态；

  (2). 如果所有的Promise都是reject的，那么也会等到所有的Promise都变成rejected状态；

 注： 如果所有的Promise都是reject的，那么会报一个AggregateError的错误。

## Promise 的实现

```js
class Promise {
    constructor(executor) {
        this.status = 'PENDING'; // 初始化状态声明 PENDING RESOLVED REJECTED
        this.data = null; // 成功值
        this.reason = null; // 失败值
        this.resolvecbQueue = []; // 成功回调队列
        this.rejectcbQueue = []; // 失败回调队列

        executor(this.resolve.bind(this), this.reject.bind(this));
    }

    resolve(data) {
        // 负责执行
        if (this.status === 'PENDING') {
            this.status = 'RESOLVED';
            this.data = data;
            // 执行回调
            this.resolvecbQueue.forEach((itemFn) => {
                itemFn(data);
            });
        }
    }

    reject(reason) {
        if (this.status === 'PENDING') {
            this.status = 'REJECTED';
            this.reason = reason;
            // 执行回调
            this.rejectcbQueue.forEach((itemFn) => {
                itemFn(reason);
            });
        }
    }

    // then 一定是要返回 Promise, 两个传进来的参数是成功回调, 失败回调
    // promise1.then(onResolved, onRejected)
    then(onResolvedFn, onRejectedFn) {
        // 类型判断, 如果不是function类型, 则让它是个function
        onResolvedFn = typeof onResolvedFn === 'function' ?  onResolvedFn : function (value) {};
        onRejectedFn = typeof onRejectedFn === 'function' ?  onRejectedFn : function (reason) {};
        
        // 在注册阶段执行
        if (this.status === 'PENDING') {
            return new Promise((resolve, reject) => {
                // 注册阶段 我们并不确定是调用哪个类型, 所以需要将两种情况都放入到队列里
                this.resolvecbQueue.push(value => {
                    const returndata = onResolvedFn(value); // 执行的时候需要做判断
                    if (returndata instanceof Promise) {
                        returndata.then(resolve, reject);
                    } else {
                        resolve(value);
                    }
                });
                // 同理
                // this.rejectcbQueue.push(reason => onRejectedFn(reason));
            });
        }

        // 说明是要返回Promise
        if (this.status === 'RESOLVED') {
            return new Promise((resolve, reject) => {
                // eg: .then(value => value, () => {})
                // 需要判断onResolvedFn 返回值 Promise类型, 没有则直接 resolve
                const returndata = onResolvedFn(this.data);
                // 需要继续then下去
                if (returndata instanceof Promise) {
                    // 继续执行
                    returndata.then(resolve, reject);
                } else {
                    resolve(this.data);
                }
            });
        }

        if (this.status === 'REJECTED') {
            return new Promise((resolve, reject) => {
                const returndata = onRejectedFn(this.data);
                if (returndata instanceof Promise) {
                    returndata.then(resolve, reject);
                } else {
                    reject(this.value);
                }
            });
        }
    }
}
```

## 关于 postMessage 

> https://stackoverflow.com/questions/60694838/js-web-worker-is-a-macro-task

Concretely this does mean that if you schedule two asynchronous tasks from the same event loop, the message event should win, even though it's been called after:
```js
setTimeout( () => console.log( 'timeout' ), 0 );
onmessage = e => console.log( 'message' );
postMessage( '', '*' );
// timeout 
// message
```

Promise @ Thu, Feb 16, 2023 9:57 AM		Promise @ Fri, Feb 17, 2023 9:49 AM
	Expand 4 lines ...
5	`public: true`	5		`public: true`
6	`tags:`	6		`tags:`
7	`- Promise`	7		`- Promise`
		8	+	`- Standard built-in objects`
8	`---`	9		`---`
9		10
10	`## Promise的三种状态`	11		`## Promise的三种状态`
	Expand 82 lines ...
93	`}`	94		`}`
94	```	95		```
95		96
		97	+	`### Promise 的构造函数`
		98	+
		99	+	`new Promise() 的过程是同步的，如下代码的执行顺序：`
		100	+	```js
		101	+	`new Promise(() => {`
		102	+	`console.log('new Promise')`
		103	+	`})`
		104	+
		105	+	`console.log('after new Promise')`
		106	+	`// new Promise`
		107	+	`// after new Promise`
		108	+	```
		109	+
96	`## 对象方法`	110		`## 对象方法`
97		111
98	`### then`	112		`### then`
	Expand 205 lines ...