JavaScript asinhrono funkciju ģeneratori: apgūstam asinhrono plūsmu izveidi

JavaScript asinhrono funkciju ģeneratori nodrošina jaudīgu mehānismu asinhrono datu plūsmu izveidei un patērēšanai. Tie apvieno asinhronās programmēšanas priekšrocības ar ģeneratoru funkciju iterējamo dabu, ļaujot jums pārvaldāmākā un efektīvākā veidā apstrādāt sarežģītas asinhronās darbības. Šis ceļvedis iedziļinās asinhrono funkciju ģeneratoru pasaulē, izpētot to sintaksi, lietošanas gadījumus un priekšrocības.

Izpratne par asinhrono iterāciju

Pirms iedziļināties asinhrono funkciju ģeneratoros, ir svarīgi saprast asinhronās iterācijas jēdzienu. Tradicionālie JavaScript iteratori darbojas sinhroni, kas nozīmē, ka katra vērtība tiek radīta nekavējoties. Tomēr daudzi reālās dzīves scenāriji ietver asinhronas darbības, piemēram, datu iegūšanu no API vai lasīšanu no faila. Asinhronā iterācija ļauj jums veiksmīgi tikt galā ar šiem scenārijiem.

Asinhronie iteratori pret sinhronajiem iteratoriem

Sinhronie iteratori izmanto metodi next(), kas atgriež objektu ar īpašībām value un done. Īpašība value satur nākamo vērtību secībā, un īpašība done norāda, vai iterators ir sasniedzis beigas.

Savukārt asinhronie iteratori izmanto metodi next(), kas atgriež Promise, kas atrisinās par objektu ar īpašībām value un done. Tas ļauj iteratoram veikt asinhronas darbības pirms nākamās vērtības radīšanas.

Asinhronā iterējamā protokols

Lai izveidotu asinhronu iterējamu objektu, tam ir jāīsteno metode Symbol.asyncIterator. Šai metodei ir jāatgriež asinhronā iteratora objekts. Lūk, vienkāršs piemērs:

            const asyncIterable = {
  [Symbol.asyncIterator]() {
    return {
      i: 0,
      next() {
        if (this.i < 3) {
          return Promise.resolve({ value: this.i++, done: false });
        } else {
          return Promise.resolve({ value: undefined, done: true });
        }
      }
    };
  }
};

(async () => {
  for await (const num of asyncIterable) {
    console.log(num); // Output: 0, 1, 2
  }
})();

            

              
                Copy
              
            
          

Iepazīstinām ar asinhrono funkciju ģeneratoriem

Asinhrono funkciju ģeneratori nodrošina kodolīgāku un salasāmāku veidu, kā izveidot asinhronus iterējamus objektus. Tie apvieno asinhrono funkciju un ģeneratoru funkciju iezīmes.

Sintakse

Asinhronās funkcijas ģenerators tiek definēts, izmantojot async function* sintaksi:

            async function* myAsyncGenerator() {
  // Asynchronous operations and yield statements here
}

            

              
                Copy
              
            
          

• Atslēgvārds async norāda, ka funkcija atgriezīs Promise.
• Sintakse function* norāda, ka tā ir ģeneratora funkcija.
• Atslēgvārds yield tiek izmantots, lai radītu vērtības no ģeneratora. Atslēgvārdu yield var izmantot arī kopā ar atslēgvārdu await, lai atgrieztu vērtības, kas ir asinhronu darbību rezultāts.

Pamata piemērs

            async function* generateNumbers() {
  yield 1;
  yield 2;
  yield 3;
}

(async () => {
  for await (const num of generateNumbers()) {
    console.log(num); // Output: 1, 2, 3
  }
})();

            

              
                Copy
              
            
          

Praktiski lietošanas gadījumi

Asinhrono funkciju ģeneratori ir īpaši noderīgi scenārijos, kas ietver:

• Datu straumēšana: Lielu datu kopu apstrāde pa daļām, izvairoties no atmiņas pārslodzes.
• API lapošana: Efektīva datu iegūšana no API, kas izmanto lapošanu.
• Reāllaika dati: Reāllaika datu plūsmu apstrāde, piemēram, sensoru rādījumi vai akciju cenas.
• Asinhrono uzdevumu rindas: Asinhrono uzdevumu pārvaldība un apstrāde rindā.

Piemērs: datu straumēšana no API

Iedomājieties, ka jums ir jāiegūst liela datu kopa no API, kas atbalsta lapošanu. Tā vietā, lai iegūtu visu datu kopu uzreiz, varat izmantot asinhronās funkcijas ģeneratoru, lai straumētu datus pa daļām.

            async function* fetchPaginatedData(url) {
  let page = 1;
  let hasNext = true;

  while (hasNext) {
    const response = await fetch(`${url}?page=${page}`);
    const data = await response.json();

    if (data.results && data.results.length > 0) {
      for (const item of data.results) {
        yield item;
      }
      page++;
      hasNext = data.next !== null; // Assuming the API returns a 'next' property for pagination
    } else {
      hasNext = false;
    }
  }
}

(async () => {
  const dataStream = fetchPaginatedData('https://api.example.com/data');
  for await (const item of dataStream) {
    console.log(item);
    // Process each item here
  }
})();

            

              
                Copy
              
            
          

Šajā piemērā fetchPaginatedData iegūst datus no API pa lapām. Tas atgriež katru elementu no results masīva. Mainīgais hasNext nosaka, vai ir vēl lapas, ko ielādēt. Cikls for await...of patērē datu plūsmu un apstrādā katru elementu.

Piemērs: reāllaika datu apstrāde

Asinhrono funkciju ģeneratorus var izmantot reāllaika datu plūsmu apstrādei, piemēram, sensoru rādījumiem vai akciju cenām. Tas ļauj apstrādāt datus, tiklīdz tie tiek saņemti, nebloķējot galveno pavedienu.

            async function* generateSensorData() {
  while (true) {
    // Simulate fetching sensor data asynchronously
    const sensorValue = await new Promise(resolve => {
      setTimeout(() => {
        resolve(Math.random() * 100); // Simulate a sensor reading
      }, 1000); // Simulate a 1-second delay
    });

    yield sensorValue;
  }
}

(async () => {
  const sensorStream = generateSensorData();
  for await (const value of sensorStream) {
    console.log(`Sensor Value: ${value}`);
    // Process the sensor value here
  }
})();

            

              
                Copy
              
            
          

Šajā piemērā generateSensorData nepārtraukti ģenerē sensoru rādījumus. Atslēgvārds yield atgriež katru rādījumu. Funkcija setTimeout simulē asinhronu darbību, piemēram, datu iegūšanu no sensora. Cikls for await...of patērē datu plūsmu un apstrādā katru sensora vērtību.

Kļūdu apstrāde

Kļūdu apstrāde ir ļoti svarīga, strādājot ar asinhronām darbībām. Asinhrono funkciju ģeneratori nodrošina dabisku veidu, kā apstrādāt kļūdas, izmantojot try...catch blokus.

            async function* fetchData(url) {
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    const data = await response.json();
    yield data;
  } catch (error) {
    console.error(`Error fetching data: ${error}`);
    // Optionally, yield an error value or re-throw the error
    yield { error: error.message }; // Yielding an error object
  }
}

(async () => {
  const dataStream = fetchData('https://api.example.com/data');
  for await (const item of dataStream) {
    if (item.error) {
      console.log(`Received error: ${item.error}`);
    } else {
      console.log(item);
    }
  }
})();

            

              
                Copy
              
            
          

Šajā piemērā try...catch bloks apstrādā potenciālās kļūdas fetch darbības laikā. Ja rodas kļūda, tā tiek reģistrēta konsolē, un tiek atgriezts kļūdas objekts. Datu plūsmas patērētājs pēc tam var pārbaudīt īpašību error un attiecīgi apstrādāt kļūdu.

Padziļinātas metodes

Vērtību atgriešana no asinhrono funkciju ģeneratoriem

Asinhrono funkciju ģeneratori var arī atgriezt galīgo vērtību, izmantojot priekšrakstu return. Šī vērtība tiek atgriezta, kad ģenerators ir pabeidzis darbu.

            async function* generateSequence(start, end) {
  for (let i = start; i <= end; i++) {
    yield i;
  }
  return 'Sequence complete!';
}

(async () => {
  const sequence = generateSequence(1, 5);
  for await (const num of sequence) {
    console.log(num); // Output: 1, 2, 3, 4, 5
  }
  // To access the return value, you need to use the next() method directly
  const result = await sequence.next();
  console.log(result); // Output: { value: 'Sequence complete!', done: true }
})();

            

              
                Copy
              
            
          

Kļūdu "iemešana" asinhrono funkciju ģeneratoros

Jūs varat arī "iemest" kļūdas asinhronās funkcijas ģeneratorā, izmantojot ģeneratora objekta metodi throw(). Tas ļauj signalizēt par kļūdu no ārpuses un apstrādāt to ģeneratora iekšienē.

            async function* myGenerator() {
  try {
    yield 1;
    yield 2;
    yield 3;
  } catch (error) {
    console.error(`Error caught in generator: ${error}`);
  }
}

(async () => {
  const generator = myGenerator();
  console.log(await generator.next()); // Output: { value: 1, done: false }
  generator.throw(new Error('Something went wrong!')); // Throw an error into the generator
  console.log(await generator.next()); // No output (error is caught)
  console.log(await generator.next()); // Output: { value: undefined, done: true }
})();

            

              
                Copy
              
            
          

Salīdzinājums ar citām asinhronām metodēm

Asinhrono funkciju ģeneratori piedāvā unikālu pieeju asinhronajai programmēšanai, salīdzinot ar citām metodēm, piemēram, Promises un async/await funkcijām.

Promises

Promises ir JavaScript asinhronās programmēšanas pamats. Tie attēlo asinhronas darbības galīgo pabeigšanu (vai neveiksmi). Lai gan Promises ir jaudīgi, tie var kļūt sarežģīti, strādājot ar vairākām asinhronām darbībām, kas jāizpilda noteiktā secībā.

Savukārt asinhrono funkciju ģeneratori nodrošina secīgāku un salasāmāku veidu, kā apstrādāt sarežģītas asinhronās darbplūsmas.

Async/await funkcijas

Async/await funkcijas ir sintaktiskais cukurs pār Promises, padarot asinhrono kodu līdzīgāku sinhronajam kodam pēc izskata un uzvedības. Tās vienkāršo asinhronā koda rakstīšanas un lasīšanas procesu, bet tās pašas par sevi nenodrošina mehānismu asinhrono plūsmu izveidei.

Asinhrono funkciju ģeneratori apvieno async/await funkciju priekšrocības ar ģeneratoru funkciju iterējamo dabu, ļaujot jums efektīvi izveidot un patērēt asinhronās datu plūsmas.

RxJS Observables

RxJS Observables ir vēl viens jaudīgs rīks asinhrono datu plūsmu apstrādei. Observables ir līdzīgi asinhronajiem iteratoriem, bet tie piedāvā plašākas funkcijas, piemēram, operatorus datu plūsmu transformēšanai un apvienošanai.

Asinhrono funkciju ģeneratori ir vienkāršāka alternatīva RxJS Observables pamata asinhrono plūsmu izveidei. Tie ir iebūvēti JavaScript un neprasa nekādas ārējas bibliotēkas.

Labākās prakses

• Lietojiet jēgpilnus nosaukumus: Izvēlieties aprakstošus nosaukumus saviem asinhrono funkciju ģeneratoriem, lai uzlabotu koda lasāmību.
• Apstrādājiet kļūdas: Ieviesiet stabilu kļūdu apstrādi, lai novērstu neparedzētu uzvedību.
• Ierobežojiet tvērumu: Saglabājiet savus asinhrono funkciju ģeneratorus fokusētus uz konkrētu uzdevumu, lai uzlabotu uzturamību.
• Testējiet rūpīgi: Rakstiet vienības testus, lai nodrošinātu, ka jūsu asinhrono funkciju ģeneratori darbojas pareizi.
• Apsveriet veiktspēju: Esiet uzmanīgi attiecībā uz veiktspējas ietekmi, īpaši strādājot ar lielām datu kopām vai reāllaika datu plūsmām.

Noslēgums

JavaScript asinhrono funkciju ģeneratori ir vērtīgs rīks asinhrono datu plūsmu izveidei un patērēšanai. Tie nodrošina kodolīgāku un salasāmāku veidu, kā apstrādāt sarežģītas asinhronas darbības, padarot jūsu kodu uzturamāku un efektīvāku. Izprotot šajā ceļvedī aprakstīto sintaksi, lietošanas gadījumus un labākās prakses, jūs varat izmantot asinhrono funkciju ģeneratoru jaudu, lai veidotu stabilas un mērogojamas lietojumprogrammas.

Neatkarīgi no tā, vai jūs straumējat datus no API, apstrādājat reāllaika datus vai pārvaldāt asinhrono uzdevumu rindas, asinhrono funkciju ģeneratori var palīdzēt jums atrisināt sarežģītas problēmas elegantākā un efektīvākā veidā.

Pieņemiet asinhrono iterāciju, apgūstiet asinhrono funkciju ģeneratorus un atklājiet jaunas iespējas savā JavaScript izstrādes ceļojumā.

Papildu resursi

• MDN Web Docs: async function*
• V8 blogs: Asinhronā iterācija
• JavaScript.info: Asinhronie iteratori un ģeneratori