Opi luomaan asynkronisia ohjelmia JavaScriptillä

Asynkroninen ohjelmointi on ohjelmistokehityksen peruselementti. On vaikea uskoa, että tämä ohjelmointikonsepti on ollut olemassa vasta 2000-luvulta lähtien. F#-ohjelmointikieli esitteli ensimmäisenä asynkronisen ohjelmoinnin vuonna 2007.

Muut kielet, kuten C#, Python, JavaScript ja C++, lisäsivät vähitellen tukea asynkroniselle ohjelmointille. Suuri kysymys on, mitä arvoa asynkroninen ohjelmointi lisää sovelluksillesi?

Tämä artikkeli vastaa tähän ja muihin kysymyksiin, joten saat selville kaiken asynkronisen ohjelmoinnin käyttämisestä.

Mitä on synkroninen ohjelmointi?

Synkronisella ohjelmoinnilla tarkoitetaan ohjelmaa sen perusmuodossa. Tämä ohjelmointimalli käsittelee ohjelman tai komentosarjan koodirivit peräkkäin. Se alkaa aina ohjelman ensimmäiseltä koodiriviltä. Sitten se odottaa, kunnes jokainen koodirivi on suorittanut suorituksensa, ennen kuin siirtyy seuraavaan.

Synkroninen malli sisältää myös ehdollisen koodin, kuten jos ja sillä aikaa lausunnot. Vaikka vain osa ehdollisen käskyn koodista suoritetaan, ohjelma suoritetaan silti peräkkäin.

Esimerkki synkronisesta ohjelmasta

const SyncCode = () => {
 console.log("Tämä on ohjelman ensimmäinen rivi")
 console.log("Tämä on ohjelman toinen rivi")
 console.log("Tämä on ohjelman viimeinen rivi")
}
SyncCode();

Yllä olevan JavaScript-ohjelman suorittaminen tuottaa seuraavan tulosteen konsolissa:

Tämä on ohjelman ensimmäinen rivi
Tämä on ohjelman toinen rivi
Tämä on ohjelman viimeinen rivi

Yllä oleva tulos on juuri sitä mitä sinun pitäisi odottaa. Ohjelma alkaa ylhäältä ja odottaa, kunnes yksi koodirivi päättyy ennen siirtymistä seuraavaan.

Mitä on asynkroninen ohjelmointi?

Asynkroninen ohjelmointi on synkronisen ohjelmoinnin vastakohta. Asynkroninen ohjelmointimalli käsittelee useita koodirivejä samanaikaisesti. Se ei odota, kunnes ohjelman edellinen koodirivi on suorittanut suorituksensa ennen siirtymistään seuraavaan.

Aiheeseen liittyvä: Synkroninen vs. Asynkroninen ohjelmointi: miten ne eroavat toisistaan?

Asynkroninen ohjelmointi voi puolittaa suoritusajan ja luoda tehokkaampia tietokoneita.

Esimerkki asynkronisesta ohjelmasta

const AsyncCode = () => {
 console.log("Tämä on ohjelman ensimmäinen rivi")
 setTimeout(() => {
 console.log("Tämä on ohjelman toinen rivi")
 }, 3000)
 console.log("Tämä on ohjelman viimeinen rivi")
}
AsyncCode();

Yllä olevan JavaScript-koodin suorittaminen tuottaa seuraavan tulosteen konsoliisi:

Tämä on ohjelman ensimmäinen rivi
Tämä on ohjelman viimeinen rivi
Tämä on ohjelman toinen rivi

Jos vertaat yllä olevaa konsolin tulosta sen luovaan asynkroniseen ohjelmaan, huomaat, että siinä on ilmeinen ero. Kutsu Hirsi teksti "Tämä on ohjelman toinen rivi" esiintyy ennen riviä, joka sanoo "Tämä on ohjelman viimeinen rivi". Konsolin tulos ei kuitenkaan heijasta tätä.

Koska JavaScript on ensisijaisesti synkroninen, yllä olevan ohjelman koodi suoritettiin peräkkäin. Mutta JavaScript tukee asynkronista ohjelmointia ominaisuuksien, kuten setTimeout() menetelmä.

The setTimeout() -menetelmä on asynkroninen JavaScript-menetelmä, joka ottaa kaksi argumenttia: funktion ja viiveen. Viive on ajastin (millisekunteina), joka viivyttää toiminnon suorittamista. Joten kun yllä oleva ohjelma odottaa kolmea sekuntia suorittaakseen toiminnon setTimeout() menetelmällä, se siirtyy koodin seuraavalle riville. Tämä johtaa kolmannen funktiokutsun suorittamiseen ennen toista.

Asynkroniset JavaScript-tekniikat

Paitsi setTimeout() edellä mainitulla menetelmällä useat JavaScript-tekniikat käyttävät asynkronista ohjelmointia. Nämä tekniikat käyttävät asynkronista ohjelmointimallia nopeampien ei-estävien sovellusten kehittämiseen. Jotkut näistä teknologioista sisältävät:

• jQuery Ajax
• Axios
• NodeJS

Aiheeseen liittyvä: Mikä Node.js on? Näin käytät palvelinpuolen JavaScriptiä

Asynkronisten ohjelmien luominen JavaScriptillä

On olemassa useita tapoja käsitellä asynkronista koodia. Valitsemasi menetelmän tulisi riippua sovelluksen tyypistä, jonka haluat kehittää. Näitä menetelmiä ovat takaisinsoittotoiminnot, lupaukset ja async/wait.

Takaisinsoittotoiminnot

Takaisinsoittotoiminnolla on kaksi tärkeää ominaisuutta. Ne toimivat parametreina muille toiminnoille, ja ne luottavat ulkoisiin tapahtumiin suorittaakseen tehtävänsä. The setTimeout() edellä olevassa asynkronisessa esimerkissä käytetty menetelmä on takaisinsoittotoiminto. Ohjelma välittää sille lokifunktion parametrina (takaisinsoittotoiminto) ja suorittaa sen vasta kolmen sekunnin kuluttua (tapahtuma).

Takaisinsoittotoiminnot ovat erinomaisia ​​pienille ohjelmille, mutta sovellustesi kasvaessa niistä voi tulla liian monimutkaisia ​​erittäin nopeasti. Tämä johtuu siitä, että takaisinsoittotoiminnot kutsuvat usein muita takaisinsoittotoimintoja ja luovat sisäkkäisten takaisinsoittojen ketjun.

Lupausten käyttäminen

JavaScript lisäsi tuen takaisinsoittotoimintojen lupauksille. Ne ovat hyvä vaihtoehto luotaessa suurempia sovelluksia. Lupaus edustaa sitä, mitä voi tapahtua asynkronisen toiminnan jälkeen. Tämä mahdollinen tulos voi olla jompikumpi seuraavista: ratkaistu tai hylätty. Erillinen toiminto käsittelee jokaista näistä tuloksista, mikä poistaa sisäkkäisyyden tarpeen (takaisinkutsutoiminto-ongelma). Sen sijaan lupaukset kannustavat ketjutoimintoihin, joita on helpompi käyttää.

Jokainen lupaus alkaa uudesta Lupaus objekti, jolla on anonyymi toiminto ratkaista ja hylätä parametrit. Tässä funktiossa sinulla on asynkroninen sovellus, joka palauttaa ratkaisun, jos asynkroninen toiminto onnistuu, tai hylkäämisen muuten.

The sitten() ketjutoiminto hoitaa ratkaista toiminto ja saada kiinni() ketjutoiminto hoitaa hylätä toiminto. Siten ei tarvita sisäkkäisiä if-lauseita, kuten takaisinsoittofunktioiden tapauksessa.

Promises-esimerkin käyttö

const PromiseFunction = () =>{
 return new Promise((ratkaise, hylkää) => {
 setTimeout(() => {
 ratkaista("tämä asynkroninen toiminto suoritettiin hyvin")
 }, 3000)
 })
}
PromiseFunction().then((tulos) => {
 console.log("Onnistuminen", tulos)
}).catch((virhe) => {
 console.log("Virhe", virhe)
})

Yllä oleva koodi palauttaa seuraavan tulosteen konsolissa:

Onnistui, että tämä asynkroninen toiminto suoritettiin hyvin

Tämä johtuu siitä, että lupaus palauttaa ratkaista funktio, joka välittää tulokset sitten() toiminto. Jos lupaus palauttaa hylätä toimintoa ohjelma käyttää saada kiinni toiminto sen sijaan.

Async/Await käyttö

Jos et halua luoda lupausketjua käsitellessään asynkronisia toimintoja, voit kokeilla async/await-toimintoa. Async/await ei ole täysin erilainen asynkroninen työkalu kuin lupaukset, vaan erilainen tapa käsitellä niitä. Se käsittelee lupaukset käyttämättä ketjumenetelmää. Eli aivan samalla tavalla kuin lupaukset käsittelevät asynkronisia toimintoja paremmin kuin takaisinsoittotoiminnot, async/awaitilla on etuja tavallisiin lupauksiin verrattuna.

Jokaisella async/wait-toiminnolla on kaksi keskeistä attribuuttia. Ne alkavat asynk avainsana ja odottaa avainsana odottaa asynkronisen toiminnon tulosta.

Esimerkki Async/Await Program

const PromiseFunction = () =>{
 return new Promise((ratkaise, hylkää) => {
 setTimeout(() => {
 ratkaista("tämä asynkroninen toiminto suoritettiin hyvin")
 }, 3000)
 })
}
const AsyncAwaitFunc = async () => {
 const tulos = odota PromiseFunction();
 console.log (tulos);
}
AsyncAwaitFunc();

Yllä oleva koodi palauttaa seuraavan tulosteen konsolissa:

tämä asynkroninen toiminto onnistui hyvin

Mitkä ovat tärkeimmät takeawayt?

Tässä artikkelissa on useita tärkeitä kohtia:

• Asynkroninen ohjelmointi on arvokasta, koska se lyhentää ohjelman odotusaikaa ja luo nopeampia sovelluksia.
• Takaisinsoittotoiminto voi olla synkroninen tai asynkroninen.
• Lupaukset tarjoavat paremman tavan käsitellä asynkronisia toimintoja kuin takaisinsoittotoiminnot.
• Async/wait-funktiot käsittelevät lupauksia paremmin kuin ketjufunktiot.
• Asynkroninen / odotustoiminto käsittelee asynkronisia toimintoja tavalla, joka näyttää synkroniselta, mikä helpottaa ymmärtämistä.
• Nuolitoiminnot auttavat sinua kirjoittamaan parempaa koodia.

JavaScript-nuolitoiminnot voivat tehdä sinusta paremman kehittäjän

Haluatko olla parempi verkkokehityksessä? JavaScript ES6:een lisätyt nuolifunktiot antavat sinulle kaksi tapaa luoda toimintoja verkkosovelluksille.

Lue Seuraava

Kirjailijasta