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()方法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

原生JavaScript实现五子棋游戏
这篇文章主要为大家详细介绍了原生JavaScript实现五子棋游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-11-11
js中的for如何实现foreach中的遍历
js中没有foreach这个关键字，但是可以用var v in array来实现遍历，下面有个不错的示例，大家可以参考下
2014-05-05
Ajax实现邮箱验证实例代码
这篇文章介绍了Ajax实现邮箱验证的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-04-04
uni-app微信小程序之红包雨活动完整源码
最近公司需求做一个微信红包雨功能,这里给大家总结下实现的方法,这篇文章主要给大家介绍了关于uni-app微信小程序之红包雨活动的相关资料,需要的朋友可以参考下
2024-01-01
JavaScript编写推箱子游戏
本文给大家介绍的是使用javascript来实现一款经典的老游戏--推箱子，主要侧重于实现的思路，最后附上源码给大家。
2015-07-07
javascipt匹配单行和多行注释的正则表达式
用JSON.parse 来转换成json对象，由于有注释的存在则无法正确转换甚至报错。匹配字符串中的所有注释，包括单行和多行注释
2013-11-11
使用JavaScript实现一个简单的哈希映射功能
哈希表大家应该都经常用到吧,那么大家有没有想过哈希表是怎么实现的呢,本文我们就来从一道简单的题目来了解一下哈希表的简单原理和实现吧
2024-02-02
基于微前端qiankun的多页签缓存方案实践
这篇文章主要介绍了基于微前端qiankun的多页签缓存方案实践,本文对qiankun框架的使用没有做太多的发散总结，官网和Github上已经有很多相关问题的总结和踩坑经验可供参考，需要的朋友可以参考下
2022-08-08
一文带你搞懂JavaScript中的原型和原型链
JavaScript是基于原型继承的语言,每个对象都有一个原型（prototype）,本文则是重点对prototype相关知识点做拆解和梳理,感兴趣的可以了解下
2023-08-08
从阶乘函数对比Javascript和C#的异同
今天学习Javascript函数，发现这完全是一个神奇的东西。跟我们平常所见强类型语言中的函数有好多不同。下面我们就从C#和JavaScript的两个计算阶乘的函数中比较两者的异同
2012-05-05