asynchron / warten

async/await ist im Vergleich zu Versprechungen eine neuere Art, asynchronen Code zu schreiben. Die Hauptvorteile von async/await sind eine verbesserte Lesbarkeit und die Vermeidung von Promise Chaining. Versprechen können lang und schwer lesbar werden und tief verschachtelte Rückrufe enthalten, die schwer zu debuggen sind.

Beispiel

Erinnern Sie sich an unseren Abruf von früher.

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error))
  .finally(() => console.log('All done'));

Mit async/await kann der Code so umgestaltet werden, dass er wie folgt aussieht:

async function fetchData() {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error:', error);
  } finally {
    console.log('All done');
  }
}

fetchData();

Obwohl es möglicherweise ein paar Zeilen mehr Code sind, ist diese Version einfacher zu lesen, da sie einer normalen synchronen Funktion ähnelt. Wenn die Funktionen in den .then()-Anweisungen außerdem komplexer wären, wären die Lesbarkeit und die Debugbarkeit noch stärker beeinträchtigt. Das Async/Await-Beispiel ist weitaus klarer.

Beispiel 2: Essen in einem Restaurant bestellen

Struktur von async/await

Eine Async/Await-Funktion besteht aus zwei wesentlichen Teilen: Async und Wait. Das Schlüsselwort „async“ wird vor einer Funktionsdeklaration hinzugefügt und „await“ wird verwendet, wenn eine asynchrone Aufgabe beginnt.

Lassen Sie uns dies anhand eines Beispiels einer Essensbestellung in einem Restaurant veranschaulichen:

// Simulate the order process with async/await
async function foodOrder() {
  console.log("Ordering food...");
  await new Promise(resolve => setTimeout(resolve, 2000)); // Wait 2 seconds for food to be prepared
  return "Your food is ready!";
}

// Simulate the eating process
function eatFood(order) {
  console.log(order); // This logs "Your food is ready!"
  console.log("Enjoying the meal!");
}

// Simulate continuing the conversation
function continueConversation() {
  console.log("While waiting, you continue chatting with friends...");
}

async function orderFood() {
  console.log("You've arrived at the restaurant.");
  const order = await foodOrder(); // Place the order and wait for it to be ready
  continueConversation(); // Chat while waiting
  eatFood(order); // Eat the food once it arrives
}

orderFood();

Die Ausgabe wird sein

You've arrived at the restaurant.
Ordering food...
While waiting, you continue chatting with friends...
Your food is ready!
Enjoying the meal!