Versprechen und Rückrufe in JavaScript verstehen

Wichtige Fragen und Antworten für Zertifizierungstests

1. Was ist eine Callback-Funktion und wie unterscheidet sie sich von einer regulären Funktion?

   • Eine Rückruffunktion wird als Argument an eine andere Funktion übergeben und aufgerufen, um asynchrone Vorgänge abzuwickeln. Im Gegensatz zu regulären Funktionen sind Rückrufe so konzipiert, dass sie nach Abschluss einer bestimmten Aufgabe ausgeführt werden.

2. Wie verbessern Promises die Lesbarkeit des Codes und verwalten asynchrone Vorgänge im Vergleich zu Rückrufen?

   • Versprechen ermöglichen eine Verkettung und eine bessere Fehlerbehandlung, was zu besser lesbarem und wartbarerem Code führt. Sie helfen dabei, tief verschachtelte Strukturen zu vermeiden, die als „Callback-Hölle“ bekannt sind.

3. Was sind die Hauptzustände eines Versprechens und wie erfolgt der Übergang zwischen diesen Zuständen?

   • Die Hauptzustände sind: Ausstehend (Ausgangszustand), Erfüllt (Vorgang erfolgreich abgeschlossen) und Abgelehnt (Vorgang fehlgeschlagen). Ein Versprechen wechselt von „Ausstehend“ zu „Erfüllt“ oder „Abgelehnt“.

4. Wie können Sie mit Promises Fehler behandeln und wie ist dies im Vergleich zur Fehlerbehandlung mit Rückrufen?

   • Promises bieten eine Catch-Methode zur optimierten Behandlung von Fehlern, während die Fehlerbehandlung mit Rückrufen häufig die Übergabe von Fehlerobjekten und mehrere Prüfungen in verschachtelten Rückrufen erfordert.

5. Was ist der Unterschied zwischen Promise.all und Promise.race und wann würden Sie beide verwenden?

   • Promise.all wird aufgelöst, wenn alle Eingabeversprechen aufgelöst werden, was es nützlich macht, auf den Abschluss mehrerer asynchroner Vorgänge zu warten. Promise.race wird aufgelöst, sobald eines der Eingabeversprechen aufgelöst wird. Dies ist nützlich für Szenarien, in denen das Ergebnis des ersten abgeschlossenen Vorgangs benötigt wird.

6. Wie vereinfacht die Async/Await-Syntax die Arbeit mit Promises und welche Regeln gelten für die Verwendung von Wait?

   • Die async/await-Syntax ermöglicht das synchrone Schreiben von asynchronem Code und verbessert so die Lesbarkeit. „await“ kann nur innerhalb asynchroner Funktionen verwendet werden und unterbricht die Ausführung, bis das Versprechen aufgelöst wird.

Einführung

In der sich entwickelnden JavaScript-Landschaft ist die effiziente Verwaltung asynchroner Vorgänge der Schlüssel zum Erstellen leistungsfähiger Webanwendungen. Während Rückrufe der ursprüngliche Ansatz waren, hat Promises eine strukturiertere und lesbarere Möglichkeit zur Handhabung asynchroner Aufgaben eingeführt. Dieser Blog befasst sich mit den Feinheiten der Verwendung von Promises im Vergleich zu Callbacks, vorausgesetzt, Sie verfügen bereits über ein grundlegendes Verständnis dieser Konzepte.

Vorteile von Versprechen gegenüber Rückrufen

Verbesserte Lesbarkeit und Wartbarkeit

Obwohl Rückrufe funktionsfähig sind, führen sie oft zu tief verschachtelten Strukturen, die als „Callback-Hölle“ bekannt sind, was das Lesen und Warten des Codes erschwert.

Beispiel einer Callback-Hölle:

fetchData(function(response1) {
  fetchMoreData(response1, function(response2) {
    fetchEvenMoreData(response2, function(response3) {
      console.log(response3);
    });
  });
});

Mit Versprechen verbessert:

fetchData()
  .then(response1 => fetchMoreData(response1))
  .then(response2 => fetchEvenMoreData(response2))
  .then(response3 => console.log(response3))
  .catch(error => console.error(error));

Fehlerbehandlung

Bei Rückrufen kann die Fehlerbehandlung umständlich werden, da Sie Fehlerobjekte übergeben und diese auf jeder Ebene behandeln müssen.

Fehlerbehandlung mit Rückrufen:

function fetchData(callback) {
  setTimeout(() => {
    if (/* error condition */) {
      callback(new Error('An error occurred'), null);
    } else {
      callback(null, 'data');
    }
  }, 1000);
}

fetchData((error, data) => {
  if (error) {
    console.error(error);
  } else {
    console.log(data);
  }
});

Fehlerbehandlung mit Versprechen:

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (/* error condition */) {
        reject(new Error('An error occurred'));
      } else {
        resolve('data');
      }
    }, 1000);
  });
}

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

Erweiterte Promise-Methoden

Versprochen.allen

Promise.all ist nützlich, wenn Sie warten müssen, bis mehrere asynchrone Vorgänge abgeschlossen sind, bevor Sie fortfahren.

Beispiel:

const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'foo');
});

Promise.all([promise1, promise2, promise3]).then(values => {
  console.log(values); // [3, 42, "foo"]
});

Versprechen. Rennen

Promise.race ist von Vorteil, wenn Sie das Ergebnis der schnellsten Operation benötigen.

Beispiel:

const promise1 = new Promise((resolve, reject) => {
  setTimeout(resolve, 500, 'one');
});

const promise2 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'two');
});

Promise.race([promise1, promise2]).then(value => {
  console.log(value); // "two"
});

Vereinfachung von asynchronem Code mit async/await

Mit der async/await-Syntax können Sie asynchronen Code schreiben, der synchron aussieht, was die Lesbarkeit verbessert und die Komplexität der Verkettung von Versprechen verringert.

Beispiel:

async function fetchData() {
  return 'data';
}

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

processData();

Abschluss

Während Callbacks den Grundstein für die Handhabung asynchroner Vorgänge in JavaScript legten, haben Promises die Lesbarkeit, Wartbarkeit und Fehlerbehandlungsfähigkeiten von asynchronem Code erheblich verbessert. Für die moderne JavaScript-Entwicklung ist es von entscheidender Bedeutung, zu verstehen, wie und wann diese Tools effektiv eingesetzt werden können. Mit Promises und der Async/Await-Syntax können Entwickler saubereren, besser verwaltbaren Code schreiben und so den Weg für robustere Anwendungen ebnen.