Bruk av Async/Await for Mer Oversiktlig Asynkron Kode
async/await-syntaksen er en moderne og mer lesbar måte å arbeide med promises i JavaScript. Den gjør det mulig for utviklere å skrive asynkron kode som ser ut og oppfører seg som synkron kode. I stedet for å lenke then()-kall, kan du bruke await for å pause utførelsen av en async-funksjon til en promise er løst.
Hvordan async-funksjoner fungerer
En async-funksjon er en funksjon deklarert med nøkkelordet async. Den returnerer en Promise som standard, og du kan bruke nøkkelordet await inni funksjonen for å pause utførelsen til promisen er løst.
index.html
index.js
Funksjonen fetchData er deklarert som async, noe som gjør det mulig å bruke await for å pause utførelsen til et løfte er oppfylt. Her simuleres en forsinkelse på 2 sekunder for å etterligne en datahentingsoperasjon. Når løftet er oppfylt, vises resultatet ("Data fetched successfully!") i HTML-avsnittet.
Forenkling av løftekjeder med Async/Await
Ved arbeid med flere asynkrone operasjoner i rekkefølge, kan bruk av async/await forenkle kode som ellers ville involvert løftekjeder med then().
Her vises hvordan en serie løfter (som å hente og behandle data) kan håndteres mer oversiktlig med async/await.
index.html
index.js
Funksjonen processData kaller tre asynkrone funksjoner—fetchData, processFetchedData og displayProcessedData—etter hverandre, hvor hver venter (await) på at forrige operasjon skal fullføres før den går videre til neste. Denne strukturerte flyten eliminerer behovet for å kjede løfter (promises), noe som forbedrer lesbarheten. Den endelige utdataen ("Raw Data processed and displayed on the page") vises deretter i HTML-en.
Feilhåndtering med try...catch i Async/Await
Å håndtere feil i løftekjeder med .catch() kan bli tungvint, spesielt når man arbeider med flere asynkrone operasjoner. Med async/await kan du håndtere feil ved å bruke den tradisjonelle try...catch-blokken, noe som gjør feilhåndteringen mer intuitiv og lesbar.
index.html
index.js
I fetchDataWithError kjøres try-blokken med await-operasjonen, og hvis den lykkes, vises resultatet i HTML-en. Hvis det oppstår en feil (som simulert av simulateError), håndterer catch-blokken dette ved å sette paragrafteksten til feilmeldingen ("Error: Something went wrong!").
1. Hva gjør async-nøkkelordet når det legges til en funksjon?
2. Hva er formålet med await-nøkkelordet?
3. Hvilket av følgende er en fordel med å bruke async/await fremfor .then()-kjeding?
Takk for tilbakemeldingene dine!
Spør AI
Spør AI
Spør om hva du vil, eller prøv ett av de foreslåtte spørsmålene for å starte chatten vår
Can you show an example of how to use async/await in a real-world scenario?
How does async/await compare to using plain promises with then() and catch()?
Can you explain how error handling works with async/await in more detail?
Awesome!
Completion rate improved to 2.22Bruk av Async/Await for Mer Oversiktlig Asynkron Kode
Sveip for å vise menyen
async/await-syntaksen er en moderne og mer lesbar måte å arbeide med promises i JavaScript. Den gjør det mulig for utviklere å skrive asynkron kode som ser ut og oppfører seg som synkron kode. I stedet for å lenke then()-kall, kan du bruke await for å pause utførelsen av en async-funksjon til en promise er løst.
Hvordan async-funksjoner fungerer
En async-funksjon er en funksjon deklarert med nøkkelordet async. Den returnerer en Promise som standard, og du kan bruke nøkkelordet await inni funksjonen for å pause utførelsen til promisen er løst.
index.html
index.js
Funksjonen fetchData er deklarert som async, noe som gjør det mulig å bruke await for å pause utførelsen til et løfte er oppfylt. Her simuleres en forsinkelse på 2 sekunder for å etterligne en datahentingsoperasjon. Når løftet er oppfylt, vises resultatet ("Data fetched successfully!") i HTML-avsnittet.
Forenkling av løftekjeder med Async/Await
Ved arbeid med flere asynkrone operasjoner i rekkefølge, kan bruk av async/await forenkle kode som ellers ville involvert løftekjeder med then().
Her vises hvordan en serie løfter (som å hente og behandle data) kan håndteres mer oversiktlig med async/await.
index.html
index.js
Funksjonen processData kaller tre asynkrone funksjoner—fetchData, processFetchedData og displayProcessedData—etter hverandre, hvor hver venter (await) på at forrige operasjon skal fullføres før den går videre til neste. Denne strukturerte flyten eliminerer behovet for å kjede løfter (promises), noe som forbedrer lesbarheten. Den endelige utdataen ("Raw Data processed and displayed on the page") vises deretter i HTML-en.
Feilhåndtering med try...catch i Async/Await
Å håndtere feil i løftekjeder med .catch() kan bli tungvint, spesielt når man arbeider med flere asynkrone operasjoner. Med async/await kan du håndtere feil ved å bruke den tradisjonelle try...catch-blokken, noe som gjør feilhåndteringen mer intuitiv og lesbar.
index.html
index.js
I fetchDataWithError kjøres try-blokken med await-operasjonen, og hvis den lykkes, vises resultatet i HTML-en. Hvis det oppstår en feil (som simulert av simulateError), håndterer catch-blokken dette ved å sette paragrafteksten til feilmeldingen ("Error: Something went wrong!").
1. Hva gjør async-nøkkelordet når det legges til en funksjon?
2. Hva er formålet med await-nøkkelordet?
3. Hvilket av følgende er en fordel med å bruke async/await fremfor .then()-kjeding?
Takk for tilbakemeldingene dine!
