JavaScript中Promise的then()方法用例详解

前言

then() 是 Promise 的核心方法，用于处理异步操作的成功或失败结果，并支持链式调用。以下是其定义、参数、使用方式、注意事项及用例说明。

一、then() 方法定义

语法：

promise.then(
  onFulfilled?: (value: T) => TResult | Promise<TResult>,
  onRejected?: (reason: any) => TError | Promise<TError>
): Promise<TResult | TError>

作用：

接收两个回调函数（onFulfilled 和 onRejected），分别处理 Promise 的成功和失败状态
返回一个新的 Promise，其状态由回调函数的执行结果决定

二、参数说明

1. onFulfilled（可选）

触发条件：当 Promise 状态变为 fulfilled（成功）时调用
输入参数：value（Promise 的解决值）
返回值：可以是任意值或另一个 Promise，影响新 Promise 的状态和结果

2. onRejected（可选）

触发条件：当 Promise 状态变为 rejected（失败）时调用
输入参数：reason（Promise 的拒绝原因）
返回值：可以是任意值或另一个 Promise，用于恢复链式调用

参数默认行为

如果忽略 onFulfilled，则成功值直接传递给下一个 .then()
如果忽略 onRejected，则错误会沿链向下传递，直到被 .catch() 捕获

三、使用方式

1. 基本用法

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

2. 错误处理

Promise.reject("Error!")
  .then(
    (value) => console.log("不会执行"), 
    (reason) => {
      console.error(reason); // 输出 "Error!"
      return "Recovered";
    }
  )
  .then((result) => {
    console.log(result); // 输出 "Recovered"
  });

3. 链式调用中的异步操作

function asyncAdd(a, b) {
  return new Promise((resolve) => {
    setTimeout(() => resolve(a + b), 1000);
  });
}

asyncAdd(2, 3)
  .then((sum) => asyncAdd(sum, 5))
  .then((final) => console.log(final)); // 输出 10（2秒后）

四、注意事项

1. 错误冒泡

如果未提供 onRejected 或未用 .catch()，错误会一直传递到链的末端：

Promise.reject("Error")
  .then((value) => console.log("Success"))
  .catch((err) => console.error(err)); // 必须捕获

2. 返回值类型

返回普通值：新 Promise 直接成功
返回 Promise：新 Promise 跟随其状态
返回 thenable 对象：展开后生成新 Promise

Promise.resolve(1)
  .then(() => ({
    then(resolve) {
      resolve("Thenable");
    }
  }))
  .then((result) => console.log(result)); // 输出 "Thenable"

3. 同步错误处理

在 then() 回调中抛出同步错误会自动触发拒绝：

Promise.resolve()
  .then(() => {
    throw new Error("Oops!");
  })
  .catch((err) => console.error(err)); // 捕获错误

4. 微任务队列

then() 的回调在微任务队列中执行，优先于宏任务：

setTimeout(() => console.log("Macro Task"), 0);
Promise.resolve().then(() => console.log("Micro Task"));
// 输出顺序：Micro Task → Macro Task

五、用例说明

用例 1：链式数据处理

function fetchUser() {
  return Promise.resolve({ id: 1, name: "Alice" });
}

fetchUser()
  .then((user) => {
    console.log("User:", user);
    return user.name.toUpperCase();
  })
  .then((name) => {
    console.log("Name:", name); // "ALICE"
  });

用例 2：组合多个异步操作

function fetchOrder(userId) {
  return Promise.resolve([{ id: 100, product: "Book" }]);
}

function fetchPayment(orderId) {
  return Promise.resolve({ amount: 50 });
}

fetchUser()
  .then((user) => fetchOrder(user.id))
  .then((orders) => fetchPayment(orders[0].id))
  .then((payment) => console.log("Payment:", payment.amount)) // 50
  .catch((err) => console.error("Chain failed:", err));

用例 3：错误恢复

Promise.reject("Network Error")
  .then(null, (reason) => {
    console.log("Fallback to cached data");
    return { data: "Cached Data" };
  })
  .then((data) => {
    console.log("Data:", data.data); // "Cached Data"
  });