Promise.then()深入理解

2023-11-27 16:15:18

Promise.then()方法：让异步编程变得轻而易举

在现代JavaScript开发中，异步编程已成为一项不可或缺的技术。Promise是一种强大的工具，它可以让我们在异步操作完成后执行特定的回调函数，从而简化异步编程。其中，Promise.then()方法是Promise对象的一个核心方法，它在异步编程中扮演着至关重要的角色。

Promise.then()方法的工作原理

Promise.then()方法接受两个参数：一个处理成功结果的回调函数和一个处理失败结果的回调函数。当Promise的状态发生变化时，相应的回调函数就会被调用。

Promise的状态共有三种：

pending： 表示Promise尚未完成。
fulfilled： 表示Promise已完成且结果是成功的。
rejected： 表示Promise已完成且结果是失败的。

当Promise的状态从pending变为fulfilled时，就会执行成功的回调函数。当Promise的状态从pending变为rejected时，就会执行失败的回调函数。

Promise.then()方法的用法

Promise.then()方法的使用非常简单，只需要在Promise对象后调用then()方法，并传入处理成功和失败结果的回调函数即可。代码示例如下：

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('成功');
  }, 1000);
});

promise.then((result) => {
  console.log(result); // 输出：成功
}, (error) => {
  console.log(error); // 不会执行
});

在这个示例中，我们创建了一个Promise对象，并在1秒后将Promise的状态变为fulfilled。然后，我们在Promise对象后调用then()方法，并传入了一个成功的回调函数和一个失败的回调函数。当Promise的状态变为fulfilled时，就会执行成功的回调函数，并在控制台输出“成功”。

Promise.then()方法的链式调用

Promise.then()方法支持链式调用，这意味着我们可以在一个then()方法中返回另一个Promise对象，并可以在下一个then()方法中处理这个Promise对象。代码示例如下：

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('成功');
  }, 1000);
});

promise.then((result) => {
  console.log(result); // 输出：成功

  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('又成功了');
    }, 1000);
  });
}).then((result) => {
  console.log(result); // 输出：又成功了
});

在这个示例中，我们在第一个then()方法中返回了一个新的Promise对象，并可以在第二个then()方法中处理这个新的Promise对象。当第一个Promise对象的状态变为fulfilled时，就会执行第一个then()方法中的成功的回调函数，并在控制台输出“成功”。然后，第二个Promise对象的状态也会变为fulfilled，从而执行第二个then()方法中的成功的回调函数，并在控制台输出“又成功了”。