Promise()构造函数内错误未被.catch()捕获问题咨询

Hey there! As someone new to Promises, this error is totally normal once you wrap your head around what's going on. Let's break down exactly why one of your snippets throws this error while the other two work fine.

The Core Issue: Unhandled Promise Rejection #

That error boils down to one simple thing: a Promise in your code was rejected (it failed), but you didn't write any code to handle that failure. Chrome (and all modern browsers) flag this because unhandled Promise rejections are almost always bugs—they mean your app might silently fail without you noticing.

Your other two snippets avoid this error for one of two reasons:

• Either their Promises never get rejected (they always resolve successfully),
• Or you already added code to catch and handle their rejections.

Common Scenarios That Cause This Error #

Let's walk through the most likely reasons your problematic snippet is throwing this error, using simple examples:

1. You explicitly rejected a Promise but didn't add a .catch()

If you create a Promise and call reject() (or throw an error inside an async function), you need to pair it with error handling. For example:

// ❌ This will throw "Uncaught (in promise) failure"
const badPromise = new Promise((resolve, reject) => {
  reject('failure'); // You're explicitly rejecting the Promise
});
badPromise.then(result => console.log(result)); // No catch to handle the rejection!

Compare that to a working version with a .catch():

// ✅ No error here—failure is handled
const goodPromise = new Promise((resolve, reject) => {
  reject('failure');
});
goodPromise
  .then(result => console.log(result))
  .catch(err => console.error('Oops:', err)); // Catches the rejection

2. A hidden async operation failed (no error handling)

Sometimes rejections happen implicitly, not because you called reject(). For example, a fetch request that fails (network error, invalid URL) will automatically reject the Promise. If you don't catch that, you'll get the error:

// ❌ Fetch fails (invalid URL) and no catch = unhandled rejection
fetch('https://this-url-does-not-exist.com')
  .then(res => res.json());

Your other snippets probably don't have these hidden failure points, or they already handle them with .catch() or try/catch.

3. async/await without try/catch

If you're using async/await, forgetting to wrap your await calls in try/catch will also trigger this error:

// ❌ Unhandled rejection here
async function fetchData() {
  const result = await Promise.reject('failure'); // Await a rejected Promise
  console.log(result);
}
fetchData();

The fix is wrapping the await in a try/catch block:

// ✅ Error is caught and handled
async function fetchData() {
  try {
    const result = await Promise.reject('failure');
    console.log(result);
  } catch (err) {
    console.error('Caught the error:', err);
  }
}
fetchData();

Quick Recap #

The key difference between your problematic snippet and the working ones is:

• The failing code creates a rejected Promise with no error handling.
• The working code either never rejects, or has .catch() / try/catch to handle failures.

As you keep working with Promises, remember: always handle rejections. It's a critical habit to prevent silent failures and debug issues easily.

内容的提问来源于stack exchange，提问作者Al R.