Promise 有哪三种状态？如何变化？

三种状态：pending resolved rejected

状态的变化：pending —> resolved 或 pending —> rejected，代码演示：

const p1 = new Promise((resolve, reject) => {});
console.log('p1', p1); // p1 Promise {<pending>}
const p2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve();
  });
});
// 一开始打印时是 pending，最终是 resolved 状态
console.log('p2', p2); // p2 Promise {<pending>}
setTimeout(() => console.log('p2-setTimeout', p2)); // p2-setTimeout Promise {<resolved>: undefined}
const p3 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject();
  });
});
// 一开始打印时是 pending，最终是 rejected 状态
console.log('p3', p3); // p3 Promise {<pending>}
setTimeout(() => console.log('p3-setTimeout', p3)); // p3-setTimeout Promise {<rejected>: undefined}

状态的表现

pending 状态，不会触发 then 和 catch
resolved 状态，会触发后续的 then 回调函数
rejected 状态，会触发后续的 catch 回调函数，代码演示：

const p1 = Promise.resolve(100);
console.log('p1', p1); // p1 Promise {<resolved>: 100}
p1.then((data) => {
  console.log('data1', data); // data1 100
}).catch((err) => {
  console.error('err1', err); // 不会触发
});
const p2 = Promise.reject('err');
console.log('p2', p2); //p2 Promise {<rejected>: "err"}
p2.then((data) => {
  console.log('data2', data); // 不会触发
}).catch((err) => {
  console.error('err2', err); // err2 err
});

then 和 catch 如何影响状态的变化

then 正常返回 resolved，里面有报错则返回 rejected

const p1 = Promise.resolve().then(() => {
  return 100;
});
// 一开始打印时是 pending，最终是 resolved 状态，会触发后续 then 的回调
console.log('p1', p1);
p1.then(() => {
  console.log('123'); //123
});
const p2 = Promise.resolve().then(() => {
  throw new Error('err');
});
// 一开始打印时是 pending，最终是 rejected 状态，会触发后续 catch 的回调
console.log('p2', p2);
p2.then(() => {
  console.log('123'); // 不会触发
}).catch((err) => {
  console.error('err2', err); // err2 Error: err
});

catch 正常返回 resolved，里面有报错则返回 rejected

const p3 = Promise.reject('my error').catch((err) => {
  console.error(err);
});
// 一开始打印时是 pending，最终是 resolved 状态，会触发后续 then 的回调
console.log('p3', p3);
p3.then(() => {
  console.log('333'); //333
});
const p4 = Promise.reject('my error').catch((err) => {
  throw new Error('catch err');
});
// 一开始打印时是 pending，最终是 rejected 状态，会触发后续 catch 的回调
console.log('p4', p4);
const p5 = p4
  .then(() => {
    console.log('444'); // 不会触发
  })
  .catch((err) => {
    console.error('err4', err); // err4 Error: catch err
  });
console.log('p5', p5); // 一开始打印时是 pending，最终是 resolved 状态

Promise 有哪三种状态？如何变化？ ​

Promise 有哪三种状态？如何变化？