JavaScript Promise Combinators: Edistyneet asynkroniset mallit globaaleille sovelluksille

Asynkroninen ohjelmointi on modernin JavaScriptin kulmakivi, erityisesti rakennettaessa verkkosovelluksia, jotka ovat vuorovaikutuksessa API-rajapintojen ja tietokantojen kanssa tai suorittavat aikaa vieviä operaatioita. JavaScriptin Promise-oliot tarjoavat tehokkaan abstraktion asynkronisten operaatioiden hallintaan, mutta niiden hallitseminen vaatii edistyneiden mallien ymmärtämistä. Tässä artikkelissa syvennytään JavaScriptin Promise-kombinaattoreihin – Promise.all, Promise.allSettled, Promise.race ja Promise.any – ja siihen, miten niitä voidaan käyttää tehokkaiden ja vankkojen asynkronisten työnkulkujen luomiseen, erityisesti globaaleissa sovelluksissa, joissa verkko-olosuhteet ja datalähteet vaihtelevat.

Promise-olioiden ymmärtäminen: Pikakertaus

Ennen kuin sukellamme kombinaattoreihin, kerrataan nopeasti Promise-oliot. Promise edustaa asynkronisen operaation lopullista tulosta. Se voi olla yhdessä kolmesta tilasta:

• Pending (Odottaa): Alkutila, ei vielä toteutunut eikä hylätty.
• Fulfilled (Toteutunut): Operaatio onnistui, ja sillä on tulosarvo.
• Rejected (Hylätty): Operaatio epäonnistui, ja sillä on syy (yleensä Error-olio).

Promise-oliot tarjoavat siistimmän ja hallittavamman tavan käsitellä asynkronisia operaatioita verrattuna perinteisiin takaisinkutsuihin (callbacks). Ne parantavat koodin luettavuutta ja yksinkertaistavat virheidenkäsittelyä. Ratkaisevaa on, että ne muodostavat myös perustan Promise-kombinaattoreille, joita tutkimme seuraavaksi.

Promise-kombinaattorit: Asynkronisten operaatioiden orkestrointi

Promise-kombinaattorit ovat staattisia metodeja Promise-oliossa, jotka mahdollistavat useiden Promise-olioiden hallinnan ja koordinoinnin. Ne tarjoavat tehokkaita työkaluja monimutkaisten asynkronisten työnkulkujen rakentamiseen. Tutustutaan jokaiseen niistä yksityiskohtaisesti.

Promise.all(): Promise-olioiden suorittaminen rinnakkain ja tulosten yhdistäminen

Promise.all() ottaa syötteenä iteroitavan joukon (yleensä taulukon) Promise-olioita ja palauttaa yhden Promise-olion. Tämä palautettu Promise toteutuu, kun kaikki syötteen Promise-oliot ovat toteutuneet. Jos yksikin syötteen Promise-olioista hylätään, palautettu Promise hylätään välittömästi ensimmäisen hylätyn Promisen syyllä.

Käyttötapaus: Kun sinun täytyy hakea dataa useista API-rajapinnoista samanaikaisesti ja käsitellä yhdistettyjä tuloksia, Promise.all() on ihanteellinen. Kuvittele esimerkiksi rakentavasi kojelautaa, joka näyttää säätietoja eri kaupungeista ympäri maailmaa. Kunkin kaupungin data voitaisiin hakea erillisellä API-kutsulla.

            async function fetchWeatherData(city) {
  try {
    const response = await fetch(`https://api.example.com/weather?city=${city}`); // Korvaa todellisella API-päätepisteellä
    if (!response.ok) {
      throw new Error(`Säädatan haku epäonnistui kaupungille ${city}`);
    }
    return await response.json();
  } catch (error) {
    console.error(`Virhe säädatan haussa kaupungille ${city}: ${error}`);
    throw error; // Heitä virhe uudelleen, jotta Promise.all saa sen kiinni
  }
}

async function displayWeatherData() {
  const cities = ['Lontoo', 'Tokio', 'New York', 'Sydney'];
  try {
    const weatherDataPromises = cities.map(city => fetchWeatherData(city));
    const weatherData = await Promise.all(weatherDataPromises);

    weatherData.forEach((data, index) => {
      console.log(`Sää kaupungissa ${cities[index]}:`, data);
      // Päivitä käyttöliittymä säädatalla
    });
  } catch (error) {
    console.error('Säädatan haku kaikille kaupungeille epäonnistui:', error);
    // Näytä virheilmoitus käyttäjälle
  }
}

displayWeatherData();

            

              
                Copy
              
            
          

Huomioitavaa globaaleissa sovelluksissa:

• Verkon viive: Pyynnöt eri API-rajapintoihin eri maantieteellisillä alueilla voivat kokea vaihtelevia viiveitä. Promise.all() ei takaa järjestystä, jossa Promise-oliot toteutuvat, ainoastaan sen, että ne kaikki toteutuvat (tai yksi hylätään) ennen kuin yhdistetty Promise ratkeaa.
• API-nopeusrajoitukset: Jos teet useita pyyntöjä samalle API-rajapinnalle tai useille API-rajapinnoille, joilla on jaetut nopeusrajoitukset, saatat ylittää ne. Toteuta strategioita, kuten pyyntöjen jonottaminen tai eksponentiaalinen viive (exponential backoff), käsitelläksesi nopeusrajoituksia siististi.
• Virheidenkäsittely: Muista, että jos yksikin Promise hylätään, koko Promise.all()-operaatio epäonnistuu. Tämä ei välttämättä ole toivottavaa, jos haluat näyttää osittaista dataa, vaikka jotkut pyynnöt epäonnistuisivat. Harkitse Promise.allSettled()-metodin käyttöä tällaisissa tapauksissa (selitetty alla).

Promise.allSettled(): Onnistumisten ja epäonnistumisten käsittely yksitellen

Promise.allSettled() on samankaltainen kuin Promise.all(), mutta ratkaisevalla erolla: se odottaa, että kaikki syötteen Promise-oliot ovat ratkenneet (settled), riippumatta siitä, toteutuvatko vai hylätäänkö ne. Palautettu Promise toteutuu aina taulukolla objekteja, joista kukin kuvaa vastaavan syötteen Promisen lopputuloksen. Jokaisella objektilla on status-ominaisuus (joko "fulfilled" tai "rejected") ja value- (jos toteutui) tai reason- (jos hylättiin) ominaisuus.

Käyttötapaus: Kun sinun täytyy kerätä tuloksia useista asynkronisista operaatioista ja on hyväksyttävää, että jotkut niistä epäonnistuvat aiheuttamatta koko operaation epäonnistumista, Promise.allSettled() on parempi valinta. Kuvittele järjestelmä, joka käsittelee maksuja useiden maksuyhdyskäytävien kautta. Haluat ehkä yrittää kaikkia maksuja ja kirjata ylös, mitkä onnistuivat ja mitkä epäonnistuivat.

            async function processPayment(paymentGateway, amount) {
  try {
    const response = await paymentGateway.process(amount); // Korvaa todellisella maksuyhdyskäytäväintegraatiolla
    if (response.status === 'success') {
      return { status: 'fulfilled', value: `Maksu käsitelty onnistuneesti ${paymentGateway.name}:n kautta` };
    } else {
      throw new Error(`Maksu epäonnistui ${paymentGateway.name}:n kautta: ${response.message}`);
    }
  } catch (error) {
    return { status: 'rejected', reason: `Maksu epäonnistui ${paymentGateway.name}:n kautta: ${error.message}` };
  }
}

async function processMultiplePayments(paymentGateways, amount) {
  const paymentPromises = paymentGateways.map(gateway => processPayment(gateway, amount));
  const results = await Promise.allSettled(paymentPromises);

  results.forEach((result, index) => {
    if (result.status === 'fulfilled') {
      console.log(result.value);
    } else {
      console.error(result.reason);
    }
  });

  // Analysoi tulokset määrittääksesi kokonaisonnistumisen/-epäonnistumisen
  const successfulPayments = results.filter(result => result.status === 'fulfilled').length;
  const failedPayments = results.filter(result => result.status === 'rejected').length;

  console.log(`Onnistuneet maksut: ${successfulPayments}`);
  console.log(`Epäonnistuneet maksut: ${failedPayments}`);
}

// Esimerkkejä maksuyhdyskäytävistä
const paymentGateways = [
  { name: 'PayPal', process: (amount) => Promise.resolve({ status: 'success', message: 'Maksu onnistui' }) },
  { name: 'Stripe', process: (amount) => Promise.reject({ status: 'error', message: 'Riittämättömät varat' }) },
  { name: 'Worldpay', process: (amount) => Promise.resolve({ status: 'success', message: 'Maksu onnistui' }) },
];

processMultiplePayments(paymentGateways, 100);

            

              
                Copy
              
            
          

Huomioitavaa globaaleissa sovelluksissa:

• Vankkuus: Promise.allSettled() parantaa sovellustesi vankkuutta varmistamalla, että kaikki asynkroniset operaatiot yritetään suorittaa, vaikka jotkut niistä epäonnistuisivat. Tämä on erityisen tärkeää hajautetuissa järjestelmissä, joissa viat ovat yleisiä.
• Yksityiskohtainen raportointi: Tulos-taulukko tarjoaa yksityiskohtaista tietoa kunkin operaation lopputuloksesta, mikä mahdollistaa virheiden kirjaamisen, epäonnistuneiden operaatioiden uudelleenyrittämisen tai käyttäjille annettavan tarkan palautteen.
• Osittainen onnistuminen: Voit helposti määrittää kokonaisonnistumisprosentin ja ryhtyä asianmukaisiin toimiin onnistuneiden ja epäonnistuneiden operaatioiden määrän perusteella. Voit esimerkiksi tarjota vaihtoehtoisia maksutapoja, jos ensisijainen yhdyskäytävä epäonnistuu.

Promise.race(): Nopeimman tuloksen valitseminen

Promise.race() ottaa myös syötteenä iteroitavan joukon Promise-olioita ja palauttaa yhden Promise-olion. Kuitenkin, toisin kuin Promise.all() ja Promise.allSettled(), Promise.race() ratkeaa heti, kun mikä tahansa syötteen Promise-olioista ratkeaa (joko toteutuu tai hylätään). Palautettu Promise toteutuu tai hylätään ensimmäisenä ratkenneen Promisen arvolla tai syyllä.

Käyttötapaus: Kun sinun täytyy valita nopein vastaus useista lähteistä, Promise.race() on hyvä valinta. Kuvittele kyselyä useilta palvelimilta samasta datasta ja ensimmäisenä saamasi vastauksen käyttämistä. Tämä voi parantaa suorituskykyä ja reagoivuutta, erityisesti tilanteissa, joissa jotkut palvelimet saattavat olla väliaikaisesti poissa käytöstä tai hitaampia kuin toiset.

            async function fetchDataFromServer(serverURL) {
  try {
    const response = await fetch(serverURL, {signal: AbortSignal.timeout(5000)}); // Lisää 5 sekunnin aikakatkaisu
    if (!response.ok) {
      throw new Error(`Datan haku epäonnistui osoitteesta ${serverURL}`);
    }
    return await response.json();
  } catch (error) {
    console.error(`Virhe datan haussa osoitteesta ${serverURL}: ${error}`);
    throw error;
  }
}

async function getFastestResponse() {
  const serverURLs = [
    'https://server1.example.com/data',  // Korvaa todellisilla palvelin-URL-osoitteilla
    'https://server2.example.com/data',
    'https://server3.example.com/data',
  ];

  try {
    const dataPromises = serverURLs.map(serverURL => fetchDataFromServer(serverURL));
    const fastestData = await Promise.race(dataPromises);

    console.log('Nopein data vastaanotettu:', fastestData);
    // Käytä nopeinta dataa
  } catch (error) {
    console.error('Datan haku miltään palvelimelta ei onnistunut:', error);
    // Käsittele virhe
  }
}

getFastestResponse();

            

              
                Copy
              
            
          

Huomioitavaa globaaleissa sovelluksissa:

• Aikakatkaisut: On ratkaisevan tärkeää toteuttaa aikakatkaisut käytettäessä Promise.race()-metodia, jotta estetään palautetun Promisen odottavan loputtomiin, jos jotkut syötteen Promise-olioista eivät koskaan ratkea. Yllä oleva esimerkki käyttää `AbortSignal.timeout()`-metodia tämän saavuttamiseksi.
• Verkko-olosuhteet: Nopein palvelin saattaa vaihdella käyttäjän maantieteellisen sijainnin ja verkko-olosuhteiden mukaan. Harkitse sisällönjakeluverkon (CDN) käyttöä sisällön jakeluun ja suorituskyvyn parantamiseen käyttäjille ympäri maailmaa.
• Virheidenkäsittely: Jos kilpailun 'voittava' Promise hylätään, koko Promise.race hylätään. Varmista, että jokaisella Promisella on asianmukainen virheidenkäsittely odottamattomien hylkäysten estämiseksi. Lisäksi, jos "voittava" promise hylätään aikakatkaisun vuoksi (kuten yllä), muut promiset jatkavat suoritustaan taustalla. Saatat joutua lisäämään logiikkaa näiden muiden promise-olioiden peruuttamiseksi käyttämällä `AbortController`-ohjainta, jos niitä ei enää tarvita.

Promise.any(): Ensimmäisen toteutumisen hyväksyminen

Promise.any() on samankaltainen kuin Promise.race(), mutta hieman erilaisella toiminnalla. Se odottaa ensimmäisen syötteen Promise-olion toteutumista. Jos kaikki syötteen Promise-oliot hylätään, Promise.any() hylätään AggregateError-virheellä, joka sisältää taulukon hylkäyssyistä.

Käyttötapaus: Kun sinun täytyy hakea dataa useista lähteistä ja välität vain ensimmäisestä onnistuneesta tuloksesta, Promise.any() on hyvä valinta. Tämä on hyödyllistä, kun sinulla on redundantteja datalähteitä tai vaihtoehtoisia API-rajapintoja, jotka tarjoavat saman tiedon. Se priorisoi onnistumisen nopeuden sijaan, koska se odottaa ensimmäistä toteutumista, vaikka jotkut Promise-oliot hylättäisiin nopeasti.

            async function fetchDataFromSource(sourceURL) {
  try {
    const response = await fetch(sourceURL);
    if (!response.ok) {
      throw new Error(`Datan haku epäonnistui lähteestä ${sourceURL}`);
    }
    return await response.json();
  } catch (error) {
    console.error(`Virhe datan haussa lähteestä ${sourceURL}: ${error}`);
    throw error;
  }
}

async function getFirstSuccessfulData() {
  const dataSources = [
    'https://source1.example.com/data', // Korvaa todellisilla datalähteiden URL-osoitteilla
    'https://source2.example.com/data',
    'https://source3.example.com/data',
  ];

  try {
    const dataPromises = dataSources.map(sourceURL => fetchDataFromSource(sourceURL));
    const data = await Promise.any(dataPromises);

    console.log('Ensimmäinen onnistunut data vastaanotettu:', data);
    // Käytä onnistuneesti haettua dataa
  } catch (error) {
    if (error instanceof AggregateError) {
      console.error('Datan haku miltään lähteeltä ei onnistunut:', error.errors);
      // Käsittele virhe
    } else {
      console.error('Odottamaton virhe tapahtui:', error);
    }
  }
}

getFirstSuccessfulData();

            

              
                Copy
              
            
          

Huomioitavaa globaaleissa sovelluksissa:

• Redundanssi: Promise.any() on erityisen hyödyllinen käsiteltäessä redundantteja datalähteitä, jotka tarjoavat samanlaista tietoa. Jos yksi lähde on poissa käytöstä tai hidas, voit luottaa muihin lähteisiin datan saamiseksi.
• Virheidenkäsittely: Muista käsitellä AggregateError, joka heitetään, kun kaikki syötteen Promise-oliot hylätään. Tämä virhe sisältää taulukon yksittäisistä hylkäyssyistä, mikä auttaa sinua virheenkorjauksessa ja ongelmien diagnosoinnissa.
• Priorisointi: Järjestys, jossa annat Promise-oliot Promise.any()-metodille, on tärkeä. Sijoita luotettavimmat tai nopeimmat datalähteet ensin lisätäksesi onnistuneen tuloksen todennäköisyyttä.

Oikean kombinaattorin valinta: Yhteenveto

Tässä on nopea yhteenveto, joka auttaa sinua valitsemaan tarpeisiisi sopivan Promise-kombinaattorin:

• Promise.all(): Käytä, kun tarvitset kaikkien Promise-olioiden toteutuvan onnistuneesti ja haluat epäonnistua välittömästi, jos yksikin Promise hylätään.
• Promise.allSettled(): Käytä, kun haluat odottaa kaikkien Promise-olioiden ratkeavan, riippumatta onnistumisesta tai epäonnistumisesta, ja tarvitset yksityiskohtaista tietoa jokaisesta lopputuloksesta.
• Promise.race(): Käytä, kun haluat valita nopeimman tuloksen useista Promise-olioista ja välität vain ensimmäisestä, joka ratkeaa.
• Promise.any(): Käytä, kun haluat hyväksyä ensimmäisen onnistuneen tuloksen useista Promise-olioista, eikä haittaa, jos jotkut Promise-oliot hylätään.

Edistyneet mallit ja parhaat käytännöt

Promise-kombinaattoreiden peruskäytön lisäksi on olemassa useita edistyneitä malleja ja parhaita käytäntöjä, jotka kannattaa pitää mielessä:

Rinnakkaisuuden rajoittaminen

Käsiteltäessä suurta määrää Promise-olioita, niiden kaikkien suorittaminen rinnakkain saattaa ylikuormittaa järjestelmääsi tai ylittää API-rajapintojen nopeusrajoitukset. Voit rajoittaa rinnakkaisuutta käyttämällä tekniikoita, kuten:

• Paloittelu (Chunking): Jaa Promise-oliot pienempiin osiin ja käsittele kukin osa peräkkäin.
• Semaforin käyttö: Toteuta semafori hallitsemaan samanaikaisten operaatioiden määrää.

Tässä on esimerkki paloittelun käytöstä:

            async function processInChunks(promises, chunkSize) {
  const results = [];
  for (let i = 0; i < promises.length; i += chunkSize) {
    const chunk = promises.slice(i, i + chunkSize);
    const chunkResults = await Promise.all(chunk);
    results.push(...chunkResults);
  }
  return results;
}

// Esimerkkikäyttö
const myPromises = [...Array(100)].map((_, i) => Promise.resolve(i)); // Luo 100 promisea

processInChunks(myPromises, 10) // Käsittele 10 promisea kerrallaan
  .then(results => console.log('Kaikki promiset ratkaistu:', results));

            

              
                Copy
              
            
          

Virheiden siisti käsittely

Oikea virheidenkäsittely on ratkaisevan tärkeää työskenneltäessä Promise-olioiden kanssa. Käytä try...catch-lohkoja napataksesi virheet, jotka saattavat tapahtua asynkronisten operaatioiden aikana. Harkitse kirjastojen, kuten p-retry tai retry, käyttöä epäonnistuneiden operaatioiden automaattiseen uudelleenyrittämiseen.

            async function fetchDataWithRetry(url, retries = 3) {
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error(`HTTP-virhe! status: ${response.status}`);
    }
    return await response.json();
  } catch (error) {
    if (retries > 0) {
      console.log(`Yritetään uudelleen 1 sekunnin kuluttua... (Uudelleenyrityksiä jäljellä: ${retries})`);
      await new Promise(resolve => setTimeout(resolve, 1000)); // Odota 1 sekunti
      return fetchDataWithRetry(url, retries - 1);
    } else {
      console.error('Maksimi uudelleenyritykset saavutettu. Operaatio epäonnistui.');
      throw error;
    }
  }
}

            

              
                Copy
              
            
          

Async/Await-syntaksin käyttö

async ja await tarjoavat synkronisemman näköisen tavan työskennellä Promise-olioiden kanssa. Ne voivat parantaa merkittävästi koodin luettavuutta ja ylläpidettävyyttä.

Muista käyttää try...catch-lohkoja await-lausekkeiden ympärillä mahdollisten virheiden käsittelemiseksi.

Peruuttaminen

Joissakin skenaarioissa saatat joutua peruuttamaan odottavia Promise-olioita, erityisesti käsitellessäsi pitkäkestoisia operaatioita tai käyttäjän käynnistämiä toimintoja. Voit käyttää AbortController-API:a ilmaisemaan, että Promise tulisi peruuttaa.

            const controller = new AbortController();
const signal = controller.signal;

async function fetchDataWithCancellation(url) {
  try {
    const response = await fetch(url, { signal });
    if (!response.ok) {
      throw new Error(`HTTP-virhe! status: ${response.status}`);
    }
    return await response.json();
  } catch (error) {
    if (error.name === 'AbortError') {
      console.log('Haku peruutettu');
    } else {
      console.error('Virhe datan haussa:', error);
    }
    throw error;
  }
}

fetchDataWithCancellation('https://api.example.com/data')
  .then(data => console.log('Data vastaanotettu:', data))
  .catch(error => console.error('Haku epäonnistui:', error));

// Peruuta hakuoperaatio 5 sekunnin kuluttua
setTimeout(() => {
  controller.abort();
}, 5000);

            

              
                Copy
              
            
          

Yhteenveto

JavaScriptin Promise-kombinaattorit ovat tehokkaita työkaluja vankkojen ja tehokkaiden asynkronisten sovellusten rakentamiseen. Ymmärtämällä Promise.all, Promise.allSettled, Promise.race ja Promise.any -metodien vivahteet, voit orkestroida monimutkaisia asynkronisia työnkulkuja, käsitellä virheitä siististi ja optimoida suorituskykyä. Globaaleja sovelluksia kehitettäessä on ratkaisevan tärkeää ottaa huomioon verkon viive, API-nopeusrajoitukset ja datalähteiden luotettavuus. Soveltamalla tässä artikkelissa käsiteltyjä malleja ja parhaita käytäntöjä, voit luoda JavaScript-sovelluksia, jotka ovat sekä suorituskykyisiä että kestäviä, tarjoten erinomaisen käyttökokemuksen käyttäjille ympäri maailmaa.