JavaScript ģeneratori: Uzlaboti paņēmieni asinhronai iterācijai un stāvokļu mašīnām

JavaScript ģeneratori ir jaudīga funkcija, kas ļauj izveidot iteratorus kodolīgākā un lasāmākā veidā. Lai gan tie bieži tiek iepazīstināti ar vienkāršiem secību ģenerēšanas piemēriem, to patiesais potenciāls slēpjas uzlabotos paternos, piemēram, asinhronajā iterācijā un stāvokļu mašīnu ieviešanā. Šis emuāra ieraksts iedziļināsies šajos uzlabotajos paternos, sniedzot praktiskus piemērus un noderīgas atziņas, lai palīdzētu jums izmantot ģeneratorus savos projektos.

Izpratne par JavaScript ģeneratoriem

Pirms iedziļināties uzlabotos paternos, ātri atkārtosim JavaScript ģeneratoru pamatus.

Ģenerators ir īpaša veida funkcija, kuru var apturēt un atsākt. Tie tiek definēti, izmantojot function* sintaksi, un izmanto yield atslēgvārdu, lai apturētu izpildi un atgrieztu vērtību. next() metode tiek izmantota, lai atsāktu izpildi un iegūtu nākamo atgriezto vērtību.

Pamata piemērs

Šeit ir vienkāršs piemērs ģeneratoram, kas atgriež skaitļu secību:

            
function* numberGenerator() {
  yield 1;
  yield 2;
  yield 3;
}

const generator = numberGenerator();

console.log(generator.next()); // { value: 1, done: false }
console.log(generator.next()); // { value: 2, done: false }
console.log(generator.next()); // { value: 3, done: false }
console.log(generator.next()); // { value: undefined, done: true }

            

              
                Copy
              
            
          

Asinhronā iterācija ar ģeneratoriem

Viens no pārliecinošākajiem ģeneratoru pielietojumiem ir asinhronā iterācija. Tas ļauj apstrādāt asinhronas datu plūsmas secīgākā un lasāmākā veidā, izvairoties no atzvanu (callbacks) vai solījumu (Promises) sarežģītības.

Tradicionālā asinhronā iterācija (Promises)

Apsveriet scenāriju, kurā nepieciešams iegūt datus no vairākiem API galapunktiem un apstrādāt rezultātus. Bez ģeneratoriem jūs varētu izmantot Promises un async/await šādi:

            
async function fetchData() {
  const urls = [
    'https://api.example.com/data1',
    'https://api.example.com/data2',
    'https://api.example.com/data3'
  ];

  for (const url of urls) {
    try {
      const response = await fetch(url);
      const data = await response.json();
      console.log(data); // Process the data
    } catch (error) {
      console.error('Error fetching data:', error);
    }
  }
}

fetchData();

            

              
                Copy
              
            
          

Lai gan šī pieeja ir funkcionāla, tā var kļūt pārāk izvērsta un grūtāk pārvaldāma, strādājot ar sarežģītākām asinhronām operācijām.

Asinhronā iterācija ar ģeneratoriem un asinhronajiem iteratoriem

Ģeneratori apvienojumā ar asinhronajiem iteratoriem nodrošina elegantāku risinājumu. Asinhronais iterators ir objekts, kas nodrošina next() metodi, kura atgriež solījumu (Promise), kas atrisinās par objektu ar value un done īpašībām. Ģeneratori var viegli izveidot asinhronos iteratorus.

            
async function* asyncDataFetcher(urls) {
  for (const url of urls) {
    try {
      const response = await fetch(url);
      const data = await response.json();
      yield data;
    } catch (error) {
      console.error('Error fetching data:', error);
      yield null; // Or handle the error as needed
    }
  }
}

async function processAsyncData() {
  const urls = [
    'https://api.example.com/data1',
    'https://api.example.com/data2',
    'https://api.example.com/data3'
  ];

  const dataStream = asyncDataFetcher(urls);

  for await (const data of dataStream) {
    if (data) {
      console.log(data); // Process the data
    } else {
      console.log('Error during fetching');
    }
  }
}

processAsyncData();

            

              
                Copy
              
            
          

Šajā piemērā asyncDataFetcher ir asinhronais ģenerators, kas atgriež datus, kas iegūti no katra URL. Funkcija processAsyncData izmanto for await...of ciklu, lai iterētu pār datu plūsmu, apstrādājot katru elementu, tiklīdz tas kļūst pieejams. Šī pieeja nodrošina tīrāku, lasāmāku kodu, kas secīgi apstrādā asinhronas operācijas.

Asinhronās iterācijas ar ģeneratoriem priekšrocības

• Uzlabota lasāmība: Kods lasās vairāk kā sinhronais cikls, padarot izpildes plūsmu vieglāk saprotamu.
• Kļūdu apstrāde: Kļūdu apstrādi var centralizēt ģeneratora funkcijā.
• Kompozējamība: Asinhronos ģeneratorus var viegli savienot un atkārtoti izmantot.
• Pretspiediena pārvaldība (Backpressure): Ģeneratorus var izmantot, lai ieviestu pretspiedienu, neļaujot patērētājam tikt pārslogotam ar ražotāja datiem.

Piemēri no reālās dzīves

• Datu straumēšana: Lielu failu vai reāllaika datu plūsmu apstrāde no API. Iedomājieties lielu CSV failu apstrādi no finanšu iestādes, analizējot akciju cenas, tiklīdz tās tiek atjauninātas.
• Datu bāzes vaicājumi: Lielu datu kopu iegūšana no datu bāzes pa daļām. Piemēram, klientu ierakstu izgūšana no datu bāzes, kas satur miljoniem ierakstu, apstrādājot tos partijās, lai izvairītos no atmiņas problēmām.
• Reāllaika tērzēšanas lietojumprogrammas: Ienākošo ziņojumu apstrāde no websocket savienojuma. Apsveriet globālu tērzēšanas lietojumprogrammu, kurā ziņojumi tiek nepārtraukti saņemti un parādīti lietotājiem dažādās laika joslās.

Stāvokļu mašīnas ar ģeneratoriem

Vēl viens spēcīgs ģeneratoru pielietojums ir stāvokļu mašīnu ieviešana. Stāvokļu mašīna ir skaitļošanas modelis, kas pāriet starp dažādiem stāvokļiem, pamatojoties uz ievades datiem. Ģeneratorus var izmantot, lai skaidri un kodolīgi definētu stāvokļu pārejas.

Tradicionālā stāvokļu mašīnas ieviešana

Tradicionāli stāvokļu mašīnas tiek ieviestas, izmantojot mainīgo, nosacījumu priekšrakstu un funkciju kombināciju. Tas var novest pie sarežģīta un grūti uzturama koda.

            
const STATE_IDLE = 'IDLE';
const STATE_LOADING = 'LOADING';
const STATE_SUCCESS = 'SUCCESS';
const STATE_ERROR = 'ERROR';

let currentState = STATE_IDLE;
let data = null;
let error = null;

async function fetchDataStateMachine(url) {
  switch (currentState) {
    case STATE_IDLE:
      currentState = STATE_LOADING;
      try {
        const response = await fetch(url);
        data = await response.json();
        currentState = STATE_SUCCESS;
      } catch (e) {
        error = e;
        currentState = STATE_ERROR;
      }
      break;
    case STATE_LOADING:
      // Ignore input while loading
      break;
    case STATE_SUCCESS:
      // Do something with the data
      console.log('Data:', data);
      currentState = STATE_IDLE; // Reset
      break;
    case STATE_ERROR:
      // Handle the error
      console.error('Error:', error);
      currentState = STATE_IDLE; // Reset
      break;
    default:
      console.error('Invalid state');
  }
}

fetchDataStateMachine('https://api.example.com/data');

            

              
                Copy
              
            
          

Šis piemērs demonstrē vienkāršu datu iegūšanas stāvokļu mašīnu, izmantojot switch priekšrakstu. Pieaugot stāvokļu mašīnas sarežģītībai, šī pieeja kļūst arvien grūtāk pārvaldāma.

Stāvokļu mašīnas ar ģeneratoriem

Ģeneratori nodrošina elegantāku un strukturētāku veidu, kā ieviest stāvokļu mašīnas. Katrs yield priekšraksts attēlo stāvokļa pāreju, un ģeneratora funkcija iekapsulē stāvokļa loģiku.

            
function* dataFetchingStateMachine(url) {
  let data = null;
  let error = null;

  try {
    // STATE: LOADING
    const response = yield fetch(url);
    data = yield response.json();

    // STATE: SUCCESS
    yield data;
  } catch (e) {
    // STATE: ERROR
    error = e;
    yield error;
  }

  // STATE: IDLE (implicitly reached after SUCCESS or ERROR)
  return;
}

async function runStateMachine() {
  const stateMachine = dataFetchingStateMachine('https://api.example.com/data');

  let result = stateMachine.next();

  while (!result.done) {
    const value = result.value;

    if (value instanceof Promise) {
      // Handle asynchronous operations
      try {
        const resolvedValue = await value;
        result = stateMachine.next(resolvedValue); // Pass the resolved value back to the generator
      } catch (e) {
        result = stateMachine.throw(e); // Throw the error back to the generator
      }
    } else if (value instanceof Error) {
      // Handle errors
      console.error('Error:', value);
      result = stateMachine.next();
    } else {
      // Handle successful data
      console.log('Data:', value);
      result = stateMachine.next();
    }
  }
}

runStateMachine();

            

              
                Copy
              
            
          

Šajā piemērā ģenerators dataFetchingStateMachine definē stāvokļus: LOADING (ko attēlo fetch(url) yield), SUCCESS (ko attēlo data yield) un ERROR (ko attēlo error yield). Funkcija runStateMachine vada stāvokļu mašīnu, apstrādājot asinhronās operācijas un kļūdu nosacījumus. Šī pieeja padara stāvokļu pārejas skaidras un vieglāk izsekojamas.

Stāvokļu mašīnu ar ģeneratoriem priekšrocības

• Uzlabota lasāmība: Kods skaidri attēlo stāvokļu pārejas un loģiku, kas saistīta ar katru stāvokli.
• Iekapsulēšana: Stāvokļu mašīnas loģika ir iekapsulēta ģeneratora funkcijā.
• Testējamība: Stāvokļu mašīnu var viegli testēt, ejot cauri ģeneratoram soli pa solim un pārbaudot sagaidāmās stāvokļu pārejas.
• Uzturamība: Izmaiņas stāvokļu mašīnā ir lokalizētas ģeneratora funkcijā, padarot to vieglāk uzturamu un paplašināmu.

Piemēri no reālās dzīves

• Lietotāja saskarnes (UI) komponentu dzīves cikls: Pārvaldot dažādus UI komponenta stāvokļus (piem., ielāde, datu attēlošana, kļūda). Apsveriet kartes komponentu ceļojumu lietotnē, kas pāriet no kartes datu ielādes, kartes attēlošanas ar marķieriem, kļūdu apstrādes, ja kartes dati neielādējas, un ļauj lietotājiem mijiedarboties un tālāk precizēt karti.
• Darbplūsmas automatizācija: Ieviešot sarežģītas darbplūsmas ar vairākiem soļiem un atkarībām. Iedomājieties starptautisku sūtījumu darbplūsmu: gaida maksājuma apstiprinājumu, sagatavo sūtījumu muitai, muitošana izcelsmes valstī, sūtīšana, muitošana galamērķa valstī, piegāde, pabeigšana. Katrs no šiem soļiem attēlo stāvokli.
• Spēļu izstrāde: Kontrolējot spēles entītiju uzvedību, pamatojoties uz to pašreizējo stāvokli (piem., dīkstāve, kustība, uzbrukums). Padomājiet par mākslīgā intelekta (AI) pretinieku globālā vairāku spēlētāju tiešsaistes spēlē.

Kļūdu apstrāde ģeneratoros

Kļūdu apstrāde ir būtiska, strādājot ar ģeneratoriem, īpaši asinhronos scenārijos. Ir divi galvenie veidi, kā apstrādāt kļūdas:

1. Try...Catch bloki: Izmantojiet try...catch blokus ģeneratora funkcijā, lai apstrādātu kļūdas, kas rodas izpildes laikā.
2. throw() metode: Izmantojiet ģeneratora objekta throw() metodi, lai ievadītu kļūdu ģeneratorā tajā brīdī, kad tas ir apturēts.

Iepriekšējie piemēri jau demonstrē kļūdu apstrādi, izmantojot try...catch. Apskatīsim throw() metodi.

            
function* errorGenerator() {
  try {
    yield 1;
    yield 2;
    yield 3;
  } catch (error) {
    console.error('Error caught:', error);
  }
}

const generator = errorGenerator();

console.log(generator.next()); // { value: 1, done: false }
console.log(generator.next()); // { value: 2, done: false }
console.log(generator.throw(new Error('Something went wrong'))); // Error caught: Error: Something went wrong
console.log(generator.next()); // { value: undefined, done: true }

            

              
                Copy
              
            
          

Šajā piemērā throw() metode ievada kļūdu ģeneratorā, kuru notver catch bloks. Tas ļauj apstrādāt kļūdas, kas rodas ārpus ģeneratora funkcijas.

Labākās prakses ģeneratoru izmantošanai

• Lietojiet aprakstošus nosaukumus: Izvēlieties aprakstošus nosaukumus savām ģeneratoru funkcijām un atgrieztajām vērtībām, lai uzlabotu koda lasāmību.
• Koncentrējiet ģeneratorus: Projektējiet savus ģeneratorus, lai tie veiktu konkrētu uzdevumu vai pārvaldītu noteiktu stāvokli.
• Apstrādājiet kļūdas saudzīgi: Ieviesiet robustu kļūdu apstrādi, lai novērstu neparedzētu uzvedību.
• Dokumentējiet savu kodu: Pievienojiet komentārus, lai paskaidrotu katra yield priekšraksta un stāvokļa pārejas mērķi.
• Apsveriet veiktspēju: Lai gan ģeneratoriem ir daudz priekšrocību, esiet uzmanīgi attiecībā uz to ietekmi uz veiktspēju, īpaši veiktspējai kritiskās lietojumprogrammās.

Noslēgums

JavaScript ģeneratori ir daudzpusīgs rīks sarežģītu lietojumprogrammu veidošanai. Apgūstot uzlabotus paternus, piemēram, asinhrono iterāciju un stāvokļu mašīnu ieviešanu, jūs varat rakstīt tīrāku, vieglāk uzturamu un efektīvāku kodu. Izmantojiet ģeneratorus savā nākamajā projektā un atraisiet to pilno potenciālu.

Atcerieties vienmēr ņemt vērā sava projekta specifiskās prasības un izvēlēties atbilstošu paternu konkrētajam uzdevumam. Ar praksi un eksperimentiem jūs kļūsiet prasmīgs ģeneratoru izmantošanā, lai risinātu plašu programmēšanas izaicinājumu klāstu.