Brug af Async/Await for Mere Overskuelig Asynkron Kode
async/await-syntaksen er en moderne og mere læsbar metode til at arbejde med promises i JavaScript. Den gør det muligt for udviklere at skrive asynkron kode, der ligner og opfører sig som synkron kode. I stedet for at kæde then()-kald sammen, kan du bruge await til at standse udførelsen af en async-funktion, indtil et promise er opfyldt.
Sådan fungerer async-funktioner
En async-funktion er en funktion, der er erklæret med nøgleordet async. Den returnerer som standard et Promise, og du kan bruge nøgleordet await i funktionen til at standse udførelsen, indtil promiset er opfyldt.
index.html
index.js
Funktionen fetchData er erklæret som async, hvilket gør det muligt at bruge await til at pause eksekveringen, indtil et promise er opfyldt. Her simulerer en forsinkelse på 2 sekunder en datahentningsoperation. Når promise er opfyldt, vises resultatet ("Data fetched successfully!") i HTML-afsnittet.
Forenkling af Promise-kæder med Async/Await
Ved arbejde med flere asynkrone operationer i rækkefølge kan brugen af async/await forenkle kode, der ellers ville involvere promise-kæder med then().
Lad os se, hvordan en række promises (som at hente og behandle data) kan håndteres mere overskueligt med async/await.
index.html
index.js
Funktionen processData kalder tre asynkrone funktioner—fetchData, processFetchedData og displayProcessedData—efter hinanden, hvor hver venter (await) på, at den forrige operation er fuldført, før den fortsætter til den næste. Denne strukturerede arbejdsgang eliminerer behovet for at kæde promises sammen, hvilket forbedrer læsbarheden. Den endelige output ("Raw Data processed and displayed on the page") vises derefter i HTML'en.
Fejlhåndtering med try...catch i Async/Await
Håndtering af fejl i promise-kæder med .catch() kan blive besværligt, især når der arbejdes med flere asynkrone operationer. Med async/await kan fejl håndteres ved hjælp af det traditionelle try...catch-blok, hvilket gør fejlhåndteringen mere intuitiv og læsbar.
index.html
index.js
I fetchDataWithError udfører try-blokken await-operationen, og hvis den lykkes, vises resultatet i HTML'en. Hvis der opstår en fejl (som simuleret af simulateError), håndterer catch-blokken dette ved at sætte paragrafteksten til fejlmeddelelsen ("Error: Something went wrong!").
1. Hvad gør async-nøgleordet, når det tilføjes til en funktion?
2. Hvad er formålet med await-nøgleordet?
3. Hvilket af følgende er en fordel ved at bruge async/await frem for .then()-kædning?
Tak for dine kommentarer!
Spørg AI
Spørg AI
Spørg om hvad som helst eller prøv et af de foreslåede spørgsmål for at starte vores chat
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.22Brug af Async/Await for Mere Overskuelig Asynkron Kode
Stryg for at vise menuen
async/await-syntaksen er en moderne og mere læsbar metode til at arbejde med promises i JavaScript. Den gør det muligt for udviklere at skrive asynkron kode, der ligner og opfører sig som synkron kode. I stedet for at kæde then()-kald sammen, kan du bruge await til at standse udførelsen af en async-funktion, indtil et promise er opfyldt.
Sådan fungerer async-funktioner
En async-funktion er en funktion, der er erklæret med nøgleordet async. Den returnerer som standard et Promise, og du kan bruge nøgleordet await i funktionen til at standse udførelsen, indtil promiset er opfyldt.
index.html
index.js
Funktionen fetchData er erklæret som async, hvilket gør det muligt at bruge await til at pause eksekveringen, indtil et promise er opfyldt. Her simulerer en forsinkelse på 2 sekunder en datahentningsoperation. Når promise er opfyldt, vises resultatet ("Data fetched successfully!") i HTML-afsnittet.
Forenkling af Promise-kæder med Async/Await
Ved arbejde med flere asynkrone operationer i rækkefølge kan brugen af async/await forenkle kode, der ellers ville involvere promise-kæder med then().
Lad os se, hvordan en række promises (som at hente og behandle data) kan håndteres mere overskueligt med async/await.
index.html
index.js
Funktionen processData kalder tre asynkrone funktioner—fetchData, processFetchedData og displayProcessedData—efter hinanden, hvor hver venter (await) på, at den forrige operation er fuldført, før den fortsætter til den næste. Denne strukturerede arbejdsgang eliminerer behovet for at kæde promises sammen, hvilket forbedrer læsbarheden. Den endelige output ("Raw Data processed and displayed on the page") vises derefter i HTML'en.
Fejlhåndtering med try...catch i Async/Await
Håndtering af fejl i promise-kæder med .catch() kan blive besværligt, især når der arbejdes med flere asynkrone operationer. Med async/await kan fejl håndteres ved hjælp af det traditionelle try...catch-blok, hvilket gør fejlhåndteringen mere intuitiv og læsbar.
index.html
index.js
I fetchDataWithError udfører try-blokken await-operationen, og hvis den lykkes, vises resultatet i HTML'en. Hvis der opstår en fejl (som simuleret af simulateError), håndterer catch-blokken dette ved at sætte paragrafteksten til fejlmeddelelsen ("Error: Something went wrong!").
1. Hvad gør async-nøgleordet, når det tilføjes til en funktion?
2. Hvad er formålet med await-nøgleordet?
3. Hvilket af følgende er en fordel ved at bruge async/await frem for .then()-kædning?
Tak for dine kommentarer!
