JavaScript Promise 的 then() 方法详解

原创已于 2025-06-03 16:10:45 修改 · 2k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript #前端

于 2025-06-03 16:07:35 首次发布

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"
  });