Promise基础（3）

Promise.prototype.then()

then()方法是实例Promise对象上的一个方法，它接受最多两个参数：Promise对象状态变为fulfilled或rejected时的回调函数，并返回一个Promise对象。当Promise对象的状态发生变化时，会调用该函数。

忽略参数或者提供非函数参数

假设调用then()方法的Promise对象为p1，当then()方法接受到的参数为非函数时，那么then()方法不会报错，并且会返回没有经过回调函数处理的新Promise对象，这个Promise对象只是简单的接受原来这个调用then()方法的Promise对象（p1）为它的终态。

当参数不合法时，可以提炼出以下关键信息：

1. 不报错
2. 返回新的Promise对象
3. 终态为调用then()方法的Promise对象的终态

翻译成白话文，让我们通过代码来看一看：

const p1 = Promise.resolve(1);

const p2 = p1.then(1); （不报错）

p1; // Promise {<fulfilled>: 1}

p2; // Promise {<fulfilled>: 1} (终态为调用`then()`方法的`Promise对象`的终态)

p1 === p2; // 返回新的Promise对象
复制代码

因为返回的新的Promise对象和原Promise对象并不是同一个引用，所以这里说透传是有些问题的。但是理解为复制是没有问题的。

常见的几种情况

回调函数中，会根据返回值的不同，有以下几种情况：

1.没有返回值

const p1 = Promise.resolve(1);

const p2 = p1.then(() => {

});

p2; // Promise {<fulfilled>: undefined}
复制代码

当没有返回值时，返回的Promise对象的状态为fulfilled，值为undefined

2.返回一个值

const p1 = Promise.resolve(1);

const p2 = p1.then(() => {
  return 1;
});

p1; // Promise {<fulfilled>: 1}
复制代码

当返回一个值时，返回的Promise对象的状态为fulfilled，值为函数的返回值。

3.抛出一个错误

const p1 = Promise.resolve(1);

const p2 = p1.then(() => {
  throw new Error(1);
});

p2; // Promise {<rejected>: Error: 1}
复制代码

当抛出一个错误时，返回的Promise对象的状态为rejected，值为函数的抛出的错误。

另外值得注意的是，当返回一个错误时，命中的是情况2，并不是情况3:

const p1 = Promise.resolve(1);

const p2 = p1.then(() => {
  return new Error(1);
});

p2; // Promise {<fulfilled>: Error: 1}
复制代码

4.返回一个Promise对象

当返回一个Promise对象时，会将该Promise对象的终态复制并赋值给新的Promise对象。

const p1 = Promise.resolve(1);

const p2 = Promise.resolve(2);

const p3 = p1.then(() => {
  return p2;
});

p3; // Promise {<fulfilled>: 2}
复制代码

const p1 = Promise.resolve(1);

const p2 = Promise.reject(2);

const p3 = p1.then(() => {
  return p2;
});

p3; // Promise {<rejected>: 2}
复制代码

const p1 = Promise.resolve(1);

const p2 = new Promise(() => {});

const p3 = p1.then(() => {
  return p2;
});

p3; // Promise {<pending>}
复制代码

const p1 = Promise.resolve(1);

const p2 = new Promise((resolve) => {
  setTimeout(() => {
    resolve(2);
  }, 5000);
});

const p3 = p1.then(() => {
  return p2;
});

p3; // Promise {<pending>}

// wait 5 seconds
p3; // Promise {<fulfilled>: 2}
复制代码

小结

以上几种情况，不止存在于fulfilled状态的回调函数，对于rejected状态的回调函数也是如此：

const p1 = Promise.reject(1);

const p2 = Promise.resolve(1);

const p3 = p1.then(
  () => {
    return p2;
  },
  () => {
    return p2;
  }
);

p3; // Promise {<fulfilled>: 1}
复制代码

那么当对应状态的回调函数缺失时，会命中之前提到的 忽略参数或者提供非函数参数 时的情况：

const p1 = Promise.reject(1);

const p2 = Promise.resolve(1);

const p3 = p1.then(() => {
  return p2;
});

p3; // Promise {<rejected>: 1}
复制代码

结语

本期没有结语可说。