关于JavaScript中Promise.then返回值及Promise核心机制的技术咨询

Great question—this is a foundational detail that makes Promise chaining so powerful, and it’s totally normal to want to clarify it! Let’s break down exactly what Promise.then() returns, with practical examples to make it concrete.

First, the core rule: Promise.then() always returns a brand new Promise object—it never returns the original Promise you called it on. This new Promise’s state and resolved value depend entirely on what you do inside the callback you pass to then().

Here are the key scenarios:

• Returning a non-Promise, non-thenable value (like a string, number, undefined, or plain object):
  The new Promise immediately transitions to the resolved state, with your returned value as its resolved value.

  const initialPromise = Promise.resolve("Hello");
  const chainedPromise = initialPromise.then((val) => {
    return val + ", World!";
  });
  chainedPromise.then((result) => console.log(result)); // Logs: "Hello, World!"
  

• Returning a resolved Promise:
  The new Promise will adopt the resolved value of that returned Promise. It’s effectively passing the value through.

  const initialPromise = Promise.resolve("Hello");
  const chainedPromise = initialPromise.then((val) => {
    return Promise.resolve(val + ", World!");
  });
  chainedPromise.then((result) => console.log(result)); // Logs: "Hello, World!"
  

• Returning a rejected Promise:
  The new Promise transitions to the rejected state, using the rejection reason from the returned Promise.

  const initialPromise = Promise.resolve("Hello");
  const chainedPromise = initialPromise.then((val) => {
    return Promise.reject(new Error("Oops, something broke!"));
  });
  chainedPromise.catch((err) => console.error(err.message)); // Logs: "Oops, something broke!"
  

• Returning a thenable object (any object with a .then() method):
  The new Promise will "follow" the thenable’s state. It waits for the thenable’s .then() to execute, and adopts its resolved/rejected state accordingly.

  const initialPromise = Promise.resolve("Hello");
  const customThenable = {
    then(resolve) {
      setTimeout(() => resolve(" from a thenable"), 1000);
    }
  };
  const chainedPromise = initialPromise.then((val) => customThenable);
  chainedPromise.then((result) => console.log("Hello" + result)); // Logs: "Hello from a thenable" after 1 second
  

• Not returning anything:
  This is equivalent to returning undefined. The new Promise resolves to undefined.

  const initialPromise = Promise.resolve("Hello");
  const chainedPromise = initialPromise.then((val) => {
    console.log(val); // Logs: "Hello"
    // No return statement here
  });
  chainedPromise.then((result) => console.log(result)); // Logs: undefined
  

This behavior is what enables the clean, sequential Promise chaining you’ll see in async code—each .then() builds on the previous result, with the new Promise acting as a bridge between steps.

内容的提问来源于stack exchange，提问作者Willem van der Veen