在promise中,多个then如何传值

在 JavaScript 中,Promise 的多个 .then() 是链式调用 的,值可以通过返回值 的方式,在多个 .then() 之间传递。这是 Promise 链式调用的核心机制。


基本原理:每个 then 接收上一个 then 的返回值

javascript 复制代码
new Promise((resolve, reject) => {
  resolve(10); // 初始值
})
  .then((value) => {
    console.log("第一个 then 收到:", value); // 10
    return value * 2;
  })
  .then((value) => {
    console.log("第二个 then 收到:", value); // 20
    return value + 5;
  })
  .then((value) => {
    console.log("第三个 then 收到:", value); // 25
  });

输出:

复制代码
第一个 then 收到: 10
第二个 then 收到: 20
第三个 then 收到: 25

每个 .then() 的返回值会作为下一个 .then() 的输入参数。


如果某个 then 返回的是 Promise?

如果某个 .then() 返回一个新的 Promise,那么下一个 .then() 会在该 Promise 成功解决(fulfilled) 后执行,并接收到它的 resolve 值。

javascript 复制代码
new Promise((resolve) => resolve(10))
  .then((value) => {
    console.log("第一个 then:", value); // 10
    return new Promise((resolve) => setTimeout(resolve, 1000, value * 2));
  })
  .then((value) => {
    console.log("第二个 then(1秒后):", value); // 20
  });

多个异步操作串行执行(链式传值)

你可以利用这种特性来串行处理多个异步任务:

javascript 复制代码
function step1(value) {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log("Step 1:", value);
      resolve(value + 1);
    }, 1000);
  });
}

function step2(value) {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log("Step 2:", value);
      resolve(value * 2);
    }, 1000);
  });
}

function step3(value) {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log("Step 3:", value);
      resolve(value - 5);
    }, 1000);
  });
}

step1(5)
  .then(step2)
  .then(step3)
  .then((finalResult) => {
    console.log("最终结果:", finalResult); // (5+1)*2 -5 = 7
  });

错误处理:catch 捕获链中任意错误

javascript 复制代码
Promise.resolve(10)
  .then((val) => {
    console.log(val);
    throw new Error("出错了!");
  })
  .then(() => {
    console.log("不会执行");
  })
  .catch((err) => {
    console.error("捕获错误:", err.message);
  });

小结:如何传值?

场景 如何传值
同步返回值 直接 return value
异步返回值 return new Promise(...)
终止链或跳转 抛出异常 throw error 或返回 rejected Promise
多个值传递? 返回对象或数组,如 return { a, b }

示例:带多个值传递的 Promise 链

javascript 复制代码
Promise.resolve({ name: "Alice", age: 10 })
  .then((person) => {
    person.age += 1;
    return person;
  })
  .then((person) => {
    console.log(`${person.name} 现在 ${person.age} 岁了`);
  });

如果你需要更复杂的流程控制,比如并行、条件分支等,也可以结合 Promise.all、async/await 来实现。

相关推荐
AlanAshley5 分钟前
无 SIM 卡也能打 110?手机紧急呼叫能力的软硬件技术探究
开发语言·智能手机·php
modelmd10 分钟前
Go 切片、映射常见使用场景
开发语言·后端·golang
陈随易27 分钟前
一个网吧网管,做了个网页,卖了 5000 万
前端·后端·程序员
dialect_8 小时前
KMP算法
开发语言·c++·算法
jktantan9 小时前
Vue keep-alive 切标签后滚动位置回顶?因为 onDeactivated 里读到的 scrollTop 是 0
前端·javascript·vue.js
总要学点什么9 小时前
第89篇:三维特效-螺旋圆效果——让螺旋臂卷起一圈圈外扩的涟漪
开发语言·javascript·ecmascript·webgl·cesium·空间分析·1024程序员节
2601_9628857210 小时前
quotes 字段全解:涨跌幅、振幅、换手率的口径与单位
java·前端·spring
excel10 小时前
encodeURI 和 encodeURIComponent 有什么区别?
前端
前端精髓10 小时前
调用openrouter的免费API模型
java·前端·javascript
赛博守夜人11 小时前
AI安全攻防与治理之十四:AI 安全测试不能脱离传统安全,Web、API、移动端与模型攻击面的组合拳
前端·人工智能·安全