async/await och felhantering
Skriv async-funktioner med nyckelordet await, omslut väntade anrop med try/catch-block och förstå hur async/await är syntaktiskt socker ovanpå Promises.
async/await och felhantering är en gratis lektion i Frontend Academy på CoddyKit. Detta är lektion 4 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Frontend Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Frontend Academy innehåller totalt 4 lektioner.
Vad är async/await?
async/await är syntaktiskt socker för Promises. En async-funktion returnerar alltid en Promise. Nyckelordet await pausar funktionen tills den väntade Promisen har avgjorts. Koden ser synkron ut men körs asynkront.
async-funktion
Lägg till nyckelordet async före en funktionsdeklaration eller ett funktionsuttryck. Funktionen omsluter nu automatiskt sitt returvärde i en 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 – pausa för Promises
await kan endast användas inuti en async-funktion. Det pausar körningen tills Promisen har lösts och returnerar det lösta värdet. Annan kod i event loopen fortsätter att köras.
async function loadProfile(id) {
const user = await fetchUser(id); // waits for Promise
const posts = await fetchPosts(user.id); // waits again
return { user, posts };
}Sekventiell kontra parallell await
Att invänta sekventiellt är lätt att läsa men långsamt om uppgifterna inte är beroende av varandra. Använd Promise.all() för att invänta flera oberoende uppgifter parallellt.
// 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 för felhantering
Omslut await-anrop i try/catch för att hantera avvisningar. Catch-blocket tar emot orsaken till avvisningen som ett felobjekt.
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
}
}await på toppnivå
I ES-moduler (inte CommonJS) kan await användas på toppnivå utan att omslutas av en async-funktion. Användbart vid initiering av moduler.
// module.js (ES module)
const config = await fetch('/config.json').then(r => r.json());
export const API_URL = config.apiUrl;async/await med forEach – fallgrop
Array.forEach() inväntar inte asynkrona callbacks. Använd for...of för sekventiell asynkron iteration eller Promise.all(arr.map(...)) för parallell körning.
// 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)));Felobjekt och anpassade fel
Kasta alltid Error-objekt (inte strängar) så att stack traces bevaras. Skapa anpassade felklasser för domänspecifika fel som anropare kan fånga baserat på typ.
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 i async/await
finally-blocket körs oavsett om try-blocket lyckades eller misslyckades – precis som .finally() på en Promise. Använd det för att frigöra resurser eller dölja laddningstillstånd.
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
}
}Asynkron IIFE för modulens startpunkt
Omslut startpunkten i ett skript i en async IIFE när top-level await inte kan användas.
(async () => {
const data = await fetchInitialData();
renderApp(data);
})();AbortController för avbrytning
Skicka en signal från AbortController till fetch för att avbryta en pågående begäran. Genom att fånga AbortError separat undviker man att visa ett fel för användaren.
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();Snabbtest
Vilken konstruktion hanterar fel från en inväntad Promise på rätt sätt?
Sammanfattning: async/await
async-funktioner returnerar alltid Promises. await pausar tills en Promise har avgjorts. Använd try/catch för felhantering. Använd Promise.all() för parallella operationer. Undvik await inuti forEach – använd for...of eller Promise.all. AbortController avbryter pågående begäranden. Top-level await fungerar i ES-moduler.
Lär dig HTML med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 41
- Lektioner
- 163
Vanliga frågor
Är lektionen ”async/await och felhantering” gratis?
Ja – hela texten till ”async/await och felhantering” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Frontend Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i Frontend Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”async/await och felhantering”?
Skriv async-funktioner med nyckelordet await, omslut väntade anrop med try/catch-block och förstå hur async/await är syntaktiskt socker ovanpå Promises. Ni övar på Frontend Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig Frontend Academy?
Du behöver inga förkunskaper. Utbildningen i Frontend Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 4 av 4.
Hur lång tid tar lektionen ”async/await och felhantering”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här Frontend Academy-lektionen?
Ja. Varje Frontend Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Event Loop: Call Stack Queue Microtasks
- Callbacks och callback hell
- Promises: then catch finally Promise.all
- async/await och felhantering