Promise链式调用：.then() 的用法讲座

欢迎词

大家好，欢迎来到今天的编程讲座！今天我们要聊的是JavaScript中的一个非常重要的概念——Promise链式调用中的.then()方法。如果你曾经在异步编程中感到困惑，或者觉得Promise的链式调用看起来像是一堆乱码，那么你来对地方了！我们将会用轻松诙谐的语言，结合实际代码和表格，帮助你彻底理解这个强大的工具。

什么是Promise？

在开始之前，让我们快速回顾一下什么是Promise。简单来说，Promise是一个表示异步操作最终完成或失败的对象。它有三种状态：

Pending（进行中）：初始状态，既没有被兑现也没有被拒绝。
Fulfilled（已兑现）：操作成功完成。
Rejected（已拒绝）：操作失败。

Promise的核心思想是，你可以通过.then()方法来处理异步操作的结果，而不会让代码变得难以维护。那么，.then()到底是什么？它是如何工作的呢？

.then() 的基本用法

.then()方法是Promise链式调用的核心。它的作用是为Promise对象添加回调函数，当Promise的状态变为Fulfilled或Rejected时，相应的回调函数会被执行。

语法

promise.then(onFulfilled, onRejected);

onFulfilled：当Promise成功兑现时执行的回调函数，通常接收一个参数，即Promise的返回值。
onRejected：当Promise被拒绝时执行的回调函数，通常接收一个错误对象作为参数。

示例1：简单的`.then()`

假设我们有一个Promise，它会在1秒后返回一个字符串"Hello, World!"。我们可以使用.then()来处理这个结果：

const myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Hello, World!");
  }, 1000);
});

myPromise.then((message) => {
  console.log(message); // 输出: Hello, World!
});

在这个例子中，myPromise在1秒后被兑现，then()中的回调函数接收到"Hello, World!"并将其打印到控制台。

示例2：处理失败的情况

当然，并不是所有的异步操作都能成功。如果我们想要处理失败的情况，可以为.then()提供第二个参数，即onRejected回调函数：

const myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject(new Error("Something went wrong!"));
  }, 1000);
});

myPromise.then(
  (message) => {
    console.log(message);
  },
  (error) => {
    console.error(error.message); // 输出: Something went wrong!
  }
);

在这个例子中，myPromise在1秒后被拒绝，then()中的onRejected回调函数接收到错误对象并将其消息打印到控制台。

链式调用的魅力

虽然单个.then()已经很有用了，但真正让Promise强大起来的是它的链式调用能力。通过链式调用，我们可以将多个异步操作串联起来，形成一个清晰的执行流程。

链式调用的基本原理

每个.then()方法都会返回一个新的Promise对象。这意味着你可以在.then()后面继续调用另一个.then()，从而实现链式调用。每次调用.then()时，前一个Promise的结果会作为参数传递给下一个.then()的回调函数。

示例3：链式调用

假设我们有一个异步操作，它首先获取用户ID，然后根据用户ID获取用户的详细信息，最后打印出用户的名字。我们可以使用链式调用来实现这个流程：

function getUserId() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(12345);
    }, 1000);
  });
}

function getUserDetails(userId) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({ id: userId, name: "Alice" });
    }, 1000);
  });
}

getUserId()
  .then((userId) => {
    console.log("Got user ID:", userId);
    return getUserDetails(userId);
  })
  .then((user) => {
    console.log("User details:", user.name);
  });

在这个例子中，getUserId()返回一个Promise，它在1秒后兑现并返回用户ID。然后，我们使用.then()将用户ID传递给getUserDetails()，后者也是一个Promise，它在1秒后兑现并返回用户详细信息。最后，我们在另一个.then()中打印出用户的名字。

错误传播

在链式调用中，如果任何一个Promise被拒绝，后续的所有.then()都会跳过，直到遇到一个专门处理错误的.catch()或onRejected回调函数。这使得错误处理变得更加简洁和集中。

示例4：错误传播

function getInvalidData() {
  return new Promise((_, reject) => {
    setTimeout(() => {
      reject(new Error("Invalid data"));
    }, 1000);
  });
}

getInvalidData()
  .then((data) => {
    console.log("This will not be executed");
  })
  .then(() => {
    console.log("Neither will this");
  })
  .catch((error) => {
    console.error("Error caught:", error.message); // 输出: Error caught: Invalid data
  });

在这个例子中，getInvalidData()返回一个被拒绝的Promise，因此后续的两个.then()都不会被执行，而是直接跳到.catch()来处理错误。

.then() 的返回值

.then()的返回值决定了下一个.then()的行为。具体来说：

如果.then()的回调函数返回一个非Promise的值，那么下一个.then()会接收到这个值。
如果.then()的回调函数返回一个Promise，那么下一个.then()会等待这个Promise兑现或拒绝后再执行。

示例5：返回非Promise值

Promise.resolve(10)
  .then((value) => {
    return value * 2;
  })
  .then((result) => {
    console.log(result); // 输出: 20
  });

在这个例子中，第一个.then()返回了一个非Promise的值20，因此第二个.then()接收到的就是20。

示例6：返回Promise

Promise.resolve(10)
  .then((value) => {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve(value * 2);
      }, 1000);
    });
  })
  .then((result) => {
    console.log(result); // 输出: 20
  });

在这个例子中，第一个.then()返回了一个Promise，因此第二个.then()会等待这个Promise兑现后再执行。

总结与最佳实践

通过今天的讲座，我们了解了Promise链式调用中的.then()方法的基本用法、链式调用的原理以及错误传播的机制。为了让你更好地掌握这些知识，这里有一些最佳实践建议：

保持代码简洁：尽量避免过多的嵌套，使用链式调用可以让代码更加清晰易读。
集中处理错误：使用.catch()来集中处理所有可能的错误，而不是在每个.then()中都写onRejected回调。
合理使用async/await：虽然.then()非常强大，但在某些情况下，使用async/await可以让代码更加直观和易于理解。

希望今天的讲座对你有所帮助！如果你有任何问题，欢迎在评论区留言，我会尽力解答。谢谢大家的参与，下次见！