JavaScript-rinnakkaisuuden hallinta: Syväsukellus Promise-lupausten rinnakkaiseen käsittelyyn

Nykyaikaisessa web-kehityksessä suorituskyky ei ole ominaisuus, vaan perustavanlaatuinen vaatimus. Käyttäjät ympäri maailmaa odottavat sovellusten olevan nopeita, reagoivia ja saumattomia. Tämän suorituskykyhaasteen ytimessä, erityisesti JavaScriptissä, on asynkronisten operaatioiden tehokas käsittely. Olipa kyseessä datan haku API:sta, tiedoston lukeminen tai tietokantakysely, monet tehtävät eivät valmistu välittömästi. Se, miten hallitsemme näitä odotusaikoja, voi olla ero takkuilevan sovelluksen ja ilahduttavan sulavan käyttökokemuksen välillä.

JavaScript on luonteeltaan yksisäikeinen kieli. Tämä tarkoittaa, että se voi suorittaa vain yhden koodinpätkän kerrallaan. Tämä saattaa kuulostaa rajoitukselta, mutta JavaScriptin tapahtumasilmukka ja estoton I/O-malli (non-blocking I/O) mahdollistavat asynkronisten tehtävien käsittelyn uskomattoman tehokkaasti. Tämän mallin moderni kulmakivi on Promise—objekti, joka edustaa asynkronisen operaation lopullista onnistumista (tai epäonnistumista).

Pelkkä Promise-lupausten tai niiden elegantin `async/await`-syntaksin käyttö ei kuitenkaan automaattisesti takaa optimaalista suorituskykyä. Yleinen sudenkuoppa kehittäjille on useiden itsenäisten asynkronisten tehtävien käsittely peräkkäin, mikä luo tarpeettomia pullonkauloja. Tässä kohtaa rinnakkainen Promise-lupausten käsittely astuu kuvaan. Käynnistämällä useita asynkronisia operaatioita rinnakkain ja odottamalla niitä yhdessä, voimme dramaattisesti lyhentää kokonaissuoritusaikaa ja rakentaa paljon tehokkaampia sovelluksia.

Tämä kattava opas vie sinut syväsukellukselle JavaScript-rinnakkaisuuden maailmaan. Tutkimme kieleen sisäänrakennettuja työkaluja—`Promise.all()`, `Promise.allSettled()`, `Promise.race()` ja `Promise.any()`—auttaaksemme sinua hallitsemaan rinnakkaisia tehtäviä kuin ammattilainen. Olitpa sitten junior-kehittäjä, joka vasta opettelee asynkronisuutta, tai kokenut insinööri, joka haluaa hioa toimintamallejaan, tämä artikkeli antaa sinulle tiedot, joilla kirjoitat nopeampaa, kestävämpää ja kehittyneempää JavaScript-koodia.

Ensiksi nopea selvennys: Rinnakkaisuus vs. samanaikaisuus

Ennen kuin jatkamme, on tärkeää selventää kahta termiä, joita käytetään usein toistensa synonyymeinä, mutta joilla on tietojenkäsittelytieteessä erilliset merkitykset: rinnakkaisuus (concurrency) ja samanaikaisuus (parallelism).

• Rinnakkaisuus (Concurrency) on useiden tehtävien hallintaa tietyn ajanjakson aikana. Kyse on monen asian käsittelystä kerralla. Järjestelmä on rinnakkainen, jos se voi aloittaa, suorittaa ja saattaa loppuun useamman kuin yhden tehtävän odottamatta edellisen valmistumista. JavaScriptin yksisäikeisessä ympäristössä rinnakkaisuus saavutetaan tapahtumasilmukan avulla, joka antaa moottorille mahdollisuuden vaihdella tehtävien välillä. Kun yksi pitkäkestoinen tehtävä (kuten verkkopyyntö) odottaa, moottori voi työskennellä muiden asioiden parissa.
• Samanaikaisuus (Parallelism) on useiden tehtävien suorittamista samanaikaisesti. Kyse on monen asian tekemisestä kerralla. Todellinen samanaikaisuus vaatii moniydinprosessorin, jossa eri säikeet voivat pyöriä eri ytimillä täsmälleen samaan aikaan. Vaikka web workerit mahdollistavat todellisen samanaikaisuuden selainpohjaisessa JavaScriptissä, tässä käsiteltävä ydinrinnakkaisuusmalli liittyy yhteen pääsäikeeseen.

I/O-sidonnaisissa operaatioissa (kuten verkkopyynnöissä) JavaScriptin rinnakkaisuusmalli antaa samanaikaisuuden *vaikutelman*. Voimme käynnistää useita pyyntöjä kerralla. Kun JavaScript-moottori odottaa vastauksia, se on vapaa tekemään muuta työtä. Operaatiot tapahtuvat 'rinnakkain' ulkoisten resurssien (palvelimet, tiedostojärjestelmät) näkökulmasta. Tämä on se voimakas malli, jota tulemme hyödyntämään.

Peräkkäisyyden ansa: Yleinen anti-pattern

Aloitetaan tunnistamalla yleinen virhe. Kun kehittäjät ensimmäisen kerran oppivat `async/await`-syntaksin, se on niin selkeä, että on helppoa kirjoittaa koodia, joka näyttää synkroniselta, mutta on vahingossa peräkkäistä ja tehotonta. Kuvittele, että sinun täytyy hakea käyttäjän profiili, heidän viimeisimmät julkaisunsa ja ilmoituksensa kojelautanäkymää varten.

Naiivi lähestymistapa voisi näyttää tältä:

Esimerkki: Tehoton peräkkäinen haku

            
async function fetchDashboardDataSequentially(userId) {
    console.time('sequentialFetch');

    console.log('Haetaan käyttäjäprofiilia...');
    const userProfile = await fetchUserProfile(userId); // Odottaa tässä

    console.log('Haetaan käyttäjän julkaisuja...');
    const userPosts = await fetchUserPosts(userId); // Odottaa tässä

    console.log('Haetaan käyttäjän ilmoituksia...');
    const userNotifications = await fetchUserNotifications(userId); // Odottaa tässä

    console.timeEnd('sequentialFetch');
    return { userProfile, userPosts, userNotifications };
}

// Kuvittele, että näiden funktioiden ratkeaminen kestää aikaa
// fetchUserProfile -> 500ms
// fetchUserPosts -> 800ms
// fetchUserNotifications -> 1000ms

            

              
                Copy
              
            
          

Mikä tässä kuvassa on vialla? Jokainen `await`-avainsana keskeyttää `fetchDashboardDataSequentially`-funktion suorituksen, kunnes lupaus ratkeaa. Pyyntö `userPosts`-datan hakemiseksi ei edes ala ennen kuin `userProfile`-pyyntö on täysin valmis. Pyyntö `userNotifications`-datan hakemiseksi ei ala ennen kuin `userPosts` on palautunut. Nämä kolme verkkopyyntöä ovat toisistaan riippumattomia; ei ole mitään syytä odottaa! Kokonaisaika on kaikkien yksittäisten aikojen summa:

Kokonaisaika ≈ 500ms + 800ms + 1000ms = 2300ms

Tämä on valtava suorituskyvyn pullonkaula. Voimme pärjätä paljon, paljon paremmin.

Suorituskyvyn vapauttaminen: Rinnakkaisen suorituksen voima

Ratkaisu on käynnistää kaikki asynkroniset operaatiot kerralla, ilman välitöntä `await`-komentoa. Tämä antaa niiden suorittua rinnakkain. Voimme tallentaa odottavat Promise-objektit muuttujiin ja sitten käyttää Promise-yhdistelijää odottamaan niiden kaikkien valmistumista.

Esimerkki: Tehokas rinnakkainen haku

            
async function fetchDashboardDataConcurrently(userId) {
    console.time('concurrentFetch');

    console.log('Käynnistetään kaikki haut kerralla...');
    const profilePromise = fetchUserProfile(userId);
    const postsPromise = fetchUserPosts(userId);
    const notificationsPromise = fetchUserNotifications(userId);

    // Nyt odotamme niiden kaikkien valmistumista
    const [userProfile, userPosts, userNotifications] = await Promise.all([
        profilePromise,
        postsPromise,
        notificationsPromise
    ]);

    console.timeEnd('concurrentFetch');
    return { userProfile, userPosts, userNotifications };
}

            

              
                Copy
              
            
          

Tässä versiossa kutsumme kolmea hakufunktiota ilman `await`-komentoa. Tämä käynnistää kaikki kolme verkkopyyntöä välittömästi. JavaScript-moottori antaa ne eteenpäin taustaympäristölle (selaimelle tai Node.js:lle) ja saa takaisin kolme odottavaa Promise-lupausta. Sitten `Promise.all()`-metodia käytetään odottamaan kaikkien kolmen lupauksen ratkeamista. Kokonaisaika määräytyy nyt pisimpään kestävän operaation mukaan, ei summan.

Kokonaisaika ≈ max(500ms, 800ms, 1000ms) = 1000ms

Olemme juuri leikanneet datanhakuaikamme yli puoleen! Tämä on rinnakkaisen Promise-käsittelyn perusperiaate. Tutkitaan nyt niitä tehokkaita työkaluja, jotka JavaScript tarjoaa näiden rinnakkaisten tehtävien hallintaan.

Promise-yhdistelijien työkalupakki: `all`, `allSettled`, `race` ja `any`

JavaScript tarjoaa neljä staattista metodia `Promise`-objektissa, jotka tunnetaan Promise-yhdistelijöinä. Jokainen niistä ottaa vastaan iteratiivisen objektin (kuten taulukon) Promise-lupauksia ja palauttaa uuden yksittäisen lupauksen. Tämän uuden lupauksen käyttäytyminen riippuu siitä, mitä yhdistelijää käytät.

1. `Promise.all()`: Kaikki tai ei mitään -lähestymistapa

`Promise.all()` on täydellinen työkalu, kun sinulla on ryhmä tehtäviä, jotka ovat kaikki kriittisiä seuraavaa vaihetta varten. Se edustaa loogista "JA"-ehtoa: Tehtävä 1 JA Tehtävä 2 JA Tehtävä 3 on kaikkien onnistuttava.

• Syöte: Iteratiivinen objekti Promise-lupauksia.
• Käyttäytyminen: Se palauttaa yhden lupauksen, joka täyttyy, kun kaikki syötteen lupaukset ovat täyttyneet. Täyttynyt arvo on taulukko syötteen lupausten tuloksista samassa järjestyksessä.
• Epäonnistumistila: Se hylkää välittömästi heti, kun yksikin syötteen lupauksista hylätään. Hylkäyksen syy on ensimmäisenä hylätyn lupauksen syy. Tätä kutsutaan usein "fail-fast"-käyttäytymiseksi.

Käyttötapaus: Kriittisen datan yhdistäminen

Kojelautaesimerkkimme on täydellinen käyttötapaus. Jos et voi ladata käyttäjän profiilia, heidän julkaisujensa ja ilmoitustensa näyttäminen ei ehkä ole järkevää. Koko komponentti riippuu kaikkien kolmen tietopisteen saatavuudesta.

            
// Apufunktio API-kutsujen simulointiin
const mockApiCall = (value, delay, shouldFail = false) => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            if (shouldFail) {
                reject(new Error(`API-kutsu epäonnistui kohteelle: ${value}`));
            } else {
                console.log(`Ratkaistu: ${value}`);
                resolve({ data: value });
            }
        }, delay);
    });
};

async function loadCriticalData() {
    console.log('Käytetään Promise.all kriittiselle datalle...');
    try {
        const [profile, settings, permissions] = await Promise.all([
            mockApiCall('userProfile', 400),
            mockApiCall('userSettings', 700),
            mockApiCall('userPermissions', 500)
        ]);
        console.log('Kaikki kriittinen data ladattu onnistuneesti!');
        // Nyt renderöidään käyttöliittymä profiilin, asetusten ja oikeuksien kanssa
    } catch (error) {
        console.error('Kriittisen datan lataus epäonnistui:', error.message);
        // Näytä virheilmoitus käyttäjälle
    }
}

// Mitä tapahtuu, jos yksi epäonnistuu?
async function loadCriticalDataWithFailure() {
    console.log('\nDemonstroidaan Promise.all-epäonnistumista...');
    try {
        const results = await Promise.all([
            mockApiCall('userProfile', 400),
            mockApiCall('userSettings', 700, true), // Tämä epäonnistuu
            mockApiCall('userPermissions', 500)
        ]);
    } catch (error) {
        console.error('Promise.all hylättiin:', error.message);
        // Huom: 'userProfile'- ja 'userPermissions'-kutsut ovat saattaneet valmistua,
        // mutta niiden tulokset menetetään, koska koko operaatio epäonnistui.
    }
}

loadCriticalData();
// Pienen viiveen jälkeen kutsutaan epäonnistumisesimerkkiä
setTimeout(loadCriticalDataWithFailure, 2000);


            

              
                Copy
              
            
          

`Promise.all()`-metodin sudenkuoppa

Ensisijainen sudenkuoppa on sen "fail-fast"-luonne. Jos haet dataa kymmenelle eri, itsenäiselle widgetille sivulla ja yksi API-kutsu epäonnistuu, `Promise.all()` hylätään, ja menetät tulokset yhdeksältä muulta onnistuneelta kutsulta. Tässä kohtaa seuraava yhdistelijämme loistaa.

2. `Promise.allSettled()`: Sitkeä kerääjä

ES2020:ssä esitelty `Promise.allSettled()` oli mullistava parannus vikasietoisuuteen. Se on suunniteltu tilanteisiin, joissa haluat tietää jokaisen lupauksen lopputuloksen, olipa se onnistunut tai epäonnistunut. Se ei koskaan hylkää.

• Syöte: Iteratiivinen objekti Promise-lupauksia.
• Käyttäytyminen: Se palauttaa yhden lupauksen, joka aina täyttyy. Se täyttyy, kun kaikki syötteen lupaukset ovat ratkenneet (joko täyttyneet tai hylätyt). Täyttynyt arvo on taulukko objekteja, joista jokainen kuvaa yhden lupauksen lopputuloksen.
• Tulosmuoto: Jokaisella tulosobjektilla on `status`-ominaisuus.
  • Jos täyttynyt: `{ status: 'fulfilled', value: theResult }`
  • Jos hylätty: `{ status: 'rejected', reason: theError }`

Käyttötapaus: Ei-kriittiset, itsenäiset operaatiot

Kuvittele sivu, joka näyttää useita itsenäisiä komponentteja: sää-widget, uutissyöte ja pörssikurssien seuraaja. Jos uutissyötteen API epäonnistuu, haluat silti näyttää sään ja pörssitiedot. `Promise.allSettled()` on täydellinen tähän tarkoitukseen.

            
async function loadDashboardWidgets() {
    console.log('\nKäytetään Promise.allSettled itsenäisille widgeteille...');
    const results = await Promise.allSettled([
        mockApiCall('Säätiedot', 600),
        mockApiCall('Uutissyöte', 1200, true), // Tämä API on alhaalla
        mockApiCall('Pörssikurssit', 800)
    ]);

    console.log('Kaikki lupaukset ovat ratkenneet. Käsitellään tuloksia...');
    
    results.forEach((result, index) => {
        if (result.status === 'fulfilled') {
            console.log(`Widget ${index} ladattu onnistuneesti datalla:`, result.value.data);
            // Renderöi tämä widget käyttöliittymään
        } else {
            console.error(`Widgetin ${index} lataus epäonnistui:`, result.reason.message);
            // Näytä erityinen virhetila tälle widgetille
        }
    });
}

loadDashboardWidgets();

            

              
                Copy
              
            
          

`Promise.allSettled()`-metodin avulla sovelluksestasi tulee paljon vankempi. Yksittäinen virhepiste ei aiheuta ketjureaktiota, joka kaataa koko käyttöliittymän. Voit käsitellä jokaisen lopputuloksen siististi.

3. `Promise.race()`: Ensimmäisenä maalissa

`Promise.race()` tekee juuri sitä, mitä sen nimi antaa ymmärtää. Se asettaa ryhmän lupauksia kilpailemaan toisiaan vastaan ja julistaa voittajan heti, kun ensimmäinen ylittää maaliviivan, riippumatta siitä, oliko se onnistuminen vai epäonnistuminen.

• Syöte: Iteratiivinen objekti Promise-lupauksia.
• Käyttäytyminen: Se palauttaa yhden lupauksen, joka ratkeaa (täyttyy tai hylätään) heti, kun ensimmäinen syötteen lupauksista ratkeaa. Palautetun lupauksen täyttymisarvo tai hylkäysperuste on "voittaneen" lupauksen arvo.
• Tärkeä huomio: Muita lupauksia ei peruta. Ne jatkavat suoritustaan taustalla, ja niiden tulokset yksinkertaisesti jätetään huomiotta `Promise.race()`-kontekstissa.

Käyttötapaus: Aikarajan toteuttaminen

Yleisin ja käytännöllisin käyttötapaus `Promise.race()`-metodille on asettaa aikaraja asynkroniselle operaatiolle. Voit "kilpailuttaa" pääoperaatiosi `setTimeout`-lupausta vastaan. Jos operaatiosi kestää liian kauan, aikarajalupaus ratkeaa ensin, ja voit käsitellä sen virheenä.

            
function createTimeout(delay) {
    return new Promise((_, reject) => {
        setTimeout(() => {
            reject(new Error(`Operaatio aikakatkaistiin ${delay}ms jälkeen`));
        }, delay);
    });
}

async function fetchDataWithTimeout() {
    console.log('\nKäytetään Promise.race-metodia aikarajalle...');
    try {
        const result = await Promise.race([
            mockApiCall('jotain kriittistä dataa', 2000), // Tämä kestää liian kauan
            createTimeout(1500) // Tämä voittaa kilpailun
        ]);
        console.log('Data haettu onnistuneesti:', result.data);
    } catch (error) {
        console.error(error.message);
    }
}

fetchDataWithTimeout();

            

              
                Copy
              
            
          

Toinen käyttötapaus: Redundantit päätepisteet

Voisit myös käyttää `Promise.race()`-metodia kysyäksesi samaa resurssia useilta redundanteilta palvelimilta ja ottaa vastauksen nopeimmalta palvelimelta. Tämä on kuitenkin riskialtista, koska jos nopein palvelin palauttaa virheen (esim. 500-tilakoodin), `Promise.race()` hylätään välittömästi, vaikka hieman hitaampi palvelin olisi palauttanut onnistuneen vastauksen. Tämä johtaa meidät viimeiseen, tähän skenaarioon paremmin soveltuvaan yhdistelijään.

4. `Promise.any()`: Ensimmäinen onnistuja

ES2021:ssä esitelty `Promise.any()` on kuin optimistisempi versio `Promise.race()`-metodista. Se myös odottaa ensimmäisen lupauksen ratkeamista, mutta se etsii nimenomaan ensimmäistä, joka täyttyy.

• Syöte: Iteratiivinen objekti Promise-lupauksia.
• Käyttäytyminen: Se palauttaa yhden lupauksen, joka täyttyy heti, kun jokin syötteen lupauksista täyttyy. Täyttymisarvo on ensimmäisenä täyttyneen lupauksen arvo.
• Epäonnistumistila: Se hylätään vain, jos kaikki syötteen lupaukset hylätään. Hylkäysperusteena on erityinen `AggregateError`-objekti, joka sisältää `errors`-ominaisuuden—taulukon kaikista yksittäisistä hylkäysperusteista.

Käyttötapaus: Haku redundanteista lähteistä

Tämä on täydellinen työkalu resurssin hakemiseen useista lähteistä, kuten ensisijaisilta ja varapalvelimilta tai useista sisältöjakeluverkoista (CDN). Välität vain siitä, että saat yhden onnistuneen vastauksen mahdollisimman nopeasti.

            
async function fetchResourceFromMirrors() {
    console.log('\nKäytetään Promise.any löytääkseen nopeimman onnistuneen lähteen...');
    try {
        const resource = await Promise.any([
            mockApiCall('Ensisijainen CDN', 800, true), // Epäonnistuu nopeasti
            mockApiCall('Euroopan peilipalvelin', 1200), // Hitaampi, mutta onnistuu
            mockApiCall('Aasian peilipalvelin', 1100) // Onnistuu myös, mutta on hitaampi kuin Euroopan
        ]);
        console.log('Resurssi haettu onnistuneesti peilipalvelimelta:', resource.data);
    } catch (error) {
        if (error instanceof AggregateError) {
            console.error('Kaikki peilipalvelimet eivät onnistuneet tarjoamaan resurssia.');
            // Voit tarkastella yksittäisiä virheitä:
            error.errors.forEach(err => console.log('- ' + err.message));
        }
    }
}

fetchResourceFromMirrors();

            

              
                Copy
              
            
          

Tässä esimerkissä `Promise.any()` jättää huomiotta ensisijaisen CDN:n nopean epäonnistumisen ja odottaa Euroopan peilipalvelimen täyttymistä, jolloin se ratkeaa kyseisellä datalla ja käytännössä jättää Aasian peilipalvelimen tuloksen huomiotta.

Oikean työkalun valinta: Pikaopas

Kun käytössä on neljä tehokasta vaihtoehtoa, miten päätät, mitä käyttää? Tässä on yksinkertainen päätöksentekokehys:

• Tarvitsenko KAIKKIEN lupausten tulokset, ja onko katastrofi, jos YKSIKIN niistä epäonnistuu?
  Käytä Promise.all(). Tämä on tiukasti sidottuihin, kaikki tai ei mitään -skenaarioihin.
• Tarvitsenko tietää KAIKKIEN lupausten lopputuloksen, riippumatta siitä, onnistuvatko ne vai epäonnistuvatko?
  Käytä Promise.allSettled(). Tämä on useiden itsenäisten tehtävien käsittelyyn, kun haluat käsitellä jokaisen lopputuloksen ja ylläpitää sovelluksen vikasietoisuutta.
• Välitänkö vain kaikkein ensimmäisestä valmistuvasta lupauksesta, olipa se onnistuminen tai epäonnistuminen?
  Käytä Promise.race(). Tämä on pääasiassa aikarajojen tai muiden kilpailutilanteiden toteuttamiseen, joissa vain ensimmäinen (minkälainen tahansa) tulos on merkityksellinen.
• Välitänkö vain ensimmäisestä ONNISTUNEESTA lupauksesta, ja voin jättää huomiotta kaikki epäonnistuneet?
  Käytä Promise.any(). Tämä on redundanssiin liittyviin skenaarioihin, kuten saman resurssin yrittämiseen useista päätepisteistä.

Edistyneet mallit ja käytännön huomiot

Vaikka Promise-yhdistelijät ovat uskomattoman tehokkaita, ammattimainen kehitys vaatii usein hieman enemmän hienovaraisuutta.

Rinnakkaisuuden rajoittaminen ja hidastaminen

Mitä tapahtuu, jos sinulla on 1000 ID:n taulukko ja haluat hakea tiedot jokaiselle? Jos naiivisti syötät kaikki 1000 lupauksia generoivaa kutsua `Promise.all()`-metodiin, lähetät välittömästi 1000 verkkopyyntöä. Tällä voi olla useita kielteisiä seurauksia:

• Palvelimen ylikuormitus: Voisit ylikuormittaa palvelimen, jolta pyydät dataa, mikä johtaa virheisiin tai heikentyneeseen suorituskykyyn kaikille käyttäjille.
• Käyttörajoitukset (Rate Limiting): Useimmilla julkisilla API:lla on käyttörajoituksia. Todennäköisesti saavutat rajasi ja saat `429 Too Many Requests` -virheitä.
• Asiakasohjelman resurssit: Asiakasohjelma (selain tai palvelin) saattaa kamppailla hallitakseen niin montaa avointa verkkoyhteyttä kerralla.

Ratkaisu on rajoittaa rinnakkaisuutta käsittelemällä lupaukset erissä. Vaikka voit kirjoittaa tähän oman logiikkasi, kypsät kirjastot kuten `p-limit` tai `async-pool` hoitavat tämän siististi. Tässä on käsitteellinen esimerkki siitä, miten voisit lähestyä sitä manuaalisesti:

            
async function processInBatches(items, batchSize, processingFn) {
    let results = [];
    for (let i = 0; i < items.length; i += batchSize) {
        const batch = items.slice(i, i + batchSize);
        console.log(`Käsitellään erää, joka alkaa indeksistä ${i}...`);
        
        const batchPromises = batch.map(processingFn);
        const batchResults = await Promise.allSettled(batchPromises);
        results = results.concat(batchResults);
    }
    return results;
}

// Esimerkkikäyttö:
const userIds = Array.from({ length: 20 }, (_, i) => i + 1);

// Käsittelemme 20 käyttäjää 5:n erissä
processInBatches(userIds, 5, id => mockApiCall(`user_${id}`, Math.random() * 1000))
    .then(allResults => {
        console.log('\nEräkäsittely valmis.');
        const successful = allResults.filter(r => r.status === 'fulfilled').length;
        const failed = allResults.filter(r => r.status === 'rejected').length;
        console.log(`Tuloksia yhteensä: ${allResults.length}, Onnistuneita: ${successful}, Epäonnistuneita: ${failed}`);
    });

            

              
                Copy
              
            
          

Huomio perumisesta

Pitkäaikainen haaste natiiveissa Promise-lupauksissa on, että niitä ei voi peruuttaa. Kun luot lupauksen, se suoritetaan loppuun asti. Vaikka `Promise.race` voi auttaa sinua jättämään hitaan tuloksen huomiotta, taustalla oleva operaatio jatkaa resurssien kuluttamista. Verkkopyyntöjen osalta moderni ratkaisu on `AbortController`-API, joka antaa sinun viestittää `fetch`-pyynnölle, että se tulisi keskeyttää. `AbortController`-ohjaimen integrointi Promise-yhdistelijöiden kanssa voi tarjota vankan tavan hallita ja siivota pitkäkestoisia rinnakkaisia tehtäviä.

Yhteenveto: Peräkkäisestä ajattelusta rinnakkaiseen

Asynkronisen JavaScriptin hallitseminen on matka. Se alkaa yksisäikeisen tapahtumasilmukan ymmärtämisestä, etenee Promise-lupausten ja `async/await`-syntaksin käyttöön selkeyden vuoksi, ja huipentuu rinnakkaiseen ajatteluun suorituskyvyn maksimoimiseksi. Siirtyminen peräkkäisestä `await`-ajattelutavasta rinnakkaislähtöiseen lähestymistapaan on yksi vaikuttavimmista muutoksista, jonka kehittäjä voi tehdä parantaakseen sovelluksen reagointikykyä.

Hyödyntämällä sisäänrakennettuja Promise-yhdistelijöitä, olet varustautunut käsittelemään monenlaisia todellisen maailman skenaarioita elegantisti ja tarkasti:

• Käytä `Promise.all()`-metodia kriittisissä, kaikki tai ei mitään -datariippuvuuksissa.
• Turvaudu `Promise.allSettled()`-metodiin rakentaaksesi vikasietoisia käyttöliittymiä itsenäisillä komponenteilla.
• Hyödynnä `Promise.race()`-metodia aikarajojen asettamiseen ja loputtomien odotusten estämiseen.
• Valitse `Promise.any()` luodaksesi nopeita ja vikasietoisia järjestelmiä, joissa on redundantteja tietolähteitä.

Seuraavan kerran, kun huomaat kirjoittavasi useita `await`-lauseita peräkkäin, pysähdy ja kysy: "Ovatko nämä operaatiot todella riippuvaisia toisistaan?" Jos vastaus on ei, sinulla on erinomainen tilaisuus refaktoroida koodisi rinnakkaiseksi. Aloita lupausten käynnistäminen yhdessä, valitse oikea yhdistelijä logiikkaasi varten ja katso, kuinka sovelluksesi suorituskyky nousee lentoon.