Promise基础(3)

358 阅读2分钟

Promise.prototype.then()

then()方法是实例Promise对象上的一个方法,它接受最多两个参数:Promise对象状态变为fulfilledrejected时的回调函数,并返回一个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}

结语

本期没有结语可说。