Javascript Promises vs Async Await: Care Este Diferența?

În lumea dezvoltării web, gestionarea operațiunilor asincrone este o provocare constantă. Din fericire, JavaScript vine cu două tehnici puternice pentru a rezolva această problemă: Promises și Async/Await. Aceste concepte au revoluționat modul în care gestionăm funcțiile asincrone, dar mulți dezvoltatori încă se întreabă: care este diferența între ele și care ar trebui să le folosesc? În acest articol, vom explora diferențele dintre Promises și Async/Await și vom analiza exemple practice pentru a înțelege mai bine cum funcționează fiecare dintre ele.

Ce sunt Promises în JavaScript?

Un Promise în JavaScript este un obiect care reprezintă rezultatul final al unei operațiuni asincrone. Practic, un Promise poate fi în 3 stări:

• Pending (În așteptare): Operațiunea asincronă nu s-a finalizat încă.
• Resolved (Rezolvat): Operațiunea asincronă s-a încheiat cu succes.
• Rejected (Respins): Operațiunea asincronă a eșuat.

Promise este folosit pentru a gestiona asynchronismul, permitându-ți să adaugi funcții de succes (then) și funcții de eroare (catch) pentru a manipula rezultatele respectivei operațiuni.

Exemplu de Promise

Iată un exemplu simplu de Promise care returnează un mesaj după o întârziere de 2 secunde:

let promise = new Promise(function(resolve, reject) {
  setTimeout(function() {
    resolve("Operațiunea a avut succes!");
  }, 2000);
});

promise.then(function(value) {
  console.log(value); // Va afișa "Operațiunea a avut succes!" după 2 secunde
}).catch(function(error) {
  console.log(error);
});

În acest exemplu, Promise-ul va trece de la starea "Pending" la "Resolved" după 2 secunde, iar then va fi apelat cu mesajul de succes. Dacă există o eroare, va fi apelat catch.

Ce este Async/Await?

Async și Await sunt două cuvinte cheie în JavaScript care sunt folosite pentru a simplifica gestionarea operațiunilor asincrone, făcând codul mai ușor de citit și de înțeles. Ele sunt construite pe baza Promises, dar cu o sintaxă mai curată și mai ușor de urmărit.

Cuvântul cheie async este folosit pentru a marca o funcție ca fiind asincronă, iar await este utilizat pentru a aștepta finalizarea unui Promise înainte de a continua execuția codului. Aceasta permite scrierea unui cod asincron care arată și se comportă ca și cum ar fi secvențial.

Exemplu de Async/Await

Iată același exemplu dinainte, dar de data aceasta folosind Async/Await:

async function myFunction() {
  let message = await new Promise(function(resolve, reject) {
    setTimeout(function() {
      resolve("Operațiunea a avut succes!");
    }, 2000);
  });

  console.log(message); // Va afișa "Operațiunea a avut succes!" după 2 secunde
}

myFunction();

În acest exemplu, funcția myFunction este marcată cu cuvântul cheie async, iar await este folosit pentru a aștepta finalizarea Promise-ului. Observă cum codul este mai simplu și mai ușor de citit decât folosirea directă a metodei then.

Diferențele Cheie între Promises și Async/Await

Deși ambele abordări sunt utilizate pentru a lucra cu operațiuni asincrone, există câteva diferențe importante între Promises și Async/Await:

• Sintaxa: Async/Await este mai ușor de citit și de înțeles pentru majoritatea dezvoltatorilor, oferind un flux mai natural de control al execuției. Promises necesită adesea mai multe linii de cod și se bazează pe metodele then și catch.
• Tratamentul erorilor: Atât Promises, cât și Async/Await permit tratarea erorilor, dar Async/Await face acest lucru mult mai simplu, utilizând blocuri try/catch pentru a captura excepțiile, ceea ce face codul mai curat și mai ușor de urmărit.
• Controlul execuției: Async/Await permite ca execuția să fie întreruptă la punctul în care se așteaptă rezultatul unui Promise, iar restul codului continuă abia după finalizarea acelei operațiuni. Acest lucru face ca Async/Await să fie mai ușor de folosit în scenarii mai complexe, cum ar fi manipularea mai multor operațiuni asincrone.

Când să folosești Promises și când să folosești Async/Await?

Atât Promises, cât și Async/Await au aplicații valabile, iar alegerea între ele depinde de complexitatea codului tău și preferințele personale. Iată câteva sugestii:

• Folosește Promises atunci când vrei să utilizezi mai multe operațiuni asincrone într-o manieră mai flexibilă, cum ar fi manipularea mai multor Promises în paralel sau manipularea fluxurilor de date.
• Folosește Async/Await atunci când codul tău este mai secvențial și vrei un flux de control mai natural, care să fie mai ușor de citit și de întreținut.

Exemple practice: Promises vs Async/Await

Să vedem un exemplu practic în care avem mai multe cereri HTTP care trebuie să fie executate într-o ordine specifică. Vom compara implementarea folosind Promises și Async/Await.

Exemplu cu Promises:

fetch('https://api.example.com/data1')
  .then(response => response.json())
  .then(data => {
    console.log(data);
    return fetch('https://api.example.com/data2');
  })
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.log('Eroare:', error);
  });

Exemplu cu Async/Await:

async function fetchData() {
  try {
    let response1 = await fetch('https://api.example.com/data1');
    let data1 = await response1.json();
    console.log(data1);

    let response2 = await fetch('https://api.example.com/data2');
    let data2 = await response2.json();
    console.log(data2);
  } catch (error) {
    console.log('Eroare:', error);
  }
}

fetchData();

Observăm că în cazul Async/Await, codul este mult mai ușor de citit și de înțeles, deoarece fluxul de control este mai natural și nu este necesar să lucrăm cu mai multe then.

Concluzie

Atât Promises, cât și Async/Await sunt instrumente puternice pentru gestionarea operațiunilor asincrone în JavaScript. Fiecare are propriile sale avantaje și cazuri de utilizare, iar alegerea între ele depinde de complexitatea aplicației tale și de preferințele personale. Async/Await a devenit rapid preferatul dezvoltatorilor datorită sintaxei sale mai clare și mai ușor de întreținut, dar Promises rămân esențiale în anumite situații. Încearcă-le pe amândouă și alege-l pe cel care se potrivește cel mai bine nevoilor tale!