Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Oppiskele Async/Await’n Käyttö Selkeämmässä Asynkronisessa Koodissa | Asynkroninen JavaScript ja API-integraatio
Edistynyt JavaScript-Osaaminen

bookAsync/Await’n Käyttö Selkeämmässä Asynkronisessa Koodissa

async/await-syntaksi on moderni ja luettavampi tapa käsitellä promise-olioita JavaScriptissä. Sen avulla kehittäjät voivat kirjoittaa asynkronista koodia, joka näyttää ja toimii kuin synkroninen koodi. Sen sijaan, että ketjutetaan then()-kutsuja, voidaan käyttää await-avainsanaa pysäyttämään async-funktion suoritus, kunnes promise on ratkaistu.

Miten async-funktiot toimivat

async-funktio on funktio, joka on määritelty async-avainsanalla. Se palauttaa oletuksena Promise-olion, ja sen sisällä voidaan käyttää await-avainsanaa suorittamisen pysäyttämiseksi, kunnes promise on ratkaistu.

index.html

index.html

index.js

index.js

copy

fetchData-funktio on määritelty async-avainsanalla, mikä mahdollistaa await-rakenteen käytön suorituspolun pysäyttämiseksi, kunnes lupaus (promise) täyttyy. Tässä esimerkissä simuloitu kahden sekunnin viive jäljittelee datan hakemista. Kun lupaus täyttyy, tulos ("Data fetched successfully!") näytetään HTML-kappaleessa.

Lupausten ketjujen yksinkertaistaminen Async/Awaitilla

Kun käsitellään useita peräkkäisiä asynkronisia operaatioita, async/await voi yksinkertaistaa koodia, joka muuten vaatisi lupausten ketjutusta then()-menetelmällä.

Tarkastellaan, kuinka lupaussarjat (esimerkiksi datan haku ja käsittely) voidaan toteuttaa selkeämmin käyttämällä async/await-rakennetta.

index.html

index.html

index.js

index.js

copy

processData-funktio kutsuu kolmea asynkronista funktiota—fetchData, processFetchedData ja displayProcessedData—peräkkäin, jokainen odottaen (await), että edellinen operaatio valmistuu ennen seuraavaan siirtymistä. Tämä jäsennelty eteneminen poistaa tarpeen lupa-ketjutukselle ja parantaa luettavuutta. Lopullinen tulos ("Raw Data processed and displayed on the page") näytetään sitten HTML-sivulla.

Virheenkäsittely try...catch-rakenteella Async/Awaitin kanssa

Virheiden käsittely lupa-ketjuissa .catch()-menetelmällä voi muuttua hankalaksi, erityisesti useiden asynkronisten operaatioiden yhteydessä. async/await-rakenteen avulla virheet voidaan käsitellä perinteisellä try...catch-loholla, mikä tekee virheenkäsittelystä intuitiivisempaa ja luettavampaa.

index.html

index.html

index.js

index.js

copy

Funktiossa fetchDataWithError suoritetaan try-operaatio await-lohkon sisällä, ja jos se onnistuu, tulos näytetään HTML:ssä. Jos virhe tapahtuu (kuten simulateError simuloi), catch-lohko käsittelee sen asettamalla kappaleen tekstiksi virheilmoituksen ("Error: Something went wrong!").

1. Mitä async-avainsana tekee, kun se lisätään funktioon?

2. Mikä on await-avainsanan tarkoitus?

3. Mikä seuraavista on async/await-rakenteen etu verrattuna .then()-ketjutukseen?

question mark

Mitä async-avainsana tekee, kun se lisätään funktioon?

Select the correct answer

question mark

Mikä on await-avainsanan tarkoitus?

Select the correct answer

question mark

Mikä seuraavista on async/await-rakenteen etu verrattuna .then()-ketjutukseen?

Select the correct answer

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 4. Luku 4

Kysy tekoälyä

expand

Kysy tekoälyä

ChatGPT

Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme

Suggested prompts:

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.22

bookAsync/Await’n Käyttö Selkeämmässä Asynkronisessa Koodissa

Pyyhkäise näyttääksesi valikon

async/await-syntaksi on moderni ja luettavampi tapa käsitellä promise-olioita JavaScriptissä. Sen avulla kehittäjät voivat kirjoittaa asynkronista koodia, joka näyttää ja toimii kuin synkroninen koodi. Sen sijaan, että ketjutetaan then()-kutsuja, voidaan käyttää await-avainsanaa pysäyttämään async-funktion suoritus, kunnes promise on ratkaistu.

Miten async-funktiot toimivat

async-funktio on funktio, joka on määritelty async-avainsanalla. Se palauttaa oletuksena Promise-olion, ja sen sisällä voidaan käyttää await-avainsanaa suorittamisen pysäyttämiseksi, kunnes promise on ratkaistu.

index.html

index.html

index.js

index.js

copy

fetchData-funktio on määritelty async-avainsanalla, mikä mahdollistaa await-rakenteen käytön suorituspolun pysäyttämiseksi, kunnes lupaus (promise) täyttyy. Tässä esimerkissä simuloitu kahden sekunnin viive jäljittelee datan hakemista. Kun lupaus täyttyy, tulos ("Data fetched successfully!") näytetään HTML-kappaleessa.

Lupausten ketjujen yksinkertaistaminen Async/Awaitilla

Kun käsitellään useita peräkkäisiä asynkronisia operaatioita, async/await voi yksinkertaistaa koodia, joka muuten vaatisi lupausten ketjutusta then()-menetelmällä.

Tarkastellaan, kuinka lupaussarjat (esimerkiksi datan haku ja käsittely) voidaan toteuttaa selkeämmin käyttämällä async/await-rakennetta.

index.html

index.html

index.js

index.js

copy

processData-funktio kutsuu kolmea asynkronista funktiota—fetchData, processFetchedData ja displayProcessedData—peräkkäin, jokainen odottaen (await), että edellinen operaatio valmistuu ennen seuraavaan siirtymistä. Tämä jäsennelty eteneminen poistaa tarpeen lupa-ketjutukselle ja parantaa luettavuutta. Lopullinen tulos ("Raw Data processed and displayed on the page") näytetään sitten HTML-sivulla.

Virheenkäsittely try...catch-rakenteella Async/Awaitin kanssa

Virheiden käsittely lupa-ketjuissa .catch()-menetelmällä voi muuttua hankalaksi, erityisesti useiden asynkronisten operaatioiden yhteydessä. async/await-rakenteen avulla virheet voidaan käsitellä perinteisellä try...catch-loholla, mikä tekee virheenkäsittelystä intuitiivisempaa ja luettavampaa.

index.html

index.html

index.js

index.js

copy

Funktiossa fetchDataWithError suoritetaan try-operaatio await-lohkon sisällä, ja jos se onnistuu, tulos näytetään HTML:ssä. Jos virhe tapahtuu (kuten simulateError simuloi), catch-lohko käsittelee sen asettamalla kappaleen tekstiksi virheilmoituksen ("Error: Something went wrong!").

1. Mitä async-avainsana tekee, kun se lisätään funktioon?

2. Mikä on await-avainsanan tarkoitus?

3. Mikä seuraavista on async/await-rakenteen etu verrattuna .then()-ketjutukseen?

question mark

Mitä async-avainsana tekee, kun se lisätään funktioon?

Select the correct answer

question mark

Mikä on await-avainsanan tarkoitus?

Select the correct answer

question mark

Mikä seuraavista on async/await-rakenteen etu verrattuna .then()-ketjutukseen?

Select the correct answer

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 4. Luku 4
some-alt