JavaScript Promise对象

Promise对象的作用

• 主要用于异步计算
• 解决异步代码的回调地狱问题
• 将异步代码队列化，按照我们预期的顺序执行

Promise对象的构造函数

• Promise 构造函数是创建 promise对象 的内置构造函数
• Promise 构造函数的参数：必需，回调函数。称之为起始函数
• 起始函数包含两个参数
  参数一：resolve 函数,表示 Promise 成功的状态。当起始函数执行成功后，会调用resolve 函数，并传递成功的结果。
  参数二：reject 函数,表示 Promise 的失败状态。当起始函数执行失败后，会调用reject 函数，并传递失败的结果。
• new Promise() 是同步函数,并且是立即执行的。
• 语法：
  new Promise(回调函数)

const promise = new Promise(function (resolve, reject) {
    console.log(111111);
});
console.log(promise);

promise实例的三种状态

1. pending (等待状态)

   如果起始函数没有调用了resolve 函数或reject 函数，则创建一个 pending 状态的 Promise 对象，Promise 对象的返回值为 undefined

2. fulfilled (成功状态)

   如果起始函数调用了resolve 函数，则创建一个 fulfilled 状态的 Promise 对象，Promise 对象返回值为 resolve 函数内的内容

3. rejected (失败状态)

   如果起始函数调用了reject 函数，则创建一个 rejected 状态的 Promise 对象，Promise 对象返回值为 rejected 函数内的内容

4. 状态转变

   状态只能由 pending 转变为 fulfilled，或由 pending 转变为 rejected一旦状态转变确定，不可更改

<!-- 
    以下代码会在页面加载完成时创建一个pending状态的promise对象
    当点击fulfilled按钮时，会使promise对象由pending状态装变为fulfilled状态，并且无法再次改变
    当点击rejected按钮也是同理
 -->
<div class="btn">
    <button class="fulfilled">fulfilled</button>
    <hr />
    <button class="rejected">rejected</button>
</div>
<script>
    const btn = document.querySelector(".btn");

    // 创建一个等待状态的promise对象
    const promise = new Promise(function (resolve, reject) {
        btn.onclick = (event) => {
            if (event.target.className === "fulfilled") {
                resolve("成功状态的promise对象");
            } else if (event.target.className === "rejected") {
                reject("失败状态的promise对象");
            }
        };
    });

    console.log(promise);

    // 点击按钮后，会使promise对象状态改变，并无法再次更改
    promise.then(
        () => {
            console.log(promise);
        },
        () => {
            console.log(promise);
        }
    );
</script>

promise实例的方法

• 用于处理 promis 实例的结果

1. then() 当状态改变后调用

• 有两个参数，都是回调函数
  参数一：用于处理fulfilled状态的 promise 结果，函数的参数是 promise 的成功结果
  参数二：用于处理rejected状态的 promise 结果，函数的参数是 promise 的失败结果
• 如果只有一个参数，then()函数只会处理fulfilled状态的 promise 结果
• 如果 then()函数内部的回调函数没有 return promise 结果的话， then()函数会根据回调函数中的代码运行情况自动返回一个 promise 结果
  如果 then()函数内部的回调函数运行正常，则返回成功状态的 promise 结果
  如果 then()函数内部的回调函数运行报错(可以是人为报错，也可以是系统报错)，则返回失败状态的 promise 结果
  接收rejected的 promise 结果的 then()函数的回调函数中只有一个函数，也会返回一个是失败的 promise 结果(因为这个 then()函数中没有接收失败结果的回调函数，所以会返回一个失败结果)

promise.then(
    (res) => {
        console.log(res);
    },
    (rej) => {
        console.log(rej);
    }
);

2. catch() 捕获失败状态后调用

• 参数只有一个：回调函数，只能处理rejected状态的 promise 结果，函数的参数是 promise 的失败结果
• 当初始函数中有报错行为，则会返回一个失败的 promise 结果，会被 catch()函数捕获
• 返回值：失败的 promise 结果或报错信息

3. finally() 当状态改变后调用

• 参数只有一个：回调函数，可以处理fulfilled和rejected状态的 promise 结果
• 返回对应状态的 promise 结果

Promise构造函数的方法

1. resolve()

• 创建一个fulfilled状态的 promise 实例

2. reject()

• 创建一个rejected状态的 promise 实例

3. all()

• 接收多个 promise 实例，返回一个 promise 实例
• 当所有 promis 实例状态转变完成，或出现第一个rejected状态的 promis 实例，才输出结果
• 当接收的 promise 实例全部转变为fulfilled状态时，返回一个fulfilled状态 promise 实例，
  返回值：所有 promis 实例的返回值组成的数组
• 当接收的 promise 实例出现第一个转变为rejected状态时，立即终止运行，并返回一个rejected状态的 promise 实例
  返回值：转变为rejected状态的 promise 实例的返回值
• 当所有异步操作执行成功后，再执行回调函数。

4. allSettled()

• 接收多个 promise 实例，返回一个 promise 实例
• 返回值：由每个 promise 实例的状态和返回值组成的对象数组
• 当所有 promis 实例状态转变完成，才输出结果(rejected状态的 promise 不影响运行)

5. any()

• 接收多个 promise 实例，返回一个 promise 实例
• 当所有 promis 实例状态转变完成，或出现第一个fulfilled状态的 promis 实例，才输出结果
• 当接收的 promise 实例全部转变为rejected状态时，返回一个rejected状态 promise 实例，
• 当接收的 promise 实例出现第一个转变为fulfilled状态时，立即终止运行，并返回一个fulfilled状态的 promise 实例
  返回值：转变为fulfilled状态的 promise 实例的返回值
• 当第一个执行成功的异步操作出现后，输出结果。

6. race()

• 接收多个 promise 实例，返回第一个状态转变完成的 promise 实例

总结

1. promise 对象的作用

• 主要用于异步计算
• 解决异步代码的回调地狱问题
• 将异步代码队列化，按照我们预期的顺序执行

2. promise 的构造函数

• new Promise((resolve, reject)=>{...})

3. promise 对象的状态

• 只有调用resolve 函数，才会创建fulfilled状态的 promise 实例，返回值是resolve 函数的参数
• 当调用了resolve 函数或代码运行报错，会创建rejected状态的 promise 实例，返回值是resolve 函数的参数或或报错信息
• 当以上两种情况都不满足时，创建一个pending状态的 promise 实例
• pending状态的 promise 实例可以转变为fulfilled状态或rejected状态的 promise 实例，状态已经转变，不可更改

4. promise 对象的方法

• then()、catch()、finally()
• then()的第一个回调函数处理成功状态的结果，
  第二个回调函数处理失败状态的结果
• catch()只有一个回调函数，只处理失败状态的结果
• finally()只有一个回调函数，可以处理成功和失败状态的结果
• then()和 catch()
  只要回调函数运行成功，则返回一个 返回值为 undefined 的成功状态的 promise 实例
  如果回调函数报错，则返回一个 返回值为报错信息的失败状态的 promise 实例
  如果人为设置了返回值，则返回一个 返回值为返回值的成功状态的 promise 实例
  如果人为的返回一个 promise 实例，则返回该 promise 实例
• finally()
  只要回调函数运行成功，则返回一个和接收到的 promise 结果一样的 promise 实例
  如果回调函数报错，则返回一个 返回值为报错信息的失败状态的 promise 实例

5. Promise 构造函数的方法

• all()：全部成功，输出结果。 返回值：数值 promise 对象
• allSettled()：全部完成，输出结果。 返回值：数值 promise 对象
• any()：出现成功，输出结果。 返回值：成功状态的 promise 对象
• race()：出现完成，输出结果。 返回值：最先完成的 promise 对象