七、Promise相关面试题讲解

（一）Promise 基础

1.Promise 规范

• Promise 是一套专门处理异步场景的规范
• 能有效的避免回调地狱的产生，使异步代码更加清晰、简洁、统一
• 这套规范最早诞生于前端社区，规范名称为 Promise A+

2.Promise A+ 规定

1）所有的异步场景，都可以看作是一个异步任务

• 每个异步任务，在 JS 中应该表现为一个 对象
• 该对象称为 Promise 对象 ，也叫做任务对象

2）每个任务对象，都应该有两个阶段、三个状态

• 任务总是从未决阶段变到已决阶段，无法逆行
• 任务总是从挂起状态变到完成或失败状态，无法逆行
• 任务一旦完成或失败，状态就固定下来，永远无法改变

3）挂起->完成 称为 resolve；挂起->失败 称为 reject

• 任务完成时，可能有一个相关数据
• 任务失败时，可能有一个失败原因

4）可以针对任务进行后续处理

• 针对完成状态的后续处理称之为 onFulfilled
• 针对失败的后续处理称之为 onRejected

3.Promise API

• ES6 提供了一套 API，实现了 Promise A+规范

// 创建一个任务对象，该任务立即进入 pending 状态
const pro = new Promise((resolve, reject) => {
  // 任务的具体执行流程，该函数会立即被执行
  // 调用 resolve(data)，可将任务变为 fulfilled 状态， data 为需要传递的相关数据
  // 调用 reject(reason)，可将任务变为 rejected 状态，reason 为需要传递的失败原因
});

pro.then(
  (data) => {
    // onFulfilled 函数，当任务完成后，会自动运行该函数，data为任务完成的相关数据
  },
  (reason) => {
    // onRejected 函数，当任务失败后，会自动运行该函数，reason为任务失败的相关原因
  },
);

（二）Promise 的链式调用

1.catch 方法

• .catch(onRejected) = .then(null, onRejected)

2.链式调用

1）then 方法必定会返回一个新的 Promise

• 可理解为 后续处理也是一个任务

2）新任务的状态取决于后续处理

• 若没有相关的后续处理，新任务的状态和前任务一致，数据为前任务的数据
• 若有后续处理但还未执行，新任务挂起
• 若后续处理执行了，则根据后续处理的情况确定新任务的状态
  • 后续处理执行无错，新任务的状态为完成，数据为后续处理的返回值
  • 后续处理执行有错，新任务的状态为失败，数据为异常对象
  • 后续执行后返回的是一个任务对象，新任务的状态和数据与该任务对象一致

// 常见任务处理代码

/*
 * 任务成功后，执行处理1，失败则执行处理2
 */
pro.then(处理1).catch(处理2);

/*
 * 任务成功后，依次执行处理1、处理2
 */
pro.then(处理1).then(处理2);

/*
 * 任务成功后，依次执行处理1、处理2，若任务失败或前面的处理有错，执行处理3
 */
pro.then(处理1).then(处理2).catch(处理3);

（三）Promise 的静态方法

方法名	含义
Promise.resolve(data)	直接返回一个完成状态的任务
Promise.reject(reason)	直接返回一个拒绝状态的任务
Promise.all(任务数组)	返回一个任务 任务数组全部成功则成功 任何一个失败则失败
Promise.any(任务数组)	返回一个任务 任务数组任一成功则成功 任务全部失败则失败
Promise.allSettled(任务数组)	返回一个任务 任务数组全部已决则成功 该任务不会失败
Promise.race(任务数组)	返回一个任务 任务数组任一已决则已决，状态和其一致

（四）async & await

1.消除回调

• 有了 Promise，异步任务就有了一种统一的处理方式
• 有了统一的处理方式，ES 官方就可以对其进一步优化
• ES7 推出了两个关键字 async 和 await
• 用于更加优雅的表达 Promise

2.async

• 用于修饰函数
• 被修饰的函数一定返回 Promise

async function method1() {
  return 1; // 该函数的返回值是Promise完成后的数据
}

method1(); // Promise { 1 }

async function method2() {
  return Promise.resolve(1); // 若返回的是Promise，则method得到的Promise状态和其一致
}

method2(); // Promise { 1 }

async function method3() {
  throw new Error(1); // 若执行过程报错，则任务是rejected
}

method3(); // Promise { <rejected> Error(1) }

3.await

• 表示等待某个 Promise 完成
• ==必须用于 async 函数中
• 后面一定跟着异步代码

async function method() {
  const n = await Promise.resolve(1);
  console.log(n); // 1
}

// 上面的函数等同于
function method() {
  return new Promise((resolve, reject) => {
    Promise.resolve(1).then((n) => {
      console.log(n);
      resolve(1);
    });
  });
}

• 也可以等待其他数据

async function method() {
  const n = await 1; // 等同于 await Promise.resolve(1)
}

• 如果需要针对失败的任务进行处理，可以使用 try-catch 语法

async function method() {
  try {
    const n = await Promise.reject(123); // 这句代码将抛出异常
    console.log("成功", n);
  } catch (err) {
    console.log("失败", err);
  }
}

method(); // 输出： 失败 123