Oppiskele Asynkronisen JavaScriptin Esittely | Asynkroninen JavaScript ja API-integraatio

Mitä on asynkroninen ohjelmointi?

Asynkroninen ohjelmointi mahdollistaa koodin suorittamisen ilman, että se estää muita toimintoja. Toisin kuin synkronisessa ohjelmoinnissa, jossa jokainen operaatio odottaa edellisen valmistumista ennen jatkamista, asynkroninen ohjelmointi sallii muiden tehtävien etenemisen ilman, että niiden tarvitsee odottaa aiemman tehtävän päättymistä.

Tämä on erityisen tärkeää web-kehityksessä, jossa saatetaan joutua suorittamaan aikaa vieviä tehtäviä, kuten hakemaan tietoja API-rajapinnasta, odottamaan käyttäjän syötettä tai asettamaan ajastimia.

Kuvitellaan, että kehitämme ohjelmaa, jossa 1 ja 2 ovat palvelinpyyntöjä ja 3, 4 ja 5 ovat muita toimintoja, kuten käyttäjän vuorovaikutuksen käsittelyä.

Synkronisessa mallissa tehtävät 1 ja 2 estävät 3, 4 ja 5 suorittamisen, kunnes ne ovat valmiit. Esimerkiksi, jos käyttäjä lähettää kommentin (1) ja yrittää sitten avata sivupalkin (3), käyttöliittymä jäätyy, kunnes kommentti on käsitelty, mikä aiheuttaa viiveitä.

Asynkronisessa mallissa palvelinpyynnöt (1 ja 2) eivät estä ohjelman suorittamista. Odottaessaan vastausta ohjelma jatkaa muiden tehtävien (3, 4 ja 5) suorittamista. Näin käyttäjä voi olla vuorovaikutuksessa sivupalkin kanssa heti kommentin lähettämisen jälkeen, mikä parantaa käyttöliittymän reagointikykyä.

Synkronisen ja asynkronisen toiminnan erot

Synkroninen ohjelmointi

Synkronisessa ohjelmoinnissa tehtävät suoritetaan yksi kerrallaan. Jokaisen tehtävän on valmistuttava ennen kuin seuraava voi alkaa. Jos jokin tehtävä kestää kauan (esim. suuren tiedoston lataus), se estää kaikkia seuraavia tehtäviä etenemästä, mikä voi tehdä sovelluksesta epäresponsiivisen.


              123
            
console.log('Task 1: Start');
for (let i = 0; i < 1000000000; i += 1) {} // Simulate a long-running task
console.log('Task 2: After long task');

Tässä esimerkissä Tehtävä 2 suoritetaan vasta, kun pitkäkestoinen tehtävä (silmukka) on valmis. Tämä estää koodin suorittamisen ja voi jäädyttää selaimen.

Asynkroninen ohjelmointi

Asynkronisessa ohjelmoinnissa tehtävät voidaan käynnistää ja suorittaa myöhemmin estämättä muuta koodia. Tämä mahdollistaa muiden tehtävien jatkumisen samalla kun odotetaan pitkäkestoisten toimintojen (esim. datan hakeminen) valmistumista. Se varmistaa, että tehtävät kuten verkkopyynnöt tai ajastimet eivät pysäytä sovelluksen muiden toimintojen kulkua.

index.html

index.css

index.js

Tässä esimerkissä Tehtävä 1 suoritetaan välittömästi, Tehtävä 3 suoritetaan myös välittömästi, ja Tehtävä 2 suoritetaan 2 sekunnin kuluttua. Asynkroninen toiminta mahdollistaa ohjelman jatkumisen ilman, että sen tarvitsee odottaa Tehtävä 2:n valmistumista.

Asynkronisten toimintojen tosielämän esimerkkejä

Datan hakeminen API:sta

Yksi JavaScriptin yleisimmistä asynkronisista toiminnoista on datan hakeminen etäpalvelimelta API:n avulla. JavaScript pyytää dataa API:lta, mutta muu koodi jatkaa suorittamista odottamatta palvelimen vastausta. Kun data on saatavilla, se käsitellään takaisinsoiton (callback) tai lupauksen (promise) avulla.

index.html

index.js

Synkroninen koodi: Kappale, jonka id="syncMessage", osoittaa että synkroninen koodi suoritetaan välittömästi asynkronisen haun käynnistämisen jälkeen. Tämä osoittaa, että ohjelma ei pysähdy odottamaan API-datan saapumista;
Asynkroninen haku: Kun data on haettu, kappale jonka id="apiOutput" päivitetään, mikä osoittaa asynkronisen tehtävän valmistumisen.

Ajastimet (setTimeout ja setInterval)

JavaScriptin setTimeout() ja setInterval() ovat yleisesti käytettyjä tehtävien ajastamiseen viiveen jälkeen tai säännöllisin väliajoin. Nämä funktiot eivät estä muun koodin suorittamista. Niiden käynnistämät tehtävät suoritetaan määritetyn viiveen tai välin jälkeen samalla kun muu koodi jatkaa suoritustaan.

index.html

index.js

Synkroninen koodi: Kappale, jonka id="syncMessage", päivittyy välittömästi, mikä osoittaa, että synkroninen osa koodista suoritetaan odottamatta ajastinta;
Asynkroninen ajastin: Kolmen sekunnin kuluttua setTimeout()-takaisinkutsu suoritetaan ja päivittää kappaleen, jonka id="timerOutput", osoittamaan, että ajastin on päättynyt.

Käyttäjän syötetapahtumien käsittely

JavaScript odottaa tapahtumia asynkronisesti estämättä muuta koodia, kun käsitellään käyttäjän vuorovaikutuksia (kuten klikkauksia, lomakkeiden lähetyksiä tai näppäinpainalluksia). Tapahtumankuuntelijat ovat ei-estäviä, joten muu ohjelma voi jatkaa suorittamista odottaessaan käyttäjän syötettä.

index.html

index.js

Synkroninen koodi: Kappale, jonka id="syncMessage", osoittaa että synkroninen koodi suoritetaan välittömästi tapahtumankuuntelijan asettamisen jälkeen. Se ei odota käyttäjän painavan painiketta;
Asynkroninen tapahtumankäsittely: Painikkeen tapahtumankuuntelija aktivoituu, kun käyttäjä painaa painiketta, ja päivittää kappaleen, jonka id="eventOutput".

Oliko kaikki selvää?

Kiitos palautteestasi!

Osio 4. Luku 1

Kysy tekoälyä

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

Awesome!

Completion rate improved to 2.22

Pyyhkäise näyttääksesi valikon

Mitä on asynkroninen ohjelmointi?

Kuvitellaan, että kehitämme ohjelmaa, jossa 1 ja 2 ovat palvelinpyyntöjä ja 3, 4 ja 5 ovat muita toimintoja, kuten käyttäjän vuorovaikutuksen käsittelyä.

Synkronisen ja asynkronisen toiminnan erot

Synkroninen ohjelmointi


              123
            
console.log('Task 1: Start');
for (let i = 0; i < 1000000000; i += 1) {} // Simulate a long-running task
console.log('Task 2: After long task');

Tässä esimerkissä Tehtävä 2 suoritetaan vasta, kun pitkäkestoinen tehtävä (silmukka) on valmis. Tämä estää koodin suorittamisen ja voi jäädyttää selaimen.

Asynkroninen ohjelmointi

index.html

index.css

index.js

Asynkronisten toimintojen tosielämän esimerkkejä

Datan hakeminen API:sta

index.html

index.js

Synkroninen koodi: Kappale, jonka id="syncMessage", osoittaa että synkroninen koodi suoritetaan välittömästi asynkronisen haun käynnistämisen jälkeen. Tämä osoittaa, että ohjelma ei pysähdy odottamaan API-datan saapumista;
Asynkroninen haku: Kun data on haettu, kappale jonka id="apiOutput" päivitetään, mikä osoittaa asynkronisen tehtävän valmistumisen.

Ajastimet (setTimeout ja setInterval)

index.html

index.js

Synkroninen koodi: Kappale, jonka id="syncMessage", päivittyy välittömästi, mikä osoittaa, että synkroninen osa koodista suoritetaan odottamatta ajastinta;
Asynkroninen ajastin: Kolmen sekunnin kuluttua setTimeout()-takaisinkutsu suoritetaan ja päivittää kappaleen, jonka id="timerOutput", osoittamaan, että ajastin on päättynyt.

Käyttäjän syötetapahtumien käsittely

index.html

index.js

Synkroninen koodi: Kappale, jonka id="syncMessage", osoittaa että synkroninen koodi suoritetaan välittömästi tapahtumankuuntelijan asettamisen jälkeen. Se ei odota käyttäjän painavan painiketta;
Asynkroninen tapahtumankäsittely: Painikkeen tapahtumankuuntelija aktivoituu, kun käyttäjä painaa painiketta, ja päivittää kappaleen, jonka id="eventOutput".

Oliko kaikki selvää?

Kiitos palautteestasi!

Osio 4. Luku 1