首页 > 网络编程 > JavaScript > javascript技巧 > JS Promise的then()方法

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

2025-07-02 10:33:01 作者：yhyvc

在JavaScript中Promise是一种用于处理异步操作的编程模式,它代表了一个最终可能完成(解析)或失败(拒绝)的操作及其结果值,这篇文章主要给大家介绍了关于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"
  });

总结

then() 是 Promise 链式调用的核心：处理成功/失败状态，返回新 Promise
参数为函数：非函数参数会被忽略，可能导致意外结果
错误处理优先：始终用 .catch() 或 onRejected 处理错误
返回值决定链式状态：理解不同返回值类型的影响
微任务机制：回调在微任务队列执行，优先于宏任务

到此这篇关于JavaScript中Promise的then()方法详解的文章就介绍到这了,更多相关JS Promise的then()方法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！