Heim > Web-Frontend > js-Tutorial > Lernen Sie Javascript-Versprechen. Teil Was ist ein Versprechen?

Lernen Sie Javascript-Versprechen. Teil Was ist ein Versprechen?

Mary-Kate Olsen
Freigeben: 2025-01-03 22:33:40
Original
702 Leute haben es durchsucht

Lernen Sie Javascript-Versprechen. Teil 1 – Was ist ein Versprechen?

Hey, Javascript-Fans, heute erzähle ich euch von Versprechen und wie ihr sie besser lernen oder verstehen könnt. Viele Leute denken, dass dies ein kompliziertes Thema ist und geraten in Verwirrung, obwohl es nichts Schwieriges daran ist, und wenn man es oft übt, wird man ein Experte, das garantiere ich. Meine heutige Aufgabe besteht darin, Ihnen zu helfen, die Grundlagen zu verstehen und das Wesen von Versprechen aufzuzeigen und zu zeigen, warum wir sie brauchen.

Was ist ein Versprechen und warum benötigen Sie es in Javascript?

Stellen Sie sich vor, Sie haben Ihren Freunden versprochen, jeden Morgen kontinuierlich Sport zu treiben und sie zu benachrichtigen, wenn Sie das tun. Ihr Versprechen hindert Sie oder Ihre Freunde nicht daran, ihr Leben zu leben, und sie warten nur auf Ihre Benachrichtigung über den Erfolg oder Misserfolg des Versprechens, um ihre Schlussfolgerungen oder Handlungen über Sie zu ziehen.

Dieses kleine Beispiel veranschaulicht die Natur des Versprechens als Ereignis und die beiden Akteure, die durch dieses Ereignis verbunden sind: In diesem Fall sind es der Verbraucher (Ihre Freunde) und der Produzent (Sie):

Learn javascript promises. Part  What is a promise?

Und wenn wir es etwas vereinfachen, können wir sagen, dass wir in Javascript das gleiche Verhalten mit der Promise-Klasse sehen, die uns die Möglichkeit gibt, asynchrone Aufgaben auszuführen, ohne den Hauptthread des Javascript zu blockieren und Abonnenten zu benachrichtigen, wenn wir fertig sind unser Versprechen.

Nehmen wir ein Beispiel, um herauszufinden, wie man damit arbeitet:

Learn javascript promises. Part  What is a promise?

Sehen wir uns diesen Code der Reihe nach an:

  1. Wir erstellen eine Promise-Instanz mit einer Executor-Funktion (eine Funktion, die wir an den Promise-Klassenkonstruktor übergeben).

Die Executor-Funktion ist die Grundlage des Versprechens, und diese Funktion wird sofort aufgerufen, wenn das Versprechen erstellt wird.

Die Executor-Funktion benötigt zwei Positionsparameter, der erste ist die Auflösungsmethode und der zweite ist die Ablehnungsmethode. Beide Methoden sind dafür verantwortlich, dass Versprechen nach einiger Zeit eingehalten werden.

Zum Beispiel haben wir versprochen, eine Woche lang jeden Morgen aufzustehen und Sport zu treiben. In diesem Fall gilt unser Versprechen eine ganze Woche lang, und wenn Sie es am dritten Tag nicht einhalten können, können Sie die Ablehnungsmethode aufrufen und jeder, der Ihr Versprechen abonniert hat, wird davon erfahren. Oder umgekehrt: Wenn Sie Ihr Versprechen halten, rufen Sie am siebten Tag die Auflösungsmethode auf, die Ihre Freunde darüber informiert, dass Sie Ihr Versprechen erfolgreich eingehalten haben. Sie können also sehen, dass die Verbraucher (Ihre Freunde) völlig unabhängig davon sind, wann Sie ihnen die Ergebnisse mitteilen. Sie müssen nur sicher sein, dass sie diese auch erhalten, wenn sie es sind.

Das Bild unten zeigt die möglichen Versprechenstatus: „ausstehend“, „erfüllt“ und „abgelehnt“. Wenn ein Versprechen gerade erst initiiert wurde, ist sein Status „ausstehend“. Nachdem es abgeschlossen ist, wird es entweder „erfüllt“ oder „abgelehnt“, je nachdem, welche Methode aufgerufen wurde, um es abzuschließen.

Learn javascript promises. Part  What is a promise?

Es ist auch erwähnenswert, dass ein Promise Executor nicht mehr als einmal abgeschlossen werden kann. Alle nachfolgenden Aufrufe von Auflösungs- oder Ablehnungsmethoden werden ignoriert.

  1. In dem Moment, in dem Sie sagen, dass Sie Ihr Versprechen abgeschlossen haben (durch Aufrufen der Lösungs- oder Ablehnungsmethode), erhalten alle, die das Versprechen abonniert haben, eine Benachrichtigung mit Nutzlast, die in zwei speziellen Methoden der Versprechensinstanz abgerufen werden kann . Diese Methoden sind: Promise.prototype.then und Promise.prototype.catch

Learn javascript promises. Part  What is a promise?

Mit der Promise.prototype.then-Methode können Sie sowohl positive als auch negative Szenarien gleichzeitig verarbeiten, da die Funktion zwei Rückrufe akzeptiert, wie im Screenshot oben.

Mit Promise.prototype.catch können Sie nur negative Szenarien wie dieses bewältigen:

Learn javascript promises. Part  What is a promise?

und verlassen Sie das Promise.prototype.then für positive Szenarien.

Außerdem stellen Versprechen eine Methode bereit, mit der Sie Code ausführen können, der unabhängig vom Ergebnis ausgeführt werden soll. Diese Methode ist Promise.prototype.finally:

Learn javascript promises. Part  What is a promise?

Diese Methode nimmt nichts entgegen und gibt nichts zurück, da sie dazu gedacht ist, frühere Vorgänge abzuschließen oder zu bereinigen. Zum Beispiel, um dem Benutzer die Nachricht anzuzeigen oder den Loader auszublenden.

Großartig, an dieser Stelle haben wir uns mit den Grundlagen von Versprechen befasst. Ich schlage daher vor, dass wir uns einem Beispiel aus der Praxis zuwenden, etwa Daten von der API anzufordern, sie von einer rohen HTTP-Antwort in JSON umzuwandeln und sie auszugeben zur Konsole:

Learn javascript promises. Part  What is a promise?

Wie Sie sehen können, unterscheidet sich das Ergebnis der Verwendung in der realen Welt nicht wesentlich von den Fähigkeiten, die wir am Anfang des Artikels geübt haben. Dennoch sind Ihnen vielleicht ein paar neue Dinge aufgefallen:

  • Das Ergebnis jedes vorherigen Promise.prototype.then- und Promise.prototype.catch-Handlers wird an den nächsten Promise-Handler übergeben. Es ist gut zu erwähnen, dass die Response.json-Methode ein Versprechen zurückgibt, das bei seiner Ausführung wiederum einen JSON zurückgibt und den folgenden Handler aufruft, der diesen JSON an ihn übergibt.

  • Im Fall von Promise.prototype.finally handelt es sich um einen „unsichtbaren“ Handler, und man kann sagen, dass er die vorherige Antwort durch sich selbst an die nächste weiterleitet.

Super, ich bin mir sicher, dass Sie jetzt besser verstehen, was ein Versprechen ist, wie man es verwendet und welche Zustände es haben kann. Außerdem möchte ich unten die wichtigsten Punkte auflisten, die wir heute besprochen haben (Spickzettel):

Zusammenfassung:

  • Javascript-Versprechen – es ist ein spezielles Objekt, das es Ihnen ermöglicht, asynchrone Vorgänge auszuführen und Verbraucher darüber zu benachrichtigen, wenn es fertig ist

  • Promise-Instanzen können drei Zustände haben – „ausstehend“, „erfüllt“ und „abgelehnt“

  • Es gibt drei Hauptmethoden der Promise-Instanz – „then“, „catch“ und „finally“.

  • Promise.prototype.then – entwickelt, um sowohl Ablehnungen als auch erfolgreiche Ergebnisse zu verarbeiten

  • Promise.prototype.catch – entwickelt, um abgelehnte Ergebnisse zu verarbeiten

  • Promise.prototype.finally – entwickelt, um die Aufräumarbeiten zu erleichtern

  • Sie können Ihre Handler in beliebiger Reihenfolge verketten, sie werden nacheinander ausgeführt

  • Das Ergebnis des vorherigen Versprechens geht in das nächste ein. Um die Versprechenkette erweiterbar zu machen, müssen Sie also daran denken, jedes Mal ein Versprechen von Handlern zurückzugeben, mit Ausnahme des „finally“-Handlers.

In zukünftigen Teilen dieses Themas werden wir uns mit fortgeschritteneren Versprechenstechniken befassen und tiefer in ihre Fähigkeiten eintauchen, also abonnieren Sie, liken Sie und bleiben Sie auf dem Laufenden!

Das obige ist der detaillierte Inhalt vonLernen Sie Javascript-Versprechen. Teil Was ist ein Versprechen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:dev.to
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