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. Operatorulawaitpoate fi folosit doar în interiorul funcțiilorasyncș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();