Async await i JavaScript: enkel guide til mer lesbar asynkron kode

Asynkron kode er en naturlig del av moderne webutvikling: vi henter data fra API-er, lagrer til lokal lagring, venter på animasjoner og mye mer. Hvordan du håndterer denne asynkroniteten har stor betydning for hvor forståelig og vedlikeholdbar koden blir.

I denne artikkelen får du en jordnær innføring iasync/awaiti JavaScript. Målet er at du skal forstå hva som skjer, hvordan det henger sammen med Promises, og hvordan du kan skrive renere kode uten å havne i callback-kaos.

Hvorfor asynkront i det hele tatt?

Nettleseren skal gjøre mange ting samtidig: tegne grensesnittet, reagere på klikk, kjøre JavaScript og snakke med servere. Hvis en oppgave tar tid, vil vi ikke at hele siden skal fryse mens vi venter.

Derfor er mange ting i JavaScript asynkrone, typisk:

• API-kall medfetch()
• Timeouts og intervaller medsetTimeoutogsetInterval
• Noen typer fil- og lagringsoperasjoner i nettleseren

Asynkronitet løser et problem, men skaper et nytt: koden din kjører ikke nødvendigvis i den rekkefølgen du skriver den. Derfor trenger vi et tydelig mønster for å håndtere det.

Fra callbacks til Promises til async/await

I starten ble alt asynkront ofte håndtert medcallbacks: du sendte inn en funksjon som skulle kjøre når noe var ferdig. Det fungerte, men førte ofte til «callback hell» med dype, vanskelig lesbare strukturer.

Så komPromises. De gjorde det enklere å kjede asynkrone operasjoner med.then()og.catch(), men mange opplevde fortsatt at koden ble hakkete og full av nestede funksjoner.

Async/awaitbygger videre på Promises, men gir deg et språk for å skrive asynkron kode som ser mer ut som vanlig, sekvensiell kode. Under panseret er det fortsatt Promises, så forståelsen av dem er fortsatt nyttig.

Hva betyr async og hva gjør await?

To nøkkelord styrer det hele:

• asyncforan en funksjon gjør at funksjonen alltid returnerer et Promise.
• awaitkan bare brukes inni en async-funksjon, og får JavaScript til å «vente» på et Promise uten å blokkere resten av programmet.

Et enkelt eksempel:

Utenasync/await:

fetch('/api/data')
.then(response => response.json())
.then(data => {
console.log('Data:', data);
})
.catch(error => {
console.error('Feil:', error);
});

Medasync/await:

async function hentData() {
try {
const response = await fetch('/api/data');
const data = await response.json();
console.log('Data:', data);
} catch (error) {
console.error('Feil:', error);
}
}

Slik skriver du en enkel async-funksjon

En typisk oppskrift for en async-funksjon som henter data og returnerer resultatet:

async function hentBruker(id) {
const response = await fetch(`/api/users/${id}`);
if (!response.ok) {
throw new Error('Kunne ikke hente bruker');
}
const data = await response.json();
return data;
}

Når du kaller denne funksjonen, får du et Promise tilbake:

hentBruker(1)
.then(bruker => {
console.log(bruker.name);
})
.catch(console.error);

Hvis du er inne i en annen async-funksjon, kan du også skrive:

async function visBruker() {
try {
const bruker = await hentBruker(1);
console.log(bruker.name);
} catch (error) {
console.error(error);
}
}

Feilhåndtering med try/catch

En stor fordel med async/await er at du kan bruketry/catchakkurat som i synkron kode. Det gjør flyten enklere å følge enn lange kjeder med.then().catch().

Noen praktiske tips:

• Vær bevisst på hva som kan kaste feil, bådeawait fetch()og f.eks.JSON.parse().
• Gi feilene nyttige meldinger, særlig hvis du skal logge dem senere.
• Bruk gjerne en egen funksjon til å vise feilmeldinger i UI, så gjenbruker du logikken.

Eksempel med litt mer logikk:

async function lastInnProdukter() {
try {
visLaster();
const response = await fetch('/api/products');

if (!response.ok) {
throw new Error('Server svarte med feilstatus');
}

const produkter = await response.json();
visProdukter(produkter);
} catch (error) {
visFeil('Kunne ikke laste produkter. Prøv igjen senere.');
console.error(error);
} finally {
skjulLaster();
}
}

Vanlige feil og hvordan du unngår dem

Async/await ser enkelt ut, men noen snubletråder går igjen.

1. Glemme å merke funksjonen med async

Hvis du brukerawaitutenfor en async-funksjon, får du en syntaksfeil. Løsningen er rett og slett å legge tilasyncforan funksjonsdeklarasjonen.

Hvis du trenger async/await på toppnivå i nettleseren, kan du ofte pakke koden i en umiddelbart kjørt funksjon:

(async function () {
const data = await fetch('/api/data');
// ...
})();

2. Glemme å håndtere feil i async-funksjoner

Hvis en async-funksjon kaster en feil, vil den bli til et avvist Promise. Hvis ingen håndterer det, kan du få «Uncaught (in promise)»-feil i konsollen.

Tommelregel: hver «ytterste» async-funksjon som starter en kjede bør hatry/catch, eller Promise-kallet bør avsluttes med.catch().

3. Kjøre uavhengige ting sekvensielt i stedet for parallelt

Async/await gjør det lett å skrive alt som om det skjer etter hverandre. Det er fint for lesbarhet, men noen ganger unødvendig tregt.

Sammenlign disse to:

Sekvensielt:

const bruker = await hentBruker();
const ordre = await hentOrdre();

Parallelt med Promise.all:

const [bruker, ordre] = await Promise.all([
hentBruker(),
hentOrdre()
]);

I det andre tilfellet kan begge kallene pågå samtidig, noe som ofte er å foretrekke når de ikke er avhengige av hverandre.

Når bør du bruke async/await, og når bør du la være?

I de fleste moderne JavaScript-prosjekter lønner det seg å bruke async/await som standard for asynkrone operasjoner. Det gir som regel:

• Mer lesbar kode, særlig når flere steg avhenger av hverandre
• Enklere feilhåndtering med try/catch
• Mindre behov for nestede funksjoner

Noen ganger kan vanlig Promise-syntaks med.then()fortsatt være passende, for eksempel når du jobber med mange små uavhengige kjeder, eller når du kombinerer med eksisterende bibliotek som bygger på Promise-metoder.

Det viktigste er at du forstår at async/await er et lag oppå Promises, ikke noe helt annet. Da kan du velge det mønsteret som gjør koden din mest lesbar for deg og teamet ditt.

En enkel mental modell å ta med videre

For å oppsummere, kan du bruke denne enkle modellen når du ser asynkron kode i JavaScript:

• Alt som er merketasyncreturnerer et Promise.
• awaitventer på et Promise, uten at resten av programmet stopper.
• try/catchrundt await gir deg feilhåndtering på en måte som ligner på vanlig, synkron kode.

Hvis du hele tiden husker at det du «venter på» egentlig er et Promise, blir det lettere å kombinere async/await med andre pattern og biblioteker. Start med enkle funksjoner, legg til try/catch tidlig, og test ofte i konsollen mens du jobber.