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

更新时间：2025年07月02日 10:45:08 作者：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()方法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

ie与firefox下的event使用说明与详细区别
event是ie自带的一个对象，而ff中不存在该对象，只能通过传递参数（并且惟一）的方式来实现event.
2009-10-10
js实现文字选中分享功能
本文主要分享了js实现文字选中分享功能的示例代码。具有很好的参考价值，下面跟着小编一起来看下吧
2017-01-01
推荐三款不错的图片压缩上传插件(webuploader、localResizeIMG4、LUploader)
这篇文章主要为大家详细介绍了三款不错的图片压缩上传插件，webuploader、移动端上传插件localResizeIMG4以及LUploader)
2017-04-04
js仿微博动态栏功能
本文主要介绍了js仿微博动态栏功能的示例代码，具有很好的参考价值，下面跟着小编一起来看下吧
2017-02-02
js实现内容显示并使用json传输数据
这篇文章主要为大家详细介绍了js实现内容显示并使用json传输数据的方法，感兴趣的小伙伴们可以参考一下
2016-03-03
JavaScript算法题之如何将一个数组旋转k步
这篇文章主要给大家介绍了关于JavaScript算法题之如何将一个数组旋转k步的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2022-03-03
ES6学习笔记之字符串、数组、对象、函数新增知识点实例分析
这篇文章主要介绍了ES6学习笔记之字符串、数组、对象、函数新增知识点,结合实例形式分析了ES6字符串、数组、对象、函数新增知识点、使用技巧与操作注意事项,需要的朋友可以参考下
2020-01-01
JavaScript快速调试的两个技巧
这篇文章主要给大家介绍了关于JavaScript快速调试的两个技巧，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-11-11
JS实现禁止鼠标右键的功能
遇到网页上有精美图片或者精彩文字想保存时，通常大家都是选中目标后按鼠标右键，在弹出菜单中选择“图片另存为”或“复制”来达到我们的目的。但是，目前有许多网页都屏蔽了鼠标右键，那么用js如何实现禁止鼠标右键的功能呢？下面小编给大家介绍下
2016-10-10
JavaScript实现拖拽效果
这篇文章主要为大家详细介绍了JavaScript实现拖拽效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-03-03