Jaka jest różnica między używaniem Promise a składnią async/await?

Promise reprezentuje obiekt odzwierciedlający końcowe zakończenie lub odrzucenie operacji asynchronicznej. Zarządza przepływami asynchronicznymi za pomocą callbacków .then() i .catch().

async/await to cukier składniowy nad Promise, który czyni kod asynchroniczny bardziej czytelnym i podobnym do synchronicznego. Funkcja oznaczona jako async zawsze zwraca Promise. Operator await można używać tylko wewnątrz funkcji async i wstrzymuje wykonanie funkcji do czasu rozwiązania lub odrzucenia Promise, zwracając jego wynik lub generując wyjątek.

Aspekt	Promise	Async/Await
Czytelność	Wymaga łańcuchów .then() i .catch()	Podobny do kodu synchronicznego, liniowy przepływ
Obsługa błędów	Używa .catch()	Używa bloków try...catch
Przepływ wykonania	Zarządzany przez callbacki	Wstrzymuje/wznawia funkcję
Wartość zwracana	Promise	Promise (dla funkcji async) lub wynik Promise (dla await)
Zależność	Samodzielny mechanizm	Opiera się na Promise

Przykład z Promise:

// Przykład z Promise
function fetchDataPromise() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("Dane otrzymane (Promise)");
    }, 1000);
  });
}

fetchDataPromise()
  .then(data => console.log(data))
  .catch(error => console.error(error));

Przykład z async/await:

// Przykład z async/await
function fetchDataAsync() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("Dane otrzymane (async/await)");
    }, 1000);
  });
}

async function showData() {
  try {
    const data = await fetchDataAsync();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

showData();