⏱️6 min read · 1,219 words
📋 Table of Contents
📋 Inhaltsverzeichnis
Was ist Async/Await?
Asynchron/wartenist die sauberste JavaScript-Syntax für die Arbeit mit asynchronen Vorgängen – Netzwerkanfragen, Datei-E/A, Datenbankabfragen, Timer. Es wurde in ES2017 (ES8) eingeführt und sorgt dafür, dass asynchroner Code wie synchroner Code gelesen wird:
async– markiert eine Funktion als asynchron; gibt immer ein Versprechenawaitzurück – Pausiert die Ausführung innerhalb einer asynchronen Funktion, bis ein Versprechen erfüllt ist
Wichtige Erkenntnis:async/await basiert auf Promises.
await somePromiseist äquivalent zusomePromise.then(result => ...). Gleicher Mechanismus, sauberere Syntax.Versprechen zuerst: Die Stiftung
Vor async/await haben Sie Promises mit.then()verkettet . Wenn Sie dies verstehen, wird async/await click:
// Promise chain — works, but nests deeply
fetch('https://api.example.com/users/1')
.then(response => response.json())
.then(user => fetch('https://api.example.com/posts?userId=' + user.id))
.then(response => response.json())
.then(posts => console.log(posts))
.catch(error => console.error('Failed:', error));
// Same logic with async/await — flat and readable
async function getUserPosts(userId) {
const userRes = await fetch('https://api.example.com/users/' + userId);
const user = await userRes.json();
const postsRes = await fetch('https://api.example.com/posts?userId=' + user.id);
const posts = await postsRes.json();
return posts;
}Ihre erste asynchrone Funktion
async function getUser(id) {
const response = await fetch('https://jsonplaceholder.typicode.com/users/' + id);
if (!response.ok) throw new Error('HTTP error: ' + response.status);
return response.json();
}
const user = await getUser(1);
console.log(user.name); // "Leanne Graham"Schlüsselregeln: EinasyncFunktion gibt immer ein Versprechen zurück.awaitFunktioniert nur innerhalb asynchroner Funktionen. Wenn ein erwartetes Versprechen abgelehnt wird, wird es als ausgegebener Fehler weitergegeben.
Fehlerbehandlung mit try/catch
async function fetchUserData(userId) {
try {
const response = await fetch('/api/users/' + userId);
if (!response.ok) throw new Error('Server error: ' + response.status);
return await response.json();
} catch (error) {
if (error.name === 'TypeError') {
console.error('Network error:', error.message);
} else {
console.error('API error:', error.message);
}
return null;
}
}
// Per-await error handling
async function loadDashboard() {
const user = await fetchUserData(1).catch(() => null);
const stats = await fetchStats().catch(() => ({ views: 0 }));
const alerts = await fetchAlerts().catch(() => []);
return { user, stats, alerts };
}Parallele Ausführung mit Promise.all()
Sequentielle Wartevorgänge werden nacheinander ausgeführt. Verwenden SiePromise.all()um mehrere Promises gleichzeitig abzufeuern:
// ❌ Sequential — 3 seconds total (1s + 1s + 1s)
async function loadSequential() {
const users = await fetchUsers(); // waits 1s
const posts = await fetchPosts(); // waits another 1s
const photos = await fetchPhotos(); // waits another 1s
return { users, posts, photos };
}
// ✅ Parallel — ~1 second total (all fire at once)
async function loadParallel() {
const [users, posts, photos] = await Promise.all([
fetchUsers(),
fetchPosts(),
fetchPhotos()
]);
return { users, posts, photos };
}
// Promise.allSettled — get results even if some fail
async function loadWithFallbacks() {
const results = await Promise.allSettled([fetchUsers(), fetchPosts(), fetchPhotos()]);
return results.map(r => r.status === 'fulfilled' ? r.value : null);
}
// Promise.race — first wins (timeout pattern)
async function fetchWithTimeout(url, ms = 5000) {
const timeout = new Promise((_, reject) =>
setTimeout(() => reject(new Error('Request timed out')), ms)
);
return Promise.race([fetch(url), timeout]);
}Asynchrone Schleifen: Der richtige Weg
const userIds = [1, 2, 3, 4, 5];
// ❌ forEach DOES NOT await — requests fire but nothing waits
userIds.forEach(async (id) => {
const user = await fetchUser(id); // fires immediately without waiting
console.log(user.name);
});
// ✅ for...of — sequential (each awaits before next starts)
for (const id of userIds) {
const user = await fetchUser(id);
console.log(user.name);
}
// ✅ Promise.all + map — parallel (all fire simultaneously)
const users = await Promise.all(userIds.map(id => fetchUser(id)));
users.forEach(u => console.log(u.name));
// ✅ Batched parallel (avoid overwhelming the server)
async function batchProcess(ids, batchSize = 5) {
const results = [];
for (let i = 0; i < ids.length; i += batchSize) {
const batch = ids.slice(i, i + batchSize);
const batchResults = await Promise.all(batch.map(id => fetchUser(id)));
results.push(...batchResults);
}
return results;
}Erweiterte Muster
Asynchrones IIFE
// Async IIFE — top-level await not available? Use this
(async () => {
const config = await loadConfig();
await startServer(config);
console.log('Server running on port', config.port);
})();Async-Generator (Streaming)
async function* streamLargeDataset(url) {
let page = 1;
while (true) {
const response = await fetch(url + '?page=' + page);
const data = await response.json();
if (!data.items.length) break;
yield data.items;
page++;
}
}
// Consume with for-await-of
for await (const items of streamLargeDataset('/api/records')) {
processItems(items);
}Wiederholen Sie den Versuch mit exponentiellem Backoff
async function fetchWithRetry(url, options = {}, retries = 3, backoff = 1000) {
try {
const res = await fetch(url, options);
if (!res.ok && res.status >= 500 && retries > 0) {
await new Promise(r => setTimeout(r, backoff));
return fetchWithRetry(url, options, retries - 1, backoff * 2);
}
return res;
} catch (err) {
if (retries > 0) {
await new Promise(r => setTimeout(r, backoff));
return fetchWithRetry(url, options, retries - 1, backoff * 2);
}
throw err;
}
}Häufige Fehler
- Vergessen
await– Sie erhalten ein ausstehendes Versprechen, keinen Wert - asynchron in forEach– verwenden Sie
for...ofoderPromise.allstattdessen - Sequentielles Warten, wenn Parallelität möglich ist— unnötige Serialisierung beeinträchtigt die Leistung
- Schluckfehler– Leere Catch-Blöcke verbergen Fehler. Protokollieren oder erneut werfen.
// ❌ Missing await — user is a Promise, not an object
async function broken() {
const user = fetchUser(1); // missing await!
console.log(user.name); // undefined — user is a Promise
}
// ✅ Fixed
async function fixed() {
const user = await fetchUser(1);
console.log(user.name); // "Leanne Graham"
}Reales API-Muster
Ein produktionsbereiter API-Client mit Timeout- und Fehlerbehandlung:
class ApiClient {
constructor(baseUrl, options = {}) {
this.baseUrl = baseUrl;
this.timeout = options.timeout || 10000;
}
async request(path, options = {}) {
const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), this.timeout);
try {
const response = await fetch(this.baseUrl + path, {
...options,
signal: controller.signal,
headers: { 'Content-Type': 'application/json', ...options.headers }
});
clearTimeout(timeoutId);
if (!response.ok) {
const err = await response.json().catch(() => ({}));
throw Object.assign(new Error(err.message || 'HTTP ' + response.status), {
status: response.status, body: err
});
}
return response.json();
} catch (error) {
clearTimeout(timeoutId);
if (error.name === 'AbortError') throw new Error('Request timed out');
throw error;
}
}
async get(path) { return this.request(path); }
async post(path, body) { return this.request(path, { method: 'POST', body: JSON.stringify(body) }); }
}
const api = new ApiClient('https://api.example.com', { timeout: 8000 });
const user = await api.get('/users/1');🚀 Verbessern Sie Ihr JavaScript
Async/await ist eines der wichtigsten modernen JS-Muster. Entdecken Siewarum TypeScript asynchrone Muster noch sicherer macht, oder überprüfen Siealle Programmierhandbücherfür tiefere Tauchgänge.
Häufig gestellte Fragen
Was ist async/await?
Syntaktischer Zucker statt Versprechen.asyncmarkiert eine Funktion als asynchron;awaitpausiert es, bis ein Versprechen erfüllt ist. Lässt asynchronen Code wie synchronisierten Code lesen.
Unterschied zwischen async/await und Promises?
Gleicher Mechanismus, sauberere Syntax. Zur besseren Lesbarkeit verwenden Sie async/await. Verwenden Sie rohe Versprechen fürPromise.all(),Promise.race().
Wie gehe ich mit Fehlern um?
Verwenden Sie Try/Catch-Blöcke. Oder hängen Sie.catch()an zu einzelnen erwarteten Zusagen.
Wie kann man Vorgänge parallel ausführen?
await Promise.all([p1, p2, p3])– feuert alle gleichzeitig ab.
async/await in forEach?
Nein – forEach ignoriert asynchrone Rückrufe. Verwenden Siefor...ofoderPromise.all(arr.map(async x => ...)).
Was ist Top-Level-Award?
ES2022 – verwenden Sie „await“ auf der obersten Modulebene ohne asynchronen Wrapper. Nur ES-Module.
🔗 Share this article
✍️ Leave a Comment