Promise 关键问题分析

1、使用.then()方法指定多个回调执行函数

当 Promise 状态变更执行完后，所有指定的回调函数都会执行，

• Promise 状态为成功时，调用执行所有.then()指定的成功回调
• Promise 状态为失败时，调用执行所有.then()指定的失败回调

2、Promise 改变状态和指定回调执行顺序

改变状态：resolve() reject() throw

指定回调：.then(onResolve,onReject)

• 不分先后顺序，随机执行

1. 先执行改变状态，后执行指定回调

new Promise((resolve, reject) => {
  resolve(); //优先执行改变状态
}).then(
  //其次执行指定回调
  (value) => {},
  (reason) => {}
);

构造执行函数内部为同步任务时，优先执行改变状态

2. 先执行指定回调，后执行改变状态，再执行回调函数

new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(); //其次执行改变状态
  }, 1000);
}).then(
  //优先执行指定回调
  (value) => {},
  (reason) => {}
);

构造执行函数内部为异步任务时，优先执行指定回调

3、确定 .then()方法执行返回的结果状态

例如：

//result 为.then()方法返回的新Promise实例
let result = new Promise().then(
  (value) => {},
  (reason) => {}
);

返回的新 Promise 状态由指定回调执行结果确定的

1. .then()方法内抛出错误时

状态为失败，结果为抛出的错误值

let result = new Promise().then(
  (value) => {
    throw "error"; //抛出错误
  },
  (reason) => {}
);

2. .then()方法内返回非 Promise 对象的值

状态为成功，结果为返回的值

let result = new Promise().then(
  (value) => {
    return "value"; //返回值为字符串
  },
  (reason) => {}
);

3. .then()方法内返回 Promise 实例对象

共用相同的执行状态和执行结果

let result = new Promise().then(
  (value) => {
    return new Promise((resolve, reject) => {
      if (err) reject(); //result状态为失败
      resolve(); //result状态为成功
    });
  },
  (reason) => {}
);

4、串联多个操作任务

.then()方法返回一个新 Promise，可以连续使用链式调用，串联为多个同步或异步任务

let p = new Promise((resolve, reject) => {
  resolve("111");
});

let result = p.then((value) => {
  return new Promise((resolve, reject) => {
    resolve("222");
  });
});
//result接受的为新Promise实例，为新的Promise任务
result.then((value) => {
  console.log(value); //'222'
});

5、Promise 异常穿透

例如：

new Promise((resolve, reject) => {
  reject();
})
  .then((value) => {})
  .then((value) => {})
  .then((value) => {})
  .catch((reason) => {
    //此时所有中间的.then()指定的回调函数都不执行
    //直接执行这个位置的.catch()指定的回调
  });

6、中断 Promise 链

链条中返回一个 pendding 状态的新 Promise 进行中断（唯一的中断方法）

let p = new Promise((resolve, reject) => {
  resolve();
});

p.then((value) => {
  //返回的 Promise 没有进行修改状态
  return new Promise(() => {});
  //后续的.then()中的回调函数已进行了指定
  //返回的 Promise 状态未被修改，指定的相应回调函数不会被执行
})
  .then((value) => {
    //不会执行此处的回调函数
  })
  .then((value) => {
    //不会执行此处的回调函数
  })
  .catch((reason) => {
    //不会执行此处的回调函数
  });