JavaScript Promise链中return和不return的区别

在 JavaScript 异步编程中，Promise 链式调用（Chaining）是处理多步骤操作的核心机制。很多开发者在编写 .then() 链时，常常因为遗漏 return 关键字而导致数据丢失或执行顺序混乱。

本文将直接拆解 return 在 Promise 链中的两个核心作用：值传递与流程控制。

1. 核心机制解析

.then() 方法在执行完毕后，默认会返回一个新的 Promise 对象。这个新 Promise 的状态取决于 .then() 回调函数的执行情况：

1. 如果你 return 了一个值：这个值会成为下一个 .then() 的参数，且下一个 .then() 会等待当前操作完成。
2. 如果你没有 return（或 return 了 undefined）：下一个 .then() 会立即收到 undefined 作为参数，且不会等待任何异步操作完成。

下面的流程图展示了这一逻辑分支：

2. 场景一：数据的处理与传递

这是最基础的区别。在同步或简单的异步处理中，return 决定了数据能否流向下一个环节。

运行以下代码对比差异：

代码示例 1：使用 return

Promise.resolve(10)
  .then((data) => {
    const result = data + 10;
    return result; // 将结果传递给下一个 .then
  })
  .then((finalData) => {
    console.log('最终结果:', finalData); // 输出: 20
  });

代码示例 2：不使用 return

Promise.resolve(10)
  .then((data) => {
    const result = data + 10;
    // 忘记 return，相当于 return undefined
  })
  .then((finalData) => {
    console.log('最终结果:', finalData); // 输出: undefined
  });

核心结论：在数据处理流中，必须 显式返回 你希望下一步使用的数据。

3. 场景二：异步流程的顺序控制（关键陷阱）

这是最容易出错的地方。当 .then() 内部包含另一个异步操作（如 fetch 请求）时，return 决定了是“串行执行”还是“并行执行”。

代码示例 3：等待异步完成（推荐）

Promise.resolve()
  .then(() => {
    console.log('1. 开始第一步');
    // 模拟一个耗时 1 秒的异步操作
    return new Promise(resolve => {
      setTimeout(() => {
        resolve('数据加载完成');
      }, 1000);
    });
  })
  .then((msg) => {
    console.log('2. 接收:', msg); // 1秒后才执行
  });

执行流程：

1. 第一个 .then 返回一个 Promise。
2. 链式调用暂停，等待该 Promise 变为 resolved 状态。
3. 1秒后，执行第二个 .then。

代码示例 4：不等待异步执行（常见 Bug）

Promise.resolve()
  .then(() => {
    console.log('1. 开始第一步');
    // 模拟耗时操作，但没有 return
    new Promise(resolve => {
      setTimeout(() => {
        resolve('数据加载完成');
      }, 1000);
    });
    // 相当于 return undefined
  })
  .then((msg) => {
    console.log('2. 接收:', msg); // 立即执行，不等待上面的 setTimeout
  });

执行流程：

1. 第一个 .then 启动了内部的 setTimeout。
2. 由于没有 return，第一个 .then 立即结束，并传递 undefined。
3. 第二个 .then 立即执行，打印 undefined。
4. 1秒后，setTimeout 回调触发，但已经没有 .then 在等待它了（变成了“即发即弃”的 Fire-and-Forget 操作）。

4. 速查对照表

下表总结了不同写法对后续代码的影响。

5. 修复与预防步骤

为了避免因遗漏 return 导致的 Bug，按照以下步骤检查代码：

1. 审查 每一个 .then() 回调函数的末尾。
2. 确认 是否将下一步需要使用的变量或 Promise 放在 return 关键字之后。
3. 使用 ESLint 等工具开启 no-return-await 或相关规则，虽然 no-return-await 侧重于 await，但良好的静态分析工具通常能提示未处理的 Promise。
4. 测试 关键链路，在 .then 中打印日志，验证接收到的数据是否为预期的对象而非 undefined。