Versprechen in JavaScript und React Native: Erstellung, Verwendung und häufige Szenarien

Die Handhabung asynchroner Aufgaben ist in JavaScript von entscheidender Bedeutung, insbesondere in Umgebungen wie React Native, in denen Datenabruf, Animationen und Benutzerinteraktionen nahtlos funktionieren müssen. Versprechen bieten eine leistungsstarke Möglichkeit, asynchrone Vorgänge zu verwalten und den Code besser lesbar und wartbar zu machen. In diesem Blog erfahren Sie, wie Sie Versprechen in JavaScript erstellen und verwenden, mit praktischen Beispielen, die für React Native relevant sind.

---

Was ist ein Versprechen?

Ein Versprechen in JavaScript ist ein Objekt, das den eventuellen Abschluss (oder Misserfolg) eines asynchronen Vorgangs darstellt. Es ermöglicht uns, asynchronen Code synchroner zu verarbeiten und die klassische „Callback-Hölle“ zu vermeiden. Versprechen haben drei Zustände:

• Ausstehend: Der Ausgangszustand, weder erfüllt noch abgelehnt.
• Erfüllt: Der Vorgang wurde erfolgreich abgeschlossen.
• Abgelehnt: Der Vorgang ist fehlgeschlagen.

---

Ein Versprechen schaffen

Um ein Versprechen zu erstellen, verwenden wir den Promise-Konstruktor, der eine einzelne Funktion (die Executor-Funktion) mit zwei Parametern akzeptiert:

• lösen: Rufen Sie diese Funktion auf, um das Versprechen zu erfüllen, wenn der Vorgang erfolgreich abgeschlossen wurde.
• ablehnen: Rufen Sie diese Funktion auf, um das Versprechen abzulehnen, wenn ein Fehler auftritt.

Beispiel: Erstellen eines Basisversprechens

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const success = true; // Simulating success/failure
      if (success) {
        resolve({ data: "Sample data fetched" });
      } else {
        reject("Error: Data could not be fetched.");
      }
    }, 2000); // Simulate a 2-second delay
  });
}

In diesem Beispiel:

• Wir erstellen ein Versprechen, das das Abrufen von Daten mit einem setTimeout simuliert.
• Wenn die Erfolgsvariable „true“ ist, rufen wir „resolve()“ mit einigen Daten auf; andernfalls rufen wir „reject()“ mit einer Fehlermeldung auf.

---

Verwenden von Promises mit .then(), .catch() und .finally()

Sobald ein Versprechen erstellt wurde, können wir sein Ergebnis wie folgt verwalten:

• .then(), um erfolgreiche Lösungen zu verarbeiten,
• .catch() zur Fehlerbehandlung und
• .finally(), um Code auszuführen, nachdem das Versprechen erfüllt ist, unabhängig vom Ergebnis.

Beispiel: Umgang mit einem Versprechen

fetchData()
  .then((result) => console.log("Data:", result.data)) // Handle success
  .catch((error) => console.error("Error:", error))    // Handle failure
  .finally(() => console.log("Fetch attempt completed")); // Finalize

In diesem Beispiel:

• .then() wird aufgerufen, wenn das Versprechen gelöst wird, und druckt die Daten.
• .catch() behandelt alle Fehler, die auftreten, wenn das Versprechen abgelehnt wird.
• .finally() wird unabhängig davon ausgeführt, ob das Versprechen gelöst oder abgelehnt wird.

---

Praktische Anwendungsfälle für Versprechen in React Native

1. Abrufen von Daten von einer API

In React Native ist das Abrufen von Daten eine häufige asynchrone Aufgabe, die mit Versprechen effizient verwaltet werden kann.

function fetchData(url) {
  return fetch(url)
    .then(response => {
      if (!response.ok) throw new Error("Network response was not ok");
      return response.json();
    })
    .then(data => console.log("Fetched data:", data))
    .catch(error => console.error("Fetch error:", error));
}

// Usage
fetchData("https://api.example.com/data");

Anwendungsfall: Abrufen von Daten von REST-APIs oder anderen Netzwerkanfragen, bei denen wir sowohl erfolgreiche Antworten als auch Fehler verarbeiten müssen.

---

2. Verwendung von Versprechen für sequentielle asynchrone Vorgänge

Manchmal hängt eine asynchrone Aufgabe von einer anderen ab. Versprechen machen es einfach, Vorgänge nacheinander zu verketten.

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const success = true; // Simulating success/failure
      if (success) {
        resolve({ data: "Sample data fetched" });
      } else {
        reject("Error: Data could not be fetched.");
      }
    }, 2000); // Simulate a 2-second delay
  });
}

Anwendungsfall: Nützlich zum Anmelden eines Benutzers und zum anschließenden Abrufen von Profildaten basierend auf seiner Identität.

---

3. Umgang mit mehreren Versprechen mit Promise.all()

Wenn Sie mehrere unabhängige Versprechen haben, die parallel ausgeführt werden können, können Sie mit Promise.all() darauf warten, dass alle aufgelöst oder eines davon abgelehnt wird.

fetchData()
  .then((result) => console.log("Data:", result.data)) // Handle success
  .catch((error) => console.error("Error:", error))    // Handle failure
  .finally(() => console.log("Fetch attempt completed")); // Finalize

Anwendungsfall: Gleichzeitiges Abrufen mehrerer Ressourcen, z. B. Abrufen von Beiträgen und Kommentaren von separaten API-Endpunkten.

---

4. Rennversprechen mit Promise.race()

Bei Promise.race() bestimmt das erste Versprechen, das erfüllt (aufgelöst oder abgelehnt) wird, das Ergebnis. Dies ist hilfreich, wenn Sie eine Zeitüberschreitung für eine lang laufende Aufgabe festlegen möchten.

function fetchData(url) {
  return fetch(url)
    .then(response => {
      if (!response.ok) throw new Error("Network response was not ok");
      return response.json();
    })
    .then(data => console.log("Fetched data:", data))
    .catch(error => console.error("Fetch error:", error));
}

// Usage
fetchData("https://api.example.com/data");

Anwendungsfall: Festlegen eines Timeouts für Netzwerkanfragen, damit diese nicht auf unbestimmte Zeit hängen bleiben, wenn der Server langsam ist oder nicht reagiert.

---

5. Verwenden von Promise.allSettled() zum Behandeln gemischter Ergebnisse

Promise.allSettled() wartet darauf, dass alle Versprechen erfüllt werden, unabhängig davon, ob sie gelöst oder abgelehnt werden. Dies ist nützlich, wenn Sie die Ergebnisse aller Versprechen benötigen, auch wenn einige fehlschlagen.

function authenticateUser() {
  return new Promise((resolve) => {
    setTimeout(() => resolve({ userId: 1, name: "John Doe" }), 1000);
  });
}

function fetchUserProfile(user) {
  return new Promise((resolve) => {
    setTimeout(() => resolve({ ...user, profile: "Profile data" }), 1000);
  });
}

// Chain promises
authenticateUser()
  .then(user => fetchUserProfile(user))
  .then(profile => console.log("User Profile:", profile))
  .catch(error => console.error("Error:", error));

Anwendungsfall: Nützlich bei der Ausführung mehrerer Anfragen, bei denen einige möglicherweise fehlschlagen, z. B. beim Abrufen optionaler Datenquellen oder beim Durchführen mehrerer API-Aufrufe.

---

Fortgeschrittene Techniken: Rückrufe in Versprechen umwandeln

Ältere Codebasen oder bestimmte Bibliotheken verwenden möglicherweise Rückrufe anstelle von Versprechen. Sie können diese Rückrufe in Versprechen einbinden und sie in moderne, auf Versprechen basierende Funktionen umwandeln.

Beispiel: Einen Rückruf in ein Versprechen einschließen

const fetchPosts = fetch("https://api.example.com/posts").then(res => res.json());
const fetchComments = fetch("https://api.example.com/comments").then(res => res.json());

Promise.all([fetchPosts, fetchComments])
  .then(([posts, comments]) => {
    console.log("Posts:", posts);
    console.log("Comments:", comments);
  })
  .catch(error => console.error("Error fetching data:", error));

Anwendungsfall: Mit dieser Technik können Sie auf versprechensfreundliche Weise mit altem Callback-basierten Code arbeiten und ihn so mit der modernen Async/Await-Syntax kompatibel machen.

---

Zusammenfassung

Promises sind leistungsstarke Tools zum Verwalten asynchroner Vorgänge in JavaScript und React Native. Wenn Sie verstehen, wie Versprechen in verschiedenen Szenarien erstellt, verwendet und gehandhabt werden, können Sie saubereren und wartbareren Code schreiben. Hier ist eine kurze Zusammenfassung häufiger Anwendungsfälle:

• API-Anfragen: Abrufen von Daten von einem Server mit Fehlerbehandlung.
• Verkettungsoperationen: Abhängige Aufgaben nacheinander ausführen.
• Parallele Operationen: Mehrere Versprechen gleichzeitig mit Promise.all() ausführen.
• Timeouts und Rennen: Begrenzung der Anfragedauer mit Promise.race().
• Gemischte Ergebnisse: Verwendung von Promise.allSettled() für Aufgaben, die teilweise fehlschlagen können.
• Rückrufe konvertieren: Rückrufbasierte Funktionen in Versprechen einschließen, um die Kompatibilität mit moderner Syntax zu gewährleisten.

Durch die effektive Nutzung von Versprechen können Sie die asynchrone Programmierung in JavaScript und React Native sauberer, vorhersehbarer und robuster gestalten.

Das obige ist der detaillierte Inhalt vonVersprechen in JavaScript und React Native: Erstellung, Verwendung und häufige Szenarien. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!