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

Asynchrones JavaScript

Asynchrones JavaScript ermöglicht die Ausführung von Aufgaben unabhängig vom Hauptthread und stellt so sicher, dass die Anwendung reaktionsfähig und effizient bleibt. Dies ist besonders wichtig für die Verarbeitung von Vorgängen wie API-Aufrufen, Dateilesen oder Verzögerungen.

---

1. Synchroner vs. asynchroner Code

Synchroner Code:

• Führt Zeile für Zeile nacheinander aus.
• Blockiert nachfolgende Vorgänge, bis der aktuelle Vorgang abgeschlossen ist.

Beispiel:

console.log("Start");
console.log("End");
// Output:
// Start
// End

Asynchroner Code:

• Ermöglicht die Fortsetzung anderer Vorgänge, während auf den Abschluss einer Aufgabe gewartet wird.
• Verwendet Rückrufe, Versprechen oder Async/Warten, um Ergebnisse zu verarbeiten.

Beispiel:

console.log("Start");
setTimeout(() => {
  console.log("Async Task");
}, 2000);
console.log("End");
// Output:
// Start
// End
// Async Task

---

2. Asynchrone Programmiermethoden

a. Rückrufe

Ein Rückruf ist eine Funktion, die als Argument an eine andere Funktion übergeben und nach Abschluss einer asynchronen Aufgabe ausgeführt wird.

Beispiel:

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

fetchData((data) => {
  console.log(data); // Output: Data fetched!
});

Nachteile:

• Führt zur „Callback-Hölle“, wenn mehrere asynchrone Vorgänge verkettet werden.

b. Versprechen

Ein Versprechen stellt einen Wert dar, der jetzt, in der Zukunft oder nie verfügbar sein kann.

Zustände eines Versprechens:

• Ausstehend: Ausgangszustand.
• Erfüllt: Erfolgreich abgeschlossen.
• Abgelehnt: Fehlgeschlagen.

Ein Versprechen geben:

const fetchData = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Data fetched!");
  }, 2000);
});

fetchData.then((data) => {
  console.log(data); // Output: Data fetched!
});

Umgang mit Fehlern:

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

c. Asynchron/Warten

Async und Wait bieten eine besser lesbare Syntax für die Arbeit mit Versprechen.

Beispiel:

async function fetchData() {
  const data = await new Promise((resolve) => {
    setTimeout(() => resolve("Data fetched!"), 2000);
  });
  console.log(data); // Output: Data fetched!
}

fetchData();

Fehlerbehandlung:

async function fetchData() {
  try {
    const data = await new Promise((resolve, reject) => {
      reject("Error fetching data!");
    });
    console.log(data);
  } catch (error) {
    console.error(error); // Output: Error fetching data!
  }
}
fetchData();

---

3. Asynchrone Anwendungsfälle

a. API-Aufrufe mit Fetch

Die Fetch-API ist eine moderne Möglichkeit, HTTP-Anfragen zu stellen.

async function getData() {
  const response = await fetch("https://jsonplaceholder.typicode.com/posts/1");
  const data = await response.json();
  console.log(data);
}
getData();

b. Ereignis-Listener

Asynchrones Verhalten bei der Ereignisbehandlung.

document.getElementById("button").addEventListener("click", () => {
  setTimeout(() => {
    console.log("Button clicked!");
  }, 1000);
});

c. Timer

Verwenden von setTimeout und setInterval für Verzögerungen.

setTimeout(() => console.log("Timeout executed!"), 2000);

---

4. Die Ereignisschleife

Die Ereignisschleife ist der Mechanismus, der asynchrone Vorgänge in JavaScript verwaltet. Aufgaben werden in der folgenden Reihenfolge in die Warteschlange gestellt und ausgeführt:

1. Aufrufstapel: Führt synchronen Code aus.
2. Aufgabenwarteschlange: Führt asynchrone Rückrufe aus (z. B. setTimeout).
3. Mikrotask-Warteschlange: Führt versprochene Auflösungen aus.

Beispiel:

console.log("Start");
console.log("End");
// Output:
// Start
// End

---

5. Häufige Fallstricke

1. Vergessen, mit Fehlern umzugehen:

   • Verwenden Sie immer .catch() oder try/catch für Versprechen.

2. Blockieren des Hauptthreads:

   • Vermeiden Sie lang laufende synchrone Aufgaben.

3. Callback Hell:

   • Verwenden Sie stattdessen Versprechen oder Async/Await.

---

6. Zusammenfassung

Technique	Description
Callbacks	Functions executed after async tasks.
Promises	Chained mechanism for async tasks.
Async/Await	Cleaner syntax for handling promises.

Das Verständnis und die Nutzung der asynchronen Programmierung in JavaScript ist entscheidend für die Erstellung reaktionsfähiger und effizienter Webanwendungen. Durch die Beherrschung von Rückrufen, Versprechen und Asynchronität/Warten können Entwickler asynchrone Aufgaben effektiv verwalten.

Hallo, ich bin Abhay Singh Kathayat!
Ich bin ein Full-Stack-Entwickler mit Fachwissen sowohl in Front-End- als auch in Back-End-Technologien. Ich arbeite mit einer Vielzahl von Programmiersprachen und Frameworks, um effiziente, skalierbare und benutzerfreundliche Anwendungen zu erstellen.
Sie können mich gerne unter meiner geschäftlichen E-Mail-Adresse erreichen: kaashshorts28@gmail.com.

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