Sobes.tech
Middle

Vorbește-mi despre principiile asincronicității în JavaScript.

sobes.tech AI

Răspuns de la AI

Principiile de asincronie în JavaScript se bazează pe un model de execuție cu un singur fir, unde sarcinile care pot dura mult timp (de exemplu, solicitări de rețea, temporizatoare) nu blochează firul principal, permițând executarea altor acțiuni. Acest lucru se realizează prin:

  • Event Loop (Bucla de evenimente): Un mecanism care verifică constant coada de mesaje și execută sarcinile din ea. Când o operație asincronă se finalizează, callback-ul său este plasat în coada de sarcini.
  • Funcții callback: Funcții transmise ca argumente altor funcții și executate după finalizarea operației asincrone.
  • Promises (Promisiuni): Obiecte care reprezintă o valoare finală a unei operații asincrone, care poate fi rezolvată (fulfilled) sau respinsă (rejected). Facilitează lucrul cu cod asincron, evitând "callback hell".
  • Async/Await: Zahăr sintactic peste promisiuni, care permite scrierea de cod asincron într-un stil mai lizibil și sincron. Funcțiile marcate cu async întotdeauna returnează o promisiune. Operatorul await poate fi folosit doar în interiorul funcțiilor async și întrerupe execuția până când promisiunea este rezolvată.

Compararea abordărilor:

Abordare Lizibilitate Tratarea erorilor Executarea paralelă
Callbacks Scăzută Complexă Poate fi ne-trivială
Promises Medie Convenabil .all(), .race()
Async/Await Ridicată Convenabil (try/catch) Devine puțin mai complex

Exemplu de utilizare a promisiunilor:

fetch('/api/data') // Operație asincronă
  .then(response => response.json()) // Tratarea cu succes
  .then(data => console.log(data)) // Procesarea datelor
  .catch(error => console.error('Eroare:', error)); // Tratarea erorilor

Exemplu de utilizare a Async/Await:

async function fetchData() {
  try {
    const response = await fetch('/api/data'); // Așteptarea promisiunii
    const data = await response.json(); // Așteptarea promisiunii
    console.log(data);
  } catch (error) {
    console.error('Eroare:', error); // Tratarea erorilor
  }
}
fetchData();