async/await und Fehlerbehandlung
Schreiben Sie mit dem Schlüsselwort await async-Funktionen, schließen Sie erwartete Aufrufe in try/catch-Blöcke ein und verstehen Sie, dass async/await syntaktischer Zucker für Promises ist.
async/await und Fehlerbehandlung ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Was ist async/await?
async/await ist syntaktischer Zucker für Promises. Eine async-Funktion gibt immer ein Promise zurück. Das Schlüsselwort await hält die Funktion an, bis das erwartete Promise abgeschlossen ist. Der Code sieht synchron aus, wird aber asynchron ausgeführt.
async-Funktion
Setzen Sie das Schlüsselwort async vor eine Funktionsdeklaration oder einen Funktionsausdruck. Die Funktion verpackt ihren Rückgabewert nun implizit in ein Promise.
async function fetchUser(id) {
// implicitly returns a Promise
return { id, name: 'Alice' };
}
// Equivalent to:
function fetchUser(id) {
return Promise.resolve({ id, name: 'Alice' });
}await – Auf Promises warten
await kann nur innerhalb einer async-Funktion verwendet werden. Das Schlüsselwort hält die Ausführung an, bis das Promise aufgelöst ist, und gibt den aufgelösten Wert zurück. Anderer Code im Event Loop läuft weiter.
async function loadProfile(id) {
const user = await fetchUser(id); // waits for Promise
const posts = await fetchPosts(user.id); // waits again
return { user, posts };
}Sequenzielle und parallele awaits
Sequenzielles Warten ist leicht lesbar, aber langsam, wenn die Aufgaben nicht voneinander abhängen. Verwenden Sie Promise.all(), um auf mehrere unabhängige Aufgaben parallel zu warten.
// Sequential (slow if tasks are independent):
const user = await fetchUser(id);
const settings = await fetchSettings(id); // waits for user unnecessarily
// Parallel (fast):
const [user, settings] = await Promise.all([
fetchUser(id),
fetchSettings(id),
]);try/catch zur Fehlerbehandlung
Schließen Sie erwartete Aufrufe in try/catch ein, um Ablehnungen zu behandeln. Der catch-Block erhält den Grund für die Ablehnung als Fehlerobjekt.
async function saveUser(data) {
try {
const response = await fetch('/api/users', {
method: 'POST',
body: JSON.stringify(data),
headers: { 'Content-Type': 'application/json' }
});
if (!response.ok) throw new Error(`Server error ${response.status}`);
return await response.json();
} catch (err) {
console.error('Save failed:', err.message);
throw err; // re-throw so caller can handle
}
}Top-Level await
In ES-Modulen (nicht in CommonJS) können Sie await auf oberster Ebene verwenden, ohne den Code in eine async-Funktion einzuschließen. Das ist nützlich für die Initialisierung von Modulen.
// module.js (ES module)
const config = await fetch('/config.json').then(r => r.json());
export const API_URL = config.apiUrl;async/await mit forEach – Stolperfalle
Array.forEach() wartet nicht auf asynchrone Callbacks. Verwenden Sie for...of für sequenzielle asynchrone Iteration oder Promise.all(arr.map(...)) für parallele Ausführung.
// WRONG — forEach doesn't await:
items.forEach(async (item) => {
await processItem(item); // runs but forEach doesn't wait
});
// CORRECT — sequential:
for (const item of items) {
await processItem(item);
}
// CORRECT — parallel:
await Promise.all(items.map(item => processItem(item)));Fehlerobjekte und benutzerdefinierte Fehler
Werfen Sie immer Error-Objekte (keine Strings), damit Stacktraces erhalten bleiben. Erstellen Sie benutzerdefinierte Fehlerklassen für domänenspezifische Fehler, die Aufrufer anhand ihres Typs abfangen können.
class NetworkError extends Error {
constructor(message, status) {
super(message);
this.name = 'NetworkError';
this.status = status;
}
}
try {
const res = await fetch(url);
if (!res.ok) throw new NetworkError(`Failed`, res.status);
} catch (err) {
if (err instanceof NetworkError && err.status === 401) {
redirectToLogin();
} else {
throw err;
}
}finally in async/await
Der finally-Block wird ausgeführt, unabhängig davon, ob der try-Block erfolgreich war oder fehlgeschlagen ist – genau wie .finally() bei einem Promise. Verwenden Sie ihn, um Ressourcen freizugeben oder Ladezustände auszublenden.
async function loadData() {
setLoading(true);
try {
const data = await fetch('/api/data').then(r => r.json());
setData(data);
} catch (err) {
setError(err.message);
} finally {
setLoading(false); // always runs
}
}Asynchrone IIFE für Moduleinstiegspunkte
Schließen Sie den Einstiegspunkt eines Scripts in eine async IIFE ein, wenn Sie kein Top-Level await verwenden können.
(async () => {
const data = await fetchInitialData();
renderApp(data);
})();AbortController zum Abbrechen
Übergeben Sie ein AbortController-Signal an fetch, um eine laufende Anfrage abzubrechen. Wenn Sie AbortError separat abfangen, verhindern Sie, dass dem Benutzer ein Fehler angezeigt wird.
const controller = new AbortController();
try {
const data = await fetch(url, { signal: controller.signal }).then(r => r.json());
setData(data);
} catch (err) {
if (err.name !== 'AbortError') setError(err.message);
}
// Cancel:
controller.abort();Schnelltest
Welche Konstruktion behandelt Fehler eines erwarteten Promise korrekt?
Zusammenfassung: async/await
async-Funktionen geben immer Promises zurück. await hält die Ausführung an, bis ein Promise abgeschlossen ist. Verwenden Sie try/catch zur Fehlerbehandlung. Für parallele Vorgänge verwenden Sie Promise.all(). Vermeiden Sie await innerhalb von forEach – verwenden Sie for...of oder Promise.all. AbortController bricht laufende Anfragen ab. Top-Level await funktioniert in ES-Modulen.
Häufig gestellte Fragen
Ist die Lektion „async/await und Fehlerbehandlung“ kostenlos?
Ja — der vollständige Text von „async/await und Fehlerbehandlung“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Frontend Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „async/await und Fehlerbehandlung“?
Schreiben Sie mit dem Schlüsselwort await async-Funktionen, schließen Sie erwartete Aufrufe in try/catch-Blöcke ein und verstehen Sie, dass async/await syntaktischer Zucker für Promises ist. Du übst Frontend Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Frontend Academy zu starten?
Keine Vorkenntnisse erforderlich. Frontend Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.
Wie lange dauert die Lektion „async/await und Fehlerbehandlung“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Frontend Academy-Lektion Code schreiben und ausführen?
Ja. Jede Frontend Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Die Event Loop: Call Stack, Queue, Microtasks
- Callbacks und Callback Hell
- Promises: then, catch, finally, Promise.all
- async/await und Fehlerbehandlung