Asynchrones JavaScript beherrschen: Versprechen, Async/Await und Rückrufe erklärt

JavaScript ist sowohl vielseitig als auch reaktionsschnell; Wenn man weiß, wie man Asynchronität nutzt, bringt man das Beste heraus. Vom Abrufen von API-Ergebnissen bis zum Laden von Dateien ermöglicht uns die asynchrone Entwicklung, mehrere Dinge gleichzeitig zu erledigen, ohne sie zu blockieren. Wir werden drei verschiedene Ansätze zum Schreiben von asynchronem Code in JavaScript untersuchen: Promises, Async/Await und Callbacks – verstehen Sie, wann Sie sie verwenden und wie Sie sie implementieren.

Warum asynchrones JavaScript?

Stellen Sie sich vor, dass Ihre Webanwendung jedes Mal einfriert, wenn sie Daten von einer API abruft oder auf den Download einer großen Bilddatei wartet. Nicht der beste Fall, oder? Hier kommt asynchrones JavaScript ins Spiel. Es lässt Ihr Programm weiterlaufen, während es auf den Abschluss einiger Aufgaben wartet, und sorgt so für eine viel flüssigere Benutzererfahrung.

1. Rückrufe verstehen Ein Rückruf ist eine Funktion, die als Argument an eine andere Funktion übergeben wird und es Ihnen ermöglicht, eine Funktion auszuführen, sobald eine asynchrone Aufgabe abgeschlossen ist. Rückrufe gehören zu den ältesten Techniken zur Handhabung asynchroner Vorgänge in JavaScript.

Beispiel: Einfacher Rückruf

Funktion fetchData(callback) {
setTimeout(() => {
console.log("Daten abgerufen");
callback();
}, 2000);
}

Funktion ProcessData() {
console.log("Daten werden verarbeitet.");
}

fetchData(processData);
In diesem Beispiel wartet fetchData zwei Sekunden und ruft dann ProcessData auf, sobald es fertig ist. Dies funktioniert in einfachen Szenarien einwandfrei, aber wenn Sie anfangen, mehrere Rückrufe zu stapeln, geraten Sie möglicherweise in die „Rückrufhölle“, in der tief verschachtelte Rückrufe das Lesen und Warten Ihres Codes erschweren.

Tipp: Wenn Sie mehr als drei verschachtelte Rückrufe haben, sollten Sie einen Wechsel zu Promises oder Async/Await in Betracht ziehen.

1. Versprechen: Eine bessere Möglichkeit, mit Async umzugehen Ein Promise ist ein Objekt, das den eventuellen Abschluss (oder Misserfolg) eines asynchronen Vorgangs darstellt. Anstatt eine Verschachtelung zu verwenden, stellen Promises die Methoden .then() und .catch() bereit, die die Lesbarkeit verbessern.

Beispiel: Versprechen verwenden

Funktion fetchData() {
neues Versprechen zurückgeben((auflösen, ablehnen) => {
setTimeout(() => {
lösen("Daten erfolgreich abgerufen!");
}, 2000);
});
}

fetchData()
.then((message) => {
console.log(message);
return „Daten werden verarbeitet.“;
})
.then((processingMessage) => {
console.log(processingMessage);
})
.catch((error) => {
console.error("Fehler:", Fehler);
});
Hier kann mit jedem .then() eine Aufgabe sequentiell bearbeitet werden, was leichter zu lesen sein kann als tief verschachtelte Rückrufe. Versprechen behandeln Fehler auch eleganter und ermöglichen Ihnen, sie an einem Ort mit .catch() zu behandeln.

Tipp: Wenden Sie Promises an, wenn Sie mehrere Aufgaben in einer Reihenfolge nacheinander ausführen müssen, wobei die vorherige abgeschlossen werden muss.

1. Async/Await: Der moderne Ansatz In ES8 gibt es eine Async- und Wait-Syntax, die eine noch sauberere Möglichkeit für die Arbeit mit Promises bietet. Damit können Sie asynchronen Code genauso schreiben, wie er synchron wäre, und sind daher viel einfacher zu lesen.

Beispiel: Async/Warten

asynchrone Funktion fetchData() {
versuche es mit {
const data = waiting new Promise((resolve) =>
setTimeout(() => discover("Daten erfolgreich abgerufen!"), 2000);
});
console.log(data);

const processMessage = await new Promise((resolve) => {
  setTimeout(() => resolve("Processing data."), 1000);
});
console.log(processMessage);

} Catch (Fehler) {
console.error("Fehler:", Fehler);
}
}

fetchData();
Mit „async“ und „await“ vermeiden Sie die Verkettung von .then()-Aufrufen, sodass der Code dem synchronen Code sehr ähnlich sieht. Dies ist eine hervorragende Vorgehensweise für die Lesbarkeit, insbesondere wenn die beteiligten Vorgänge komplex sind.

Best Practice: Es ist gut lesbar und daher immer der beste Ansatz, wenn und wo möglich in Ihrer modernen JavaScript-Anwendung Async/Await zu verwenden.

Wo welche zu verwenden ist

Rückrufe: Für kleine Aufgaben verwenden, die nicht komplex sind und bei denen die Lesbarkeit kein Problem darstellt. Wird selten für einfache asynchrone Aufrufe verwendet.

Versprechen: Es ist perfekt für die Fehlerbehandlung und sequentielle Prozesse geeignet. Mit Versprechen können Sie unübersichtlichen Code mit tief verschachtelten Rückrufen vermeiden.

Async/Await: Bessere Lesbarkeit und saubererer Code, wenn es darum geht, Vorgänge in einer Sequenz auszuführen.

Abschließende Tipps zur Beherrschung von asynchronem JavaScript
Probieren Sie jede Methode aus: Je mehr Sie jede Methode üben, desto besser verstehen Sie die asynchrone Programmierung und wissen, wann Sie welche verwenden sollten.

Behandeln Sie Fehler mit der gebotenen Sorgfalt: Verwenden Sie sowohl in Promise als auch in Async/Await die Fehlerbehandlung entweder mit .catch() oder try.catch.

Leistungsoptimierung: Für Aufgaben, die parallel ausgeführt werden können, verwenden Sie Promise.all, um sie parallel auszuführen.

Bereit für einen tiefen Tauchgang? Versuchen Sie, asynchrone Techniken in Ihren Projekten zu implementieren, um den Unterschied zu sehen, den sie bewirken. Die Beherrschung der asynchronen Programmierung bringt Ihre JavaScript-Kenntnisse auf die nächste Stufe und hilft Ihnen bei der Erstellung eleganter, reaktionsfähiger Anwendungen.

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