Monissa todellisissa sovelluksissa voi olla tarpeen suorittaa useita asynkronisia tehtäviä samanaikaisesti tai selvittää, mikä niistä valmistuu ensin. JavaScript tarjoaa kaksi keskeistä menetelmää tällaisten tilanteiden hallintaan: Promise.all() ja Promise.race().

Promise.all(): Tehtävien suorittaminen rinnakkain

Promise.all() mahdollistaa useiden promissien suorittamisen rinnakkain. Se palauttaa yhden promisen, joka täyttyy, kun kaikki taulukon promiset täyttyvät, tai hylkää heti, kun yksikin promise hylätään. Tämä on hyödyllistä, kun kaikkien asynkronisten toimintojen on onnistuttava ennen kuin jatketaan eteenpäin.

Funktio fetchMultipleResources lähettää kolme pyyntöä samanaikaisesti noutaakseen postauksen, käyttäjän ja kommenttien tiedot. Käyttämällä Promise.all() kaikki kolme pyyntöä käynnistetään yhdessä, ja funktio odottaa, kunnes kaikki lupaukset täyttyvät. Kun lupaukset ovat täyttyneet, tulokset puretaan erillisiin muuttujiin (post, user ja comments). Postauksen otsikko, käyttäjän nimi ja kommenttien kokonaismäärä näytetään sitten HTML:ssä. Tämä lähestymistapa on tehokas, kun kaikkien pyyntöjen on valmistuttava ennen jatkamista, sillä se lyhentää kokonaisodotusaikaa suorittamalla tehtävät rinnakkain.

Promise.race(): Ensimmäisen täyttyneen lupauksen käsittely

Promise.race() palauttaa yhden lupauksen, joka täyttyy tai hylätään heti, kun ensimmäinen taulukon lupauksista täyttyy (tai hylätään). Tämä on hyödyllistä, kun olet kiinnostunut nopeimmasta tuloksesta, esimerkiksi aikakatkaistaessa pyyntö, jos se kestää liian kauan.

fetchWithTimeout-funktio luo timeoutPromise-olion, joka hylätään kolmen sekunnin kuluttua, simuloiden aikakatkaisua. Samanaikaisesti fetchPromise hakee tietoja API-rajapinnasta. Promise.race()-menetelmällä funktio odottaa, kumpi lupauksista täyttyy ensin. Jos haku valmistuu kolmen sekunnin sisällä, viestin otsikko näytetään. Muussa tapauksessa, jos haku kestää liian kauan, aikakatkaisu käynnistyy ja HTML:ssä näytetään virheilmoitus ("Request timed out!"). Tämä lähestymistapa soveltuu erinomaisesti tilanteisiin, joissa nopea vasteaika on välttämätön.

Käyttötapaukset rinnakkaisille ja peräkkäisille pyynnöille

Milloin käyttää rinnakkaisia pyyntöjä (Promise.all())

Rinnakkaiset pyynnöt soveltuvat tilanteisiin, joissa tietoja haetaan useista toisistaan riippumattomista lähteistä, sillä kaikki pyynnöt voidaan suorittaa samanaikaisesti. Esimerkiksi käyttäjätietojen, viestien ja kommenttien lataaminen hallintapaneeliin: jokainen pyyntö on erillinen eikä riipu muista, joten ne voidaan hakea rinnakkain suorituskyvyn parantamiseksi. Tämä lähestymistapa minimoi kokonaisodotusajan, koska pyynnöt käsitellään samanaikaisesti eikä peräkkäin.

Milloin käyttää peräkkäisiä pyyntöjä

Joissakin tapauksissa tehtävät on suoritettava tietyssä järjestyksessä, eli yksi on saatettava loppuun ennen seuraavan aloittamista. Näissä riippuvaisissa pyynnöissä voidaan käyttää async/await-rakennetta silmukassa tai ketjuttaa .then()-kutsuja, välttäen Promise.all()-menetelmää.

Esimerkkinä ensin haetaan käyttäjätiedot ja sitten, saatujen käyttäjätunnusten perusteella, haetaan käyttäjän viestit. Tällaisissa tilanteissa jokainen pyyntö perustuu edellisen tuloksiin, mikä edellyttää peräkkäistä lähestymistapaa.

Tämä esimerkki havainnollistaa peräkkäisten pyyntöjen tekemistä, joissa jokainen pyyntö riippuu edellisen tuloksesta. Funktiossa fetchUserDataSequentially haetaan ensin käyttäjätiedot API:sta. Kun käyttäjätiedot on vastaanotettu ja jäsennelty, käyttäjän tunnusta käytetään toisessa pyynnössä käyttäjän julkaisujen hakemiseen. Tulokset näytetään sitten HTML:ssä, jossa näkyvät käyttäjän nimi ja julkaisujen määrä. Tämä peräkkäinen lähestymistapa on tarpeellinen, kun pyynnöt ovat toisistaan riippuvaisia, varmistaen että jokainen pyyntö valmistuu ennen seuraavan aloittamista.