Promise的then方法返回的新Promise对象的状态为“成功(Resolved)”时,链式调用会如何执行?

简介: Promise的then方法返回的新Promise对象的状态为“成功(Resolved)”时,链式调用会如何执行?

当 Promise 的 then() 方法返回的新 Promise 对象状态为 成功(Resolved/Fulfilled) 时,链式调用会按照“顺序执行”的规则继续向下执行,具体表现如下:

1. 直接触发下一个 then() 的成功回调

下一个 then() 方法的第一个参数(onFulfilled 成功回调函数)会被立即调用,并且接收当前成功状态的结果值作为参数。

示例:

Promise.resolve(10)
  .then(num => {
   
    console.log("第一步结果:", num); // 输出:第一步结果:10
    return num * 2; // 返回普通值 → 新 Promise 状态为成功,结果为 20
  })
  .then(num => {
   
    // 接收上一个 then() 返回的成功结果
    console.log("第二步结果:", num); // 输出:第二步结果:20
    return Promise.resolve(num + 5); // 返回成功的 Promise → 新结果为 25
  })
  .then(num => {
   
    console.log("第三步结果:", num); // 输出:第三步结果:25
  });

2. 若返回的是“pending 状态的 Promise”,后续会等待其完成

如果当前 then() 的回调返回一个 仍处于 pending 状态的 Promise(例如包含异步操作),下一个 then()等待该 Promise 状态变为成功后再执行,并接收其最终的成功结果。

这一特性保证了异步操作的顺序执行:

Promise.resolve()
  .then(() => {
   
    // 返回一个 pending 状态的 Promise(模拟异步操作)
    return new Promise(resolve => {
   
      setTimeout(() => {
   
        console.log("异步操作完成");
        resolve("异步结果"); // 1秒后变为成功状态
      }, 1000);
    });
  })
  .then(result => {
   
    // 等待上一个 Promise 完成后才执行
    console.log("接收异步结果:", result); // 1秒后输出:接收异步结果:异步结果
  });

3. 若下一个 then() 未提供成功回调,结果会“透传”

如果下一个 then() 没有提供成功回调(第一个参数为 null 或未传),当前的成功结果会直接透传到再下一个 then() 中。

示例:

Promise.resolve("原始数据")
  .then(data => {
   
    return data + " 处理后"; // 新 Promise 成功,结果为 "原始数据 处理后"
  })
  .then() // 未提供成功回调,结果透传
  .then(null, () => {
   }) // 只提供失败回调,成功结果继续透传
  .then(result => {
   
    console.log("最终结果:", result); // 输出:最终结果:原始数据 处理后
  });

总结

then() 返回的新 Promise 状态为成功时,链式调用会:

  • 立即触发下一个 then() 的成功回调,并传递当前结果;
  • 若返回的是 pending 状态的 Promise,会等待其完成后再执行后续逻辑;
  • 若后续 then() 未处理成功结果,结果会透传到更后面的 then()

这种“结果传递 + 顺序执行”的机制,让多步异步操作能够像同步代码一样线性书写,清晰地表达操作的先后关系。

目录
相关文章
|
2天前
|
前端开发 数据处理
Promise的then方法可以返回一个非Promise的值吗?如果可以,这对链式调用有什么影响?
Promise的then方法可以返回一个非Promise的值吗?如果可以,这对链式调用有什么影响?
15 1
|
2天前
|
前端开发 BI
用代码示例演示如何使用Promise.allSettled()处理异步操作
用代码示例演示如何使用Promise.allSettled()处理异步操作
20 0
|
20天前
|
Web App开发 移动开发 前端开发
H5页面适配大屏和小屏的方案
H5页面适配大屏和小屏的方案
213 62
|
8天前
|
存储 JavaScript 安全
在 Pinia 中如何使用加密插件?
在 Pinia 中如何使用加密插件?
97 61
|
2天前
|
资源调度
nrm-pm是如何管理不同包管理器的源的?
nrm-pm是如何管理不同包管理器的源的?
|
2天前
|
前端开发
Promise的then方法返回的新Promise对象有什么特点?
Promise的then方法返回的新Promise对象有什么特点?
163 2
|
10月前
|
缓存 前端开发 JavaScript
前端性能优化:提升网页加载速度的10个技巧
【10月更文挑战第25天】在互联网时代,网页加载速度直接影响用户体验和搜索引擎排名。本文介绍了10个提升网页加载速度的技巧,包括减少HTTP请求、启用压缩、使用CDN、延迟加载非关键资源、优化图片、减少重定向、使用浏览器缓存、优化CSS和JavaScript、异步加载JavaScript以及代码分割。通过这些方法,可以显著提高网页性能,改善用户体验。
2088 5
|
11月前
|
JavaScript 前端开发 Java
JS引擎V8
【10月更文挑战第9天】
187 59
|
12月前
|
JSON 前端开发 JavaScript
不会webpack的前端可能是捡来的,万字总结webpack的超入门核心知识
该文章提供了Webpack的基础入门指南,涵盖安装配置、基本使用、加载器(Loaders)、插件(Plugins)的应用,以及如何通过Webpack优化前端项目的打包构建流程。
不会webpack的前端可能是捡来的,万字总结webpack的超入门核心知识
|
安全 网络安全 数据安全/隐私保护
SSL证书过期后网站还能正常访问吗
SSL证书过期后,网站仍可访问,但浏览器会出现警告,降低用户信任度,增加数据安全风险。过期可能导致安全性下降、信任问题、浏览器限制及合规性风险。管理员需关注证书有效期,及时续费或更换,并选择可靠提供商。
SSL证书过期后网站还能正常访问吗

热门文章

最新文章