彻底理解Promise

Promise基本

引入Pomise

PromiseJavaScript 引入的一种处理异步操作的机制,它代表一个异步操作的最终完成(或失败)及其结果值,它旨在解决异步编程中常见的问题,引入 Promise 的主要原因包括:

  • 为了解决回调地狱
    在传统的回调函数(callback)方式中,多个异步操作的回调函数嵌套在一起,形成了所谓的回调地狱或回调金字塔,使得代码变得难以阅读和维护
    doSomething(function (result) {
      doSomethingElse(result, function (newResult) {
        doAnotherThing(newResult, function (finalResult) {
          console.log(finalResult);
        });
      });
    });
    
  • 为了有更好的错误提示:使用回调函数时,错误处理往往不够直观,尤其是当异步操作链很长时
    doSomething(function (result) {
      doSomethingElse(result, function (newResult) {
        doAnotherThing(newResult, function (finalResult) {
          console.log(finalResult);
        }, function (error) {
          console.error(error);
        });
      }, function (error) {
        console.error(error);
      });
    }, function (error) {
      console.error(error);
    });
    
  • 为了方便使用和规范
    • 第一:我们需要自己来设计回调函数、回调函数的名称、回调函数的使用等;

    • 第二:对于不同的人、不同的框架设计出来的方案是不同的,那么我们必须耐心去看别人的源码或者文档,以便可以理解这个函数到底怎么用

代码结构

  • Promise是一个类,可以翻译成 承诺、许诺 、契约

  • 当我们需要给予调用者一个承诺,待会儿我会给你回调数据时,就可以创建一个Promise的对象

  • 在通过 new创建Promise对象 时,我们需要传入一个回调函数

    • 这个回调函数会被立即执行,有两个参数为回调函数resolvereject

    • 当我们调用resolve回调函数时,会执行实例的then方法传入的回调函数

    • 当我们调用reject回调函数时,会执行实例的catch方法传入的回调函数

    • 可链式调用thencatch

  • 代码示例如下:

    const promise = new Promise((resolve, reject) => {
      console.log("这个函数会立即执行");
      resolve("成功"); // 会执行then
      // reject("失败"); // 会执行catch
    });
    
    // promise.then((res) => {
    //   console.log(res); // 成功
    // });
    // promise.catch((err) => {
    //   console.log(err); // 失败
    // });
    
    promise
      .then((res) => {
        console.log(res); // 成功
      })
      .catch((err) => {
        console.log(err); // 失败
      });
    

三个状态

  • 待定(pending: 初始状态,既没有被兑现也没有被拒绝,当执行executor中的代码时,处于该状态
  • 已兑现(fulfilled: 意味着操作成功,执行了resolve时处于该状态
  • 已拒绝(rejected: 意味着操作失败,执行了reject时处于该状态

注意:一旦状态被确定下来,Promise的状态会被锁死,该Promise的状态是不可更改的

const promise = new Promise((resolve, reject) => {
  console.log("这个函数会立即执行");
  resolve("成功");
  reject("失败"); // promise的状态已经确定resolve,不会执行reject
});

promise
  .then((res) => {
    console.log(res); // 成功
  })
  .catch((err) => {
    console.log(err); // catch不会执行
  });

Executor

Executor是在创建Promise时需要传入的一个回调函数,这个回调函数会被立即执行,并且传入两个参数resolvereject,会Executor中确定Promise状态

  • 通过resolve,可以兑现(fulfilledPromise的状态,我们也可以称之为已决议(resolved
  • 通过reject,可以拒绝(rejectPromise的状态

resolve传不同值

  • 如果resolve传入一个普通的值或者没有实现then方法的对象,那么这个值会作为then回调的参数

    const promise = new Promise((resolve, reject) => {
      console.log("这个函数会立即执行");
      resolve("成功");
      // resolve(123);
      // resolve({ name: "obj" });
    });
    promise.then((res) => {
      console.log(res); // 打印:成功 || 123 || { name: "obj" }
    });
    
  • 当的 resolve 方法中传入的值是一个对象并且该对象实现了 then 方法时Promise 会将这个对象视为一个 thenable 对象(一个具有 then 方法的对象),会根据这个对象中 then 方法的执行结果来决定最终的 Promise 状态。这种行为被称为 “Promise A+ 规范” 中的 “Promise Resolution Procedure

    • Promise.resolve 遇到一个 thenable 对象时,它会自动调用这个对象的 then 方法,并且将内部生成的 resolvereject 函数传递进去

    • thenable 对象的 then 方法中,resolvereject 这两个参数是回调函数,它们由 Promise 内部机制提供用来处理异步操作的成功或失败,相当于 Promise 本身的 resolvereject 方法,能够决定当前 Promise 的最终状态

    • 当在 thenable 对象的 then 方法中使用 resolve(传不同值) 时,和外面的三种情况一致

    • 如果 thenable 对象的 then 方法抛出异常,Promise 会将捕获异常作为最终结果,状态为 rejected

    const promise1 = new Promise((resolve, reject) => {
      console.log("这个promise1Log会立即执行"); // 这个promise1Log会立即执行
      resolve({
        name: "thenable1",
        then(resolve, reject) {
          resolve("thenable1成功");
        },
      });
    });
    promise1.then((res) => {
      console.log(res); // thenable1成功
    });
    
    const promise2 = new Promise((resolve, reject) => {
      console.log("这个promise2Log会立即执行"); // 这个promise2Log会立即执行
      resolve({
        name: "thenable2",
        then(resolve, reject) {
          reject("thenable2失败");
        },
      });
    });
    promise2
      .then((res) => {
        console.log(res);
      })
      .catch((err) => {
        console.log(err); // thenable2失败
      });
    
    const promise3 = new Promise((resolve, reject) => {
      console.log("这个promise3Log会立即执行"); // 这个promise3Log会立即执行
      resolve({
        name: "thenable3",
        then() {
          console.log("thenable3Log"); // 会执行打印:thenable3Log
        },
      });
    });
    promise3 // then和catch都不会执行
      .then((res) => {
        console.log(res);
      })
      .catch((err) => {
        console.log(err);
      });
    
    const promise4 = new Promise((resolve, reject) => {
      console.log("这个promise4Log会立即执行"); // 这个promise4Log会立即执行
      resolve({
        name: "thenable4",
        then() {
          throw "thenable4抛出错误"; // promise4状态为rejected
        },
      });
    });
    promise4
      .then((res) => {
        console.log(res);
      })
      .catch((err) => {
        console.log(err); // thenable4抛出错误
      });
    
  • 如果resolve中传入的是另外一个Promise,则会返回这个新的Promise,那么这个新Promise会决定原Promise的状态

    const promise = new Promise((resolve, reject) => {
      console.log("这个promiseLog会立即执行"); // 这个promiseLog会立即执行
      resolve(
        new Promise((resolve, reject) => {
          resolve("resolvePromise");
        })
      );
    });
    promise.then((res) => {
      console.log(res); // resolvePromise
    });
    // 相当于 new Promise((resolve) => resolve("resolvePromise")).then(res => console.log(res))
    

Promise实例方法

then方法

then方法是Promise对象上的一个方法(实例方法),它其实是放在Promise的原型上的 Promise.prototype.then

两个参数

then方法接受两个参数

  • fulfilled的回调函数:当状态变成fulfilled时会回调的函数
  • rejected的回调函数:当状态变成rejected时会回调的函数
const promise = new Promise((resolve, reject) => {
  console.log("这个promiseLog会立即执行"); // 这个promiseLog会立即执行
  reject('失败');
});
// promise
//   .then((res) => {
//     console.log(res);
//   })
//   .catch((err) => {
//     console.log(err); // 失败
//   });
// 等价于
promise.then(
  (res) => {
    console.log(res);
  },
  (err) => {
    console.log(err); // 失败
  }
);

多次调用

一个Promisethen方法是可以被多次调用的,都会在 Promise状态 fulfilled时被依次调用且彼此独立

let promise = new Promise((resolve, reject) => {
  setTimeout(() => resolve("结果"), 1000);
});

promise.then(result => {
  console.log("第一个 then:", result);
});
promise.then(result => {
  console.log("第二个 then:", result);
});
promise.then(result => {
  console.log("第三个 then:", result);
});
// 输出:第一个 then: 结果; 第二个 then: 结果; 第三个 then: 结果

返回值

then方法本身是有返回值的,它的返回值是一个Promise,从而可以进行链式调用

  • 但是then方法返回的Promise到底处于什么样的状态呢?
    • then方法中的回调函数本身在执行的时候,那么它处于pending状态

    • then方法中的回调函数返回一个结果时,那么它处于fulfilled状态,并且会将结果作为resolve的参数

    • then方法抛出一个异常时,那么它处于rejected状态

const promise = new Promise((resolve, reject) => {
  console.log("这个promiseLog会立即执行"); // 这个promiseLog会立即执行
  resolve("成功");
});
promise
  .then((res) => {
    console.log(res); // 打印:成功
    // return 123; // 这时then方法返回的promise状态是fulfilled
    throw "thenPromise失败"; // 这时then方法返回的promise状态是rejected
  })
  .then((res) => {
    console.log(res); // 123
  })
  .catch((err) => {
    console.log(err); // thenPromise失败
  });

catch方法

catch方法是Promise对象上的一个方法(实例方法),是放在Promise的原型上的 Promise.prototype.catch

多次调用

Promisecatch方法是可以被多次调用的,当Promise的状态变成reject的时候,这些回调函数都会被依次执行

const promise = new Promise((resolve, reject) => {
  console.log("这个promiseLog会立即执行"); // 这个promiseLog会立即执行
  reject("失败");
});
promise.catch((err) => {
  console.log("第一catch回调执行:" + err);
});
promise.catch((err) => {
  console.log("第二catch回调执行:" + err);
});
promise.catch((err) => {
  console.log("第三catch回调执行:" + err);
});
// 输出:第一catch回调执行:失败;第二catch回调执行:失败;第三catch回调执行:失败

返回值

catch方法也是返回一个Promise对象的,所以catch方法后可以继续调用then方法或者catch方法:如果我们希望后续继续执行catch,那么需要抛出一个异常

const promise = new Promise((resolve, reject) => {
  console.log("这个promiseLog会立即执行"); // 这个promiseLog会立即执行
  reject("失败");
});
promise
  .catch((err) => {
    throw "catchPromise失败"; // 需要执行后续的catch要抛出异常
  })
  .catch((err) => {
    console.log(err); // catchPromise失败
  });

会有报错情况:下面例子如果没有直接在 promise实例上调用catch,后面的 .then() 链式调用会将异常向下传播,最终被找到的 .catch() 捕获,即被最近的catch捕获

  • 如果不写最后的catch 或者其他形式的错误处理(比如 then 中的第二个参数),Promise 在被拒绝(rejected)后,浏览器会错误提示(unhandled promise rejection
const promise = new Promise((resolve, reject) => {
  console.log("这个promiseLog会立即执行"); // 这个promiseLog会立即执行
  reject("失败");
});
promise
  .then((res) => {
    throw "then1Throw";
  })
  .then((res) => {
    throw "then2Throw";
  })
  .catch((err) => {
    console.log(err); // 失败
  });

finally方法

finally是在ES9(ES2018)中新增的一个特性:表示无论Promise对象无论变成fulfilled还是rejected状态,最终都会被执行finally方法不接收参数

const promise = new Promise((resolve, reject) => {
  console.log("这个promiseLog会立即执行"); // 这个promiseLog会立即执行
  // reject('失败')
  resolve("成功");
});
promise
  .then((res) => {
    console.log(res) // 成功
  })
  .catch((err) => {
    console.log(err); // 失败
  })
  .finally(() => {
    console.log("finally"); // 成功失败都会执行打印
  });

Promise类方法

前面的then、catch、finally方法都属于Promise的实例方法,都是存放在Promiseprototype上的,后面的类方法就是直接通过Promise调用的

resolve方法

一个用于将现有的值转换为一个已成功完成(fulfilled)的 Promise 对象的方法,Promise.resolve的用法相当于new Promise,并且执行resolve操作

  • 传递值的情况和上面resolve传不同值情况一样
Promise.resolve("123").then((res) => {
  console.log(res); // 123
});
// Promise.resolve("123") 相当于 new Promise((resolve) => resolve(123))

reject方法

Promise.resolve类似,一个用于将现有的值转换为一个已拒绝(rejected)的 Promise 对象的方法,Promise.reject的用法相当于new Promise,并且执行reject操作

  • 传入的参数无论是什么形态,都会直接作为rejected状态的参数传递到catch
Promise.reject("123").catch((res) => {
  console.log(res); // 123
});
// Promise.reject("123") 相当于 new Promise((reject) => reject(123))

all方法

它的作用是将多个Promise包裹在一起形成一个新的Promise

  • 新的Promise状态由包裹的所有Promise共同决定
    • 必须当所有的Promise状态变成fulfilled状态时,新的Promise状态为fulfilled,并且会将所有Promise的返回值组成一个数组

    • 当有一个Promise状态为reject时,新的Promise状态为rejected,并且会将第一个reject的返回值作为catch参数

const promise1 = new Promise((resolve) => resolve("promise1"));
const promise2 = new Promise((resolve) => resolve("promise2"));
const promise3 = new Promise((resolve) => resolve("promise3"));
Promise.all([promise1, promise2, promise3]).then((res) => {
  console.log(res); // ['promise1', 'promise2', 'promise3']
});

const promise4 = new Promise((resolve) => resolve("promise4"));
const promise5 = new Promise((resolve, reject) =>
  reject("promise5Reject")
);
const promise6 = new Promise((resolve) => resolve("promise6"));
Promise.all([promise4, promise5, promise6]).catch((err) => {
  console.log(err); // promise5Reject
});

all方法有一个缺陷:当有其中一个Promise变成reject状态时,新Promise就会立即变成对应的reject状态,那么对于resolved的和处于pending状态的Promise,获取不到对应的结果

allSettlet方法

解决了all的缺陷,ES11(ES2020)中,添加了新的API Promise.allSettled

  • 该方法会在所有的Promise都有结果时才会有最终的状态,这个新Promise的状态一定是fulfilled

  • allSettled的结果是一个数组,数组中存放着每一个Promise的结果对应一个对象的,这个对象中包含status状态,以及对应的value

const promise1 = new Promise((resolve) => resolve("promise1"));
const promise2 = new Promise((resolve, reject) =>
  reject("promise2Reject")
);
const promise3 = new Promise((resolve) => resolve("promise3"));
Promise.allSettled([promise1, promise2, promise3])
  .then((res) => {
    console.log(res);
  });

在这里插入图片描述

race方法

多个Promise时,当有一个Promise有了最终状态,希望这个状态是最新Promise的状态,那么可以使用race方法

  • race是竞技、竞赛的意思,表示多个Promise相互竞争,谁先有结果,那么就使用谁的结果
const promise1 = new Promise(() => {});
const promise2 = new Promise((resolve, reject) =>
  reject("promise2Reject")
);
Promise.race([promise1, promise2])
  .then((res) => {
    console.log(res); // 不会执行
  })
  .catch((err) => {
    console.log(err); // promise2Reject
  });

any方法

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

  • any方法会等到一个fulfilled状态,才决定新Promisefulfilled状态

  • 如果所有的Promise都是rejected的,会等到所有的Promise变成rejected状态时catch回调报错:AggregateError: All promises were rejected

const promise1 = new Promise((resolve, reject) =>
  reject("promise1Reject")
);
const promise2 = new Promise((resolve) => resolve("promise2"));
Promise.any([promise1, promise2])
  .then((res) => {
    console.log(res); // promise2
  })
  .catch((err) => {
    console.log(err); 
  });

手写Promise

具体待后面练习后补充

题目是什么以及为什么在面试中需要掌握Promise? 在面试中,关于Promise的面试题目可以涉及Promise的基本概念、使用方法和原理等方面的内容。例如,可以要求解析一段Promise的代码,或者要求描述Promise的执行顺序和特性等。通过这些面试题目,面试官可以了解面试者对Promise理解程度和应用能力,进而评估其在异步编程方面的能力和经验。 面试中需要掌握Promise的原因主要有以下几点: 1. 异步编程是现代前端开发中非常重要的一部分,Promise是一种用于处理异步操作的机制,能够更好地处理回调地狱问题和提高代码的可读性。 2. PromiseJavaScript中的关键特性之一,在使用现代前端框架如React和Angular时,几乎无法避免使用Promise。因此,掌握Promise能够更好地理解和应用这些框架。 3. Promise是面试中常见的考点之一,掌握Promise能够更好地准备面试,展现自己的技术能力和经验。 综上所述,掌握Promise对于面试来说是非常重要的,它能够展示你对异步编程的理解和应用能力,并且能够提升你在面试中的竞争力。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [【异步系列三】10道 Promise 面试题彻底理解 Promise 异步执行顺序](https://blog.csdn.net/qq_41131745/article/details/127004662)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* [10 个 JavaScript Promise 的面试题](https://blog.csdn.net/snsHL9db69ccu1aIKl9r/article/details/125454133)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值