Async await i JavaScript: enkel guide til forståelig og vedlikeholdbar asynkron kode

Asynkron kode i JavaScript kan føles forvirrende helt til du får et klart mentalt bilde av hva som skjer. Da blir både feilsøking og videre utvikling mye enklere.

I denne artikkelen får du en praktisk innføring iasync/await: hva det er, hvordan det henger sammen med Promise, og hvordan du kan bruke det til å skrive kode som er lettere å lese og vedlikeholde i hverdagen.

Hva er asynkron kode, egentlig?

Når JavaScript gjør noe som tar tid, for eksempel å hente data fra et API, vil vi som regel ikke stoppe hele programmet og vente. Asynkron kode lar resten av siden fortsette å fungere mens vi venter på svaret.

Tradisjonelt ble dette håndtert med callbacks, der du sendte inn en funksjon som skulle kjøres når noe var ferdig. Etter hvert kom Promise, som gjorde dette mer strukturert.Async/await er et lag oppå Promisesom lar deg skrive asynkron kode med en mer “synkron” skrivestil.

Hvordan henger async/await sammen med Promise?

To viktige ting å ha i bakhodet:

• Async-funksjoner returnerer alltid et Promise, uansett om du selv returnerer et vanlig tall, en streng eller et objekt.
• Await kan bare brukes inni en async-funksjon, og venter på at et Promise skal fullføres før koden går videre.

Det betyr at async/await ikke erstatter Promise, men er en mer lesbar måte å håndtere dem på. Under panseret er det fortsatt Promise som gjør jobben.

Et konkret eksempel: hente data fra et API

La oss si at du har et enkelt API-endepunkt som returnerer en liste med artikler i JSON-format. Med Promise-kjeder kunne det se slik ut:

Eksempel med Promise:

fetch('/api/articles')
.then(response => response.json())
.then(data => {
console.log('Antall artikler:', data.length);
})
.catch(error => {
console.error('Noe gikk galt', error);
});

Med async/await kan du skrive det på en måte som ofte er lettere å lese:

Eksempel med async/await:

async function loadArticles() {
try {
const response = await fetch('/api/articles');
const data = await response.json();
console.log('Antall artikler:', data.length);
} catch (error) {
console.error('Noe gikk galt', error);
}
}

loadArticles();

Vanlige feil når du starter med async/await

Det er noen klassiske feller som går igjen, spesielt for deg som er ny til konseptet. Her er de viktigste å se opp for, med korte eksempler.

1. Glemme å bruke await

Hvis du glemmer await foran en funksjon som returnerer et Promise, får du et Promise-objekt i stedet for selve resultatet.

async function example() {
const data = fetch('/api/articles'); // mangler await
console.log(data); // logger et Promise, ikke JSON-data
}

2. Bruke await inni Array.map uten å håndtere det riktig

Array-metoder sommapogforEachventer ikke automatisk på async-funksjoner. Dette gir ofte overraskelser.

async function processIds(ids) {
const results = ids.map(async (id) => {
const res = await fetch(`/api/item/${id}`);
return res.json();
});

console.log(results); // en liste med Promise, ikke data
}

En tryggere løsning er å brukePromise.allsammen med async/await:

async function processIds(ids) {
const promises = ids.map(async (id) => {
const res = await fetch(`/api/item/${id}`);
return res.json();
});

const results = await Promise.all(promises);
console.log(results); // nå har du faktisk data
}

Seriell vs parallell venting: stor forskjell i ytelse

Et viktig poeng med async/await er at det er lett å vente “for mye” i serie. Tenk deg at du skal hente tre uavhengige ressurser fra serveren.

Seriell venting:

async function loadAll() {
const a = await fetch('/api/a');
const b = await fetch('/api/b');
const c = await fetch('/api/c');
}

Her starter ikke B før A er ferdig, og C starter ikke før B er ferdig. Ofte går dette helt fint, men hvis de kallene er uavhengige, kan du gjøre det mer effektivt ved å starte alle samtidig.

Parallell venting:

async function loadAll() {
const promiseA = fetch('/api/a');
const promiseB = fetch('/api/b');
const promiseC = fetch('/api/c');

const [a, b, c] = await Promise.all([promiseA, promiseB, promiseC]);
}

Da utnytter du nettverket bedre, uten å gjøre koden veldig mye mer kompleks.

Feilhåndtering som ikke skjuler problemer

Med async/await bruker du som regeltry/catchfor å fange feil. En vanlig feil er å fange alt og så bare logge det, uten å la funksjonen signalisere at noe gikk galt.

async function loadUser() {
try {
const res = await fetch('/api/user');
return await res.json();
} catch (error) {
console.error('Feil:', error);
// funksjonen returnerer nå undefined ved feil
}
}

Det kan gjøre feilsøking vanskelig, fordi resten av koden later som alt er OK. Et bedre mønster er å enten kaste feilen videre, eller returnere en tydelig struktur som forteller at noe gikk galt.

Eksempel med rethrow:

async function loadUser() {
try {
const res = await fetch('/api/user');
if (!res.ok) {
throw new Error('HTTP-feil: ' + res.status);
}
return await res.json();
} catch (error) {
console.error('Feil ved lasting av bruker', error);
throw error; // la den som kaller bestemme hva som skjer
}
}

Hvordan tenke om async/await i hverdagskode

For små og mellomstore webprosjekter er async/await ofte det enkleste og mest lesbare valget. Noen enkle tommelfingerregler kan hjelpe deg å ta gode valg:

• Brukasync/await for forretningslogikkog dataflyt, der struktur og lesbarhet er viktig.
• BrukPromise.allnår du har flere uavhengige asynkrone operasjoner som kan kjøre samtidig.
• Håndterfeil nær brukerenmed gode tilbakemeldinger, og la dypere funksjoner kaste feilen videre.

Hvis du holder deg til disse prinsippene, får du kode som er enklere å lese for både deg selv og kollegaer, og det blir lettere å utvide funksjonaliteten senere uten at alt føles skjørt.

Kort oppsummert: det viktigste med async/await

Async/await gjør ikke JavaScript magisk raskere, men det gjør det ofte mye enklere å se hva koden din faktisk gjør. Du får en naturlig top-down flyt, som ligner mer på vanlig synkron kode.

Når du husker at async-funksjoner alltid returnerer Promise, at await bare fungerer inne i async-funksjoner, og at du bør være bevisst på seriell vs parallell venting, har du allerede løst de mest vanlige problemene knyttet til asynkron JavaScript.

Derfra handler det mest om å øve: start med ett API-kall i et lite prosjekt, refaktorer en gammel Promise-kjede til async/await, og bygg gradvis opp en intuisjon for hvordan datflyten din fungerer.