Asynchrones JavaScript: Versprechen, Asynchron/Warten und Rückrufe

Ursprünglich veröffentlicht auf Makemychance.com

Asynchrone Programmierung ist ein Kernkonzept in JavaScript, das es Ihnen ermöglicht, Aufgaben auszuführen, ohne die Ausführung anderen Codes zu blockieren. Dies ist besonders wichtig, wenn es um Vorgänge geht, deren Ausführung Zeit in Anspruch nimmt, wie z. B. Netzwerkanforderungen, Datei-E/A oder Timer. In diesem Artikel werden wir die drei Haupttechniken für den Umgang mit asynchronem Code in JavaScript untersuchen: Callbacks, Promises und Async/Await.

1. Rückrufe

Rückrufe sind die älteste Möglichkeit, asynchrone Vorgänge in JavaScript abzuwickeln. Ein Callback ist einfach eine Funktion, die als Argument an eine andere Funktion übergeben wird und dann nach Abschluss einer Aufgabe ausgeführt wird.

function fetchData(callback) {
  setTimeout(() => {
    callback("Data received");
  }, 2000);
}

fetchData((message) => {
  console.log(message);
});

Im obigen Beispiel simuliert fetchData eine Netzwerkanfrage mit setTimeout und die Callback-Funktion protokolliert die Nachricht, nachdem die Anfrage abgeschlossen ist.

Rückruf Hölle

Einer der Nachteile der Verwendung von Callbacks ist die berüchtigte „Callback-Hölle“ oder „Pyramide des Untergangs“, bei der mehrere verschachtelte Callbacks das Lesen und Warten des Codes erschweren.

fetchData((message) => {
  console.log(message);
  fetchMoreData((moreData) => {
    console.log(moreData);
    fetchEvenMoreData((evenMoreData) => {
      console.log(evenMoreData);
      // And so on...
    });
  });
});

2. Versprechen

Promises, eingeführt in ES6, bieten einen saubereren Ansatz für die Handhabung asynchroner Aufgaben und helfen dabei, die Herausforderungen tief verschachtelter Rückrufe zu meistern. Im Wesentlichen ist ein Versprechen ein Objekt, das das Ergebnis einer asynchronen Operation symbolisiert, unabhängig davon, ob diese erfolgreich abgeschlossen wird oder fehlschlägt, und eine strukturierte Möglichkeit bietet, mit dem resultierenden Wert umzugehen.

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("Data received");
    }, 2000);
  });
}

fetchData()
  .then((message) => {
    console.log(message);
    return "Next step";
  })
  .then((nextMessage) => {
    console.log(nextMessage);
  })
  .catch((error) => {
    console.error("Error:", error);
  });

In diesem Beispiel gibt fetchData ein Versprechen zurück. Die Methode .then() wird verwendet, um den aufgelösten Wert des Versprechens zu verarbeiten, und .catch() wird verwendet, um etwaige Fehler zu behandeln.

Versprechen verketten

Versprechen können verkettet werden, wodurch der Code lesbarer und wartbarer wird.

fetchData()
  .then((message) => {
    console.log(message);
    return fetchMoreData();
  })
  .then((moreData) => {
    console.log(moreData);
    return fetchEvenMoreData();
  })
  .then((evenMoreData) => {
    console.log(evenMoreData);
  })
  .catch((error) => {
    console.error("Error:", error);
  });

3. Asynchron/Warten

Async/Await, eingeführt in ES8 (2017), ist ein syntaktischer Zucker, der auf Versprechen aufbaut und dafür sorgt, dass asynchroner Code eher wie synchroner Code aussieht und sich so verhält.

async function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("Data received");
    }, 2000);
  });
}

async function processData() {
  try {
    const message = await fetchData();
    console.log(message);
    const moreData = await fetchMoreData();
    console.log(moreData);
    const evenMoreData = await fetchEvenMoreData();
    console.log(evenMoreData);
  } catch (error) {
    console.error("Error:", error);
  }
}

processData();

In diesem Beispiel verwendet die Funktion „processData“ das Schlüsselwort „await“, um auf die Auflösung des von fetchData zurückgegebenen Versprechens zu warten. Dies macht den Code im Vergleich zur Versprechensverkettung viel sauberer und einfacher zu befolgen.

Fehlerbehandlung

Die Fehlerbehandlung in async/await erfolgt über try...catch-Blöcke und bietet eine einfache Möglichkeit zur Fehlerbehandlung, ohne dass eine .catch()-Methode erforderlich ist.

async function processData() {
  try {
    const data = await fetchData();
    console.log(data);
  } catch (error) {
    console.error("Error:", error);
  }
}

Das obige ist der detaillierte Inhalt vonAsynchrones JavaScript: Versprechen, Asynchron/Warten und Rückrufe. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!