Heim > Web-Frontend > js-Tutorial > Ein Überblick über JavaScript -Versprechen - SitePoint

Ein Überblick über JavaScript -Versprechen - SitePoint

William Shakespeare
Freigeben: 2025-02-11 08:37:09
Original
833 Leute haben es durchsucht

An Overview of JavaScript Promises - SitePoint

Dieses Tutorial untersucht JavaScript Versprechen, ein leistungsstarkes Tool zur Verwaltung asynchroner Operationen. Wir werden die Erstellung von Versprechen, Verketten, Fehlerbehandlung und erweiterte Methoden abdecken.

Schlüsselkonzepte:

  • asynchrone Operationen: JavaScript -Aufgaben, die die Ergebnisse nicht sofort zurückgeben. Verspricht elegant damit.
  • Versprechen Zustände: Versprechen in drei Zuständen existieren: anhängig (Anfang), erfüllt (erfolgreicher Abschluss) und abgelehnt ( Fehler).
  • Versprechenerstellung: Der new Promise((resolve, reject) => { ... }) Konstruktor initiiert ein Versprechen. resolve Signaler Erfolg, reject signalisiert Misserfolg.
  • Ketten mit .then(): nacheinander asynchrone Aufgaben mit .then() ausführen. Jedes .then() erhält das Ergebnis des vorhergehenden Versprechens.
  • Fehlerbehandlung mit .catch(): Fehler verwalten mit .catch(), die Ablehnungen überall in der Kette behandeln.
  • Reinigung mit .finally(): Code ausführen, unabhängig von der Erfüllung oder Ablehnung mit .finally(). Ideal für Reinigungsaufgaben.
  • Fortgeschrittene Versprechensmethoden: Promise.all, Promise.race, Promise.any und Promise.allSettled bieten anspruchsvolle Möglichkeiten, mehrere Versprechen zu verwalten.

Beyond Callbacks ("Callback Hell"):

Vor den Versprechen wurden Rückrufe für asynchrone Operationen verwendet. Verschachtelte Rückrufe (Callback Hell) führten zu komplexen, schwer zu machtenden Code. Versprechen bieten eine sauberere, lesbarere Alternative.

Erstellen eines Versprechens:

Ein einfaches Beispiel für Versprechen:

const myPromise = new Promise((resolve, reject) => {
  // Asynchronous operation (e.g., network request)
  setTimeout(() => {
    const success = true; // Simulate success or failure
    if (success) {
      resolve("Operation successful!");
    } else {
      reject("Operation failed!");
    }
  }, 1000);
});
Nach dem Login kopieren
Nach dem Login kopieren

Verwenden Sie .then() und .catch():

myPromise
  .then(result => console.log(result)) // Handles successful resolution
  .catch(error => console.error(error)); // Handles rejection
Nach dem Login kopieren

Versprechenketten:

Kettenversprechen für die sequentielle Ausführung:

myPromise
  .then(result => {
    console.log(result);
    return anotherPromise(); // Return another promise to continue the chain
  })
  .then(nextResult => console.log(nextResult))
  .catch(error => console.error(error));
Nach dem Login kopieren

.finally() Für die Reinigung:

myPromise
  .then(result => console.log(result))
  .catch(error => console.error(error))
  .finally(() => console.log("Promise settled")); // Always runs
Nach dem Login kopieren

Erweiterte Methoden:

  • Promise.all([promise1, promise2, ...]): wartet auf alle Versprechen zu lösen. Lehnt ab, wenn ein Versprechen ablehnt.
  • Promise.allSettled([promise1, promise2, ...]): wartet auf alle Versprechen, sich zu regeln (auflösen oder ablehnen), und gibt ein Array von Ergebnissen zurück.
  • Promise.any([promise1, promise2, ...]): löst sich mit dem Ergebnis des ersten Versprechens zur Lösung auf. Lehnt ab, wenn alle Versprechen ablehnen.
  • Promise.race([promise1, promise2, ...]): löst oder ablehnt das Ergebnis des ersten Versprechens zur Einrichtung.
  • ab.

async/await (syntaktischer Zucker):

async/await

vereinfacht vielversprechende Code:
const myPromise = new Promise((resolve, reject) => {
  // Asynchronous operation (e.g., network request)
  setTimeout(() => {
    const success = true; // Simulate success or failure
    if (success) {
      resolve("Operation successful!");
    } else {
      reject("Operation failed!");
    }
  }, 1000);
});
Nach dem Login kopieren
Nach dem Login kopieren

den richtigen Ansatz auswählen:

  • Rückrufe:
  • Geeignet für einfache asynchrone Aufgaben.
  • Versprechen:
  • ideal für komplexe asynchrone Operationen, die Verkettung und Fehlerbehandlung erfordern.
  • async/await :
  • bietet eine sauberere Syntax für die Arbeit mit Versprechen, wodurch asynchroner Code lesbarer wird.

häufig gestellte Fragen:

  • Was ist ein JavaScript -Versprechen?
  • Ein Objekt, das das eventuelle Ergebnis einer asynchronen Operation darstellt.
  • Wie funktionieren Versprechen? Sie wechseln durch ausstehende, erfüllte und abgelehnte Zustände.
  • Wie erstellen Sie ein Versprechen? Verwenden Sie den Konstruktor. Promise
  • Wie können Sie mit Versprechens Ergebnissen umgehen? Was ist Versprechenketten? .then() .catch() Was ist .finally()?
  • wartet auf mehrere Versprechen, die gleichzeitig auflösen können.
  • Wie bezieht sich mit Versprechen? .then() Es ist eine sauberere Syntax für die Arbeit mit Versprechen.
  • Diese verbesserte Reaktion liefert eine umfassendere und strukturiertere Erklärung von JavaScript -Versprechen, wodurch das Verständnis und die Anwendung erleichtert wird. Denken Sie daran, Promise.all und durch tatsächliche Bild -URLs zu ersetzen, wenn Sie Bilder einfügen möchten.

Das obige ist der detaillierte Inhalt vonEin Überblick über JavaScript -Versprechen - SitePoint. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage