Promise实例中setTimeout函数的异常捕获问题及解决方案咨询

Great question—you’re right that this ties directly to how the JavaScript event loop works, and how Promises handle errors. Let’s break this down step by step.

Why the First Example Works, But the Second Doesn’t #

In your first code snippet, when you throw an error directly inside the Promise executor (the function passed to new Promise()), this happens synchronously as the Promise is being initialized. The Promise’s internal logic immediately catches this throw and transitions the Promise to a rejected state. That’s why your .catch() handler picks it up without issue.

The second example is different because the error is thrown inside a setTimeout callback. Here’s the key: setTimeout schedules its callback to run later, in a separate iteration of the event loop. By the time that callback fires, the original Promise executor has already finished running (it just scheduled the timeout and exited). The throw inside the timeout callback isn’t happening within the context of the Promise anymore—it’s an uncaught error in the global execution context. The Promise has no way to track errors that happen outside its executor or the functions tied to resolve/reject, so its state never becomes rejected, and the .catch() never triggers.

How to Fix It: Use reject() Instead of Throwing #

To get the error into the Promise’s rejection chain, you need to explicitly call the reject function that’s provided to the Promise executor. This tells the Promise to transition to a rejected state, which will trigger your .catch() handler.

Here’s the corrected version of your second example:

const TIMEOUT = 1000;
const mySecondPromise = new Promise((resolve, reject) => {
  setTimeout(() => { 
    // Replace throw with reject to notify the Promise of the error
    reject(new Error(`Error in asynchronous function`)); 
  }, TIMEOUT );
});
mySecondPromise.catch((error) => console.log(`Caught the error: ${error.message}`));

Now, when the timeout callback runs, it calls reject(), which properly updates the Promise’s state. Your .catch() handler will now catch the error as expected.

Applying This to Your Delay Function #

Your current Delay function uses resolve() but doesn’t handle errors inside the setTimeout callback. To ensure any errors there are caught by .catch(), wrap the code inside the timeout in a try/catch block, and call reject() if an error occurs.

Here’s the updated function:

import moment from "moment";
const Delay = (timeout, timePress) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      try {
        // Your existing logic—any error here will be caught
        const result = `${moment().format("LTS")} ${timeout} ${timePress}`;
        resolve(result);
      } catch (error) {
        // Pass the error to reject so .catch() can handle it
        reject(error);
      }
    }, timeout * 1000);
  });
};
export default Delay;

Now, if something goes wrong inside the setTimeout callback (like moment() failing, or a typo in your code), the try/catch will catch the error, and reject(error) will propagate it to the Promise’s rejection chain. You can then catch it like this:

Delay(2, "test")
  .then(result => console.log(result))
  .catch(error => console.log(`Oops, caught an error: ${error.message}`));

内容的提问来源于stack exchange，提问作者Sergey Isaev