So beheben Sie den Fehler „Uncaught in Promise“ in JavaScript

Der FehlerNicht gefangen (im Versprechen) in Ihrer Browserkonsole bedeutet, dass ein Promise abgelehnt wurde, die Ablehnung jedoch nicht bearbeitet wurde. Es erscheint häufig zusammen mit einer tatsächlichen Fehlermeldung und weist auf nicht behandelte asynchrone Fehler hin. So beheben Sie jede Variante.

Was dieser Fehler bedeutet

Wenn ein Versprechen abgelehnt wird (fehlschlägt), müssen Sie es mit.catch()behandeln oder ein Try/Catch (mit async/await). Wenn Sie dies nicht tun, meldet JavaScript „Uncaught (in versprochen)“ – ein asynchroner Fehler, der ohne Handler durchgeschlüpft ist. Im Gegensatz zu synchronen Fehlern führen unbehandelte Versprechenablehnungen nicht zum Absturz der Seite, sondern weisen auf einen Fehler hin.

Ursache 1: Fehlendes .catch() in einer Promise-Kette

// 🐛 No .catch() — if fetch fails, rejection is unhandled
fetch('/api/data')
  .then(res => res.json())
  .then(data => console.log(data));
  // Missing .catch() → "Uncaught (in promise)" if it fails

// ✅ Always add .catch()
fetch('/api/data')
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error('Fetch failed:', err));

Ursache 2: async/await Ohne try/catch

// 🐛 await can reject, and there's no try/catch
async function loadData() {
  const res = await fetch('/api/data');   // rejects if network fails
  const data = await res.json();
  return data;
}
loadData();   // "Uncaught (in promise)" if fetch rejects

// ✅ Wrap in try/catch
async function loadData() {
  try {
    const res = await fetch('/api/data');
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    return await res.json();
  } catch (err) {
    console.error('Load failed:', err);
    return null;
  }
}

Ursache 3: Aufrufen einer asynchronen Funktion, ohne deren Ablehnung zu behandeln

// 🐛 async function rejects, caller doesn't handle it
async function saveData() {
  throw new Error('Save failed');
}

saveData();   // "Uncaught (in promise): Error: Save failed"

// ✅ Handle at the call site
saveData().catch(err => console.error(err));

// ✅ Or in an async context
async function main() {
  try {
    await saveData();
  } catch (err) {
    console.error(err);
  }
}

Ursache 4: Vergessen, in einer Kette zurückzukehren/zu warten

// 🐛 Nested promise not returned — its rejection escapes the chain
function process() {
  return fetch('/api/step1')
    .then(res => {
      fetch('/api/step2');   // ❌ not returned — rejection unhandled
    });
}

// ✅ Return the inner promise so the chain handles it
function process() {
  return fetch('/api/step1')
    .then(res => {
      return fetch('/api/step2');   // returned — chain catches its errors
    })
    .catch(err => console.error(err));
}

Ursache 5: Ereignishandler mit asynchronen Rückrufen

// 🐛 async event handler with no error handling
button.addEventListener('click', async () => {
  const data = await fetchData();   // if this rejects, unhandled
  render(data);
});

// ✅ Handle errors inside the async handler
button.addEventListener('click', async () => {
  try {
    const data = await fetchData();
    render(data);
  } catch (err) {
    showError('Could not load data');
    console.error(err);
  }
});

Globaler Handler (Sicherheitsnetz)

// Catch any unhandled rejections globally (last resort, not a fix)
window.addEventListener('unhandledrejection', (event) => {
  console.error('Unhandled rejection:', event.reason);
  event.preventDefault();   // prevents the default console error
  // Log to your error tracking service
  reportError(event.reason);
});

// In Node.js:
process.on('unhandledRejection', (reason, promise) => {
  console.error('Unhandled Rejection:', reason);
  // In production, log and possibly exit gracefully
});

Promise.all und Fehlerbehandlung

// 🐛 Promise.all rejects if ANY promise rejects — needs a catch
const results = await Promise.all([fetchA(), fetchB(), fetchC()]);
// If fetchB rejects, the whole thing rejects — handle it

// ✅ With try/catch
try {
  const results = await Promise.all([fetchA(), fetchB(), fetchC()]);
} catch (err) {
  console.error('One of the requests failed:', err);
}

// ✅ Or use allSettled to get all results regardless of failures
const results = await Promise.allSettled([fetchA(), fetchB(), fetchC()]);
results.forEach(r => {
  if (r.status === 'fulfilled') use(r.value);
  else console.error('Failed:', r.reason);
});

Häufig gestellte Fragen

F: Führt eine unbehandelte Ablehnung zum Absturz meiner App?
A: In Browsern nein – die Seite läuft weiter, aber Sie erhalten den Konsolenfehler und der fehlgeschlagene Vorgang wurde stillschweigend nicht abgeschlossen. In Node.js können unbehandelte Ablehnungen den Prozess zum Absturz bringen (in modernen Versionen). In jedem Fall handelt es sich um einen Fehler, den es zu beheben und nicht zu ignorieren gilt.

F: Wo genau füge ich .catch() ein?
A: Am Ende der Versprechenskette, sodass Fehler aus allen vorherigen Schritten abgefangen werden. Mit async/await werden die erwarteten Aufrufe in einen Try/Catch eingeschlossen. Der Schlüssel liegt darin, dass jede asynchrone Operation irgendwo einen Handler hat.

F: Ist der globale Unhandledrejection-Handler eine geeignete Lösung?
A: Nein – es ist ein Sicherheitsnetz für die Protokollierung und kein Ersatz für die Behandlung von Fehlern dort, wo sie auftreten. Verwenden Sie es, um alles zu erfassen und zu melden, was Sie übersehen haben, aber beheben Sie die tatsächlich nicht bearbeiteten Ablehnungen an der Quelle.

F: Warum funktioniert es manchmal, bei anderen jedoch nicht?
A: Die Ablehnung erfolgt nur, wenn das Versprechen tatsächlich fehlschlägt (Netzwerkfehler, HTTP-Fehler, ausgelöste Ausnahme). Es funktioniert, wenn alles gelingt, und Fehler nur, wenn etwas fehlschlägt – genau dann benötigen Sie die fehlende Fehlerbehandlung.

F: Soll ich .catch() oder try/catch verwenden?
A: Verwenden Sie try/catch mit async/await (sauberer, liest von oben nach unten). Verwenden Sie .catch() mit Versprechensketten (.then). Beide verarbeiten Ablehnungen – wählen Sie basierend auf dem von Ihnen verwendeten Stil aus. Mischen Sie sie nicht unbeholfen in derselben Funktion.

Fazit

„Nicht abgefangen (in Versprechen)“ bedeutet, dass ein asynchroner Vorgang ohne Fehlerhandler fehlgeschlagen ist. Die Lösung besteht immer darin, die Ablehnung zu behandeln:füge.catch()hinzu Ketten versprechen, wickelnawait Aufrufe in try/catch und Verarbeitung von Ablehnungen an der Aufrufstelle von asynchronen Funktionen. Fügen Sie ein globalesunhandledrejectionhinzu Handler als Sicherheitsnetz für die Protokollierung, sondern beheben Sie die tatsächlich nicht behandelten Ablehnungen an der Quelle. Jeder asynchrone Vorgang in Ihrem Code sollte irgendwo eine Fehlerbehandlung haben – das ist der zuverlässige Weg, diese Fehler zu beseitigen und robuste Anwendungen zu erstellen.