Async/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.

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.

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.

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!").