Was ist der Unterschied zwischen der Verwendung von Promise und der Syntax async/await?

Promise stellt ein Objekt dar, das den Abschluss oder die Ablehnung einer asynchronen Operation widerspiegelt. Es verwaltet asynchrone Flüsse mit Hilfe von Callbacks .then() und .catch().

async/await ist ein syntaktischer Zucker über Promise, der asynchronen Code lesbarer und dem synchronen Code ähnlicher macht. Eine als async gekennzeichnete Funktion gibt immer ein Promise zurück. Der Operator await kann nur innerhalb von async-Funktionen verwendet werden und pausiert die Ausführung der Funktion, bis das Promise erfüllt oder abgelehnt wird, und gibt dann das Ergebnis zurück oder löst eine Ausnahme aus.

Aspekt	Promise	Async/Await
Lesbarkeit	Erfordert Verkettungen .then() und .catch()	Ähnlich wie synchroner Code, linearer Fluss
Fehlerbehandlung	Verwendet .catch()	Verwendet try...catch-Blöcke
Ausführungsfluss	Wird durch Callbacks gesteuert	Pausiert/fortsetzt die Funktion
Rückgabewert	Promise	Promise (für async-Funktion) oder Ergebnis von Promise (für await)
Abhängigkeit	Eigenständiger Mechanismus	Basierend auf Promise

Beispiel mit Promise:

// Beispiel mit Promise
function fetchDataPromise() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("Daten empfangen (Promise)");
    }, 1000);
  });
}

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

Beispiel mit async/await:

// Beispiel mit async/await
function fetchDataAsync() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("Daten empfangen (async/await)");
    }, 1000);
  });
}

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

showData();