Synchronisierte Programmierung ist ein entscheidendes Konzept in JavaScript, das es Ihnen ermöglicht, Vorgänge wie API-Aufrufe, Dateilesen und Timer zu verarbeiten, ohne den Hauptthread zu blockieren. Wenn Sie mit dem Konzept noch nicht vertraut sind oder Ihr Verständnis festigen möchten, ist dieser Beitrag genau das Richtige für Sie!
Bei der synchronen Programmierung werden Aufgaben nacheinander ausgeführt, was zu einer ineffizienten Nutzung von Ressourcen führen kann, insbesondere bei zeitaufwändigen Vorgängen (wie Netzwerkanfragen). Durch die asynchrone Programmierung kann Ihr Code ausgeführt werden, während er auf den Abschluss dieser Vorgänge wartet, wodurch Leistung und Reaktionsfähigkeit verbessert werden.
Schlüsselkonzepte
Lassen Sie uns jedes dieser Konzepte aufschlüsseln.
1. Rückrufe
Ein Callback ist eine Funktion, die als Argument an eine andere Funktion übergeben und ausgeführt wird, sobald eine Aufgabe abgeschlossen ist. Auch wenn Rückrufe einfach sind, können sie zur „Rückrufhölle“ führen, wenn Sie verschachtelte Funktionen haben.
function fetchData(callback) { setTimeout(() => { const data = "Data received!"; callback(data); }, 1000); } fetchData((data) => { console.log(data); // Output: Data received! });
**2. Versprechen
**Versprechen bieten eine sauberere Alternative zu Rückrufen. Ein Versprechen stellt einen Wert dar, der jetzt, in der Zukunft oder nie verfügbar sein kann. Es kann einen von drei Status haben: ausstehend, erfüllt oder abgelehnt.
So verwenden Sie Versprechen:
function fetchData() { return new Promise((resolve, reject) => { setTimeout(() => { const data = "Data received!"; resolve(data); // or reject(error); }, 1000); }); } fetchData() .then((data) => { console.log(data); // Output: Data received! }) .catch((error) => { console.error(error); });
**3. Asynchron/Warten
Async und Wait wurden in ES2017 eingeführt und bieten eine besser lesbare Möglichkeit, mit Versprechen zu arbeiten. Sie definieren eine Funktion als asynchron und können innerhalb dieser Funktion „await“ verwenden, um die Ausführung anzuhalten, bis ein Versprechen aufgelöst ist.
async function fetchData() { return new Promise((resolve) => { setTimeout(() => { resolve("Data received!"); }, 1000); }); } async function getData() { try { const data = await fetchData(); console.log(data); // Output: Data received! } catch (error) { console.error(error); } } getData();
Bei der Arbeit mit asynchronem Code ist eine ordnungsgemäße Fehlerbehandlung unerlässlich. Mit Versprechen können Sie.catch() verwenden, und mit async/await können Sie try/catch-Blöcke verwenden.
Lassen Sie uns dies in einen Zusammenhang bringen. Hier ist ein Beispiel für das Abrufen von Daten von einer API mithilfe von fetch, das ein Versprechen zurückgibt:
async function fetchUserData(userId) { try { const response = await fetch(`https://jsonplaceholder.typicode.com/users/${userId}`); if (!response.ok) { throw new Error("Network response was not ok"); } const userData = await response.json(); console.log(userData); } catch (error) { console.error("Fetch error:", error); } } fetchUserData(1);
Asynchrone Programmierung in JavaScript ermöglicht Ihnen das Schreiben von effizientem und reaktionsfähigem Code. Wenn Sie Callbacks, Promises und Async/Warten beherrschen, sind Sie bestens gerüstet, um asynchrone Vorgänge elegant abzuwickeln.
Das obige ist der detaillierte Inhalt vonBeherrschen der asynchronen Programmierung in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!