Promise 中的 Promise.prototype.then() 及返回值分析-JavaScript中文网-JavaScript教程资源分享门户

前言

在 JavaScript 中，异步操作是非常常见的，但是异步操作的结果需要等待一段时间才能得到，这给编程带来了一定的困难。为了解决这个问题，Promise 诞生了。Promise 是一种异步编程的解决方案，它让异步操作变得简单、清晰、可控。

在 Promise 中，Promise.prototype.then() 方法是非常重要的一个方法。这个方法的作用是为 Promise 实例添加状态改变时的回调函数。

Promise.prototype.then() 方法

Promise.prototype.then() 方法接收两个参数：onResolved 和 onRejected，分别表示 Promise 状态变为 resolved（已完成）和 rejected（已失败）时的回调函数。这两个参数都是可选的，如果不传入，则会使用默认的回调函数。

promise.then(onResolved, onRejected);

Promise.prototype.then() 方法会返回一个新的 Promise 实例，这个新的 Promise 实例的状态和值由 onResolved 或 onRejected 回调函数的返回值决定。

promise.then(onResolved, onRejected).then(onResolved2, onRejected2);

在上面的代码中，第一个 then() 方法返回的是一个新的 Promise 实例，第二个 then() 方法是在这个新的 Promise 实例上调用的。如果第一个 then() 方法中的回调函数返回的是一个 Promise 实例，那么第二个 then() 方法会等待这个 Promise 实例的状态改变后再执行。

返回值分析

Promise.prototype.then() 方法的返回值有以下几种情况：

返回一个新的 Promise 实例

如果 onResolved 或 onRejected 回调函数返回一个值，且这个值是一个 Promise 实例，那么 Promise.prototype.then() 方法返回的就是这个 Promise 实例。

// javascriptcn.com 代码示例
const p1 = new Promise((resolve, reject) => {
  resolve('p1');
});

const p2 = new Promise((resolve, reject) => {
  resolve('p2');
});

p1.then(() => {
  return p2;
}).then((value) => {
  console.log(value);
});

// 输出：'p2'

在上面的代码中，第一个 then() 方法返回的是 p2，第二个 then() 方法是在 p2 上调用的。

返回一个普通值

如果 onResolved 或 onRejected 回调函数返回一个普通值（不是 Promise 实例），那么 Promise.prototype.then() 方法返回的就是一个新的 Promise 实例，这个新的 Promise 实例的状态为 resolved，并且值为 onResolved 或 onRejected 回调函数的返回值。

// javascriptcn.com 代码示例
const p1 = new Promise((resolve, reject) => {
  resolve('p1');
});

p1.then(() => {
  return 'hello world';
}).then((value) => {
  console.log(value);
});

// 输出：'hello world'

在上面的代码中，第一个 then() 方法返回的是 'hello world'，第二个 then() 方法是在这个新的 Promise 实例上调用的。

没有返回值

如果 onResolved 或 onRejected 回调函数没有返回值，那么 Promise.prototype.then() 方法返回的就是一个新的 Promise 实例，这个新的 Promise 实例的状态为 resolved，并且值为 undefined。

// javascriptcn.com 代码示例
const p1 = new Promise((resolve, reject) => {
  resolve('p1');
});

p1.then(() => {
  console.log('hello world');
}).then((value) => {
  console.log(value);
});

// 输出：'hello world' 和 undefined

在上面的代码中，第一个 then() 方法没有返回值，第二个 then() 方法是在这个新的 Promise 实例上调用的。

总结

Promise.prototype.then() 方法是 Promise 中非常重要的一个方法，它可以为 Promise 实例添加状态改变时的回调函数，并且返回一个新的 Promise 实例。在使用 Promise.prototype.then() 方法时，我们需要注意它的返回值和回调函数的返回值，以便正确地处理 Promise 实例的状态和值。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65795819d2f5e1655d35ecb4