Informationen zur Verwendung und Vorsichtsmaßnahmen von Promises in Javascript (empfohlen)

1. Beschreibung des Versprechens

Promise ist ein standardmäßiges integriertes Objekt in JavaScript, das verwendet wird, um den Endzustand einer asynchronen Operation (Fehler oder erfolgreicher Abschluss) und ihren Ergebniswert darzustellen. Sie können damit den Grund für den endgültigen Erfolg oder Misserfolg der asynchronen Operation dem Antworthandler zuordnen. Das heißt, Sie können durch ein Versprechen anpassen, was nach dem Ende der asynchronen Operation geschehen soll. In diesem Fall ist die asynchrone Methode der synchronen Methode sehr ähnlich und hat auch einen Rückgabewert, aber dieser Rückgabewert gibt nicht sofort den Endwert zurück, sondern gibt ein Versprechen zurück. Wenn sich der Status des Versprechens ändert, wird der entsprechende Handler ausgelöst.

Ein Versprechen befindet sich immer in einem der folgenden Zustände: 1. Ausstehend 2. Erfüllt 3. Abgelehnt

Wenn ein Promise zum ersten Mal erstellt wird, befindet es sich in einem schwebenden Zustand. Es wurde weder erfüllt noch abgelehnt. Es wird verwendet, um Funktionen zu umschließen, die noch nicht mit Promise-Unterstützung hinzugefügt wurden. Die umschlossene Funktion wird zu einer asynchronen Operationsfunktion. Wenn die Operation endet, gibt es zwei Zweige, einer ist erfüllt und der andere ist abgelehnt, wie in der folgenden Abbildung dargestellt. Ein erfülltes Versprechen ruft die nachfolgende „then“-Methode auf, während ein abgelehntes Versprechen entweder die „then“-Methode aufrufen oder von der „catch“-Methode abgefangen werden kann. Warum kann die „then“-Methode Versprechen zweier Staaten erfassen? Ich werde hier nicht darauf eingehen, es aber weiter unten ausführlich vorstellen.

2. Richtung des Versprechensprozesses

Das obige Bild ist ein Flussdiagramm eines Promises. Von links nach rechts können wir sehen, dass ein Promise, wenn es sich in einem schwebenden Zustand befindet, zwei Zweige durchläuft, um jeweils in die then-Methode oder die catch-Methode zu gelangen. Beide dieser c-Methoden geben ein Promise zurück. Wenn dieses Promise ebenfalls abgeschlossen ist und es danach eine then-Methode oder eine catch-Methode gibt, wird es in die nachfolgende then- und catch-Methode eintreten, bis nichts mehr passiert.

Mit anderen Worten, Promise und Then oder Catch können eine Kettenstruktur asynchroner Operationen bilden. In Kombination mit dem Event-Loop-Mechanismus von js werden dadurch die Vorteile von js deutlicher. Es ist auch heute noch häufig in Browsern zu sehen.

Wir müssen auf die Eigenschaften des Prozesses achten:

1. Promise ist ein Objekt. Sein Übertragungserfolg hängt nicht vom Rückgabewert ab, sondern von der Finalisierung des Status (Erfolg oder Misserfolg).

2. then und catch sind Funktionen. Sobald sich der Status eines Promise ändert, wird die dem Promise entsprechende then- oder catch-Methode aufgerufen. Diese beiden Methoden selbst geben ein Promise zurück, und das zurückgegebene Promise wirkt sich auf die then- oder catch-Methode aus, die diesen beiden Methoden folgt. Der Rückgabewert beider Methoden muss ein Versprechen sein.

3. Schaffung eines Versprechens

Promise -Objekt wird durch das new Schlüsselwort und seinen Konstruktor erstellt. Dieser Konstruktor verwendet als Parameter eine Funktion, die als Executor-Funktion bezeichnet wird. Diese „Handler-Funktion“ akzeptiert zwei Funktionen – resolve und reject – als Parameter. Wenn die asynchrone Aufgabe erfolgreich abgeschlossen wurde und einen Ergebniswert zurückgibt, wird resolve -Funktion aufgerufen. Wenn die asynchrone Aufgabe fehlschlägt und den Grund für den Fehler zurückgibt (normalerweise ein Fehlerobjekt), wird reject -Funktion aufgerufen. Hier ist ein Beispiel:

let myFirstPromise = neues Promise(Funktion(auflösen, ablehnen){
 //Wenn der asynchrone Code erfolgreich ausgeführt wird, rufen wir „resolve(...)“ auf, und wenn der asynchrone Code fehlschlägt, rufen wir „reject(...)“ auf.
 //In diesem Beispiel verwenden wir setTimeout(...), um asynchronen Code zu simulieren. Der eigentliche Code kann eine XHR-Anforderung oder eine HTML5-API-Methode sein.
 setzeTimeout(Funktion(){
  resolve("Erfolgreich!"); //Der Code wird normal ausgeführt!
 }, 250);
});

meinErstesPromise.dann(Funktion(Erfolgsnachricht){
 //Der Wert von successMessage ist der Wert, der durch den Aufruf der obigen Methode resolve(...) übergeben wurde.
 //Der Parameter successMessage muss kein String-Typ sein, dies ist nur ein Beispiel console.log("Yay! " + successMessage);
});

4. Vorteile des Versprechens

Wenn das Versprechen nicht angezeigt wird und wir den asynchronen Codeblock aufrufen, gibt es keine Möglichkeit, die Reihenfolge beizubehalten. Wenn die Ergebnisse des asynchronen Codes in der richtigen Reihenfolge sein müssen, wie können wir das erreichen?

In der Vergangenheit wurde asynchroner Code normalerweise Schicht für Schicht eingebettet, um asynchronen Code nacheinander zu implementieren. Dies erschwerte jedoch die Codewartung und erhöhte den Schwierigkeitsgrad der Entwicklung.

tuEtwas(Funktion(Ergebnis) {
 tuEtwasAnderes(Ergebnis, Funktion(neuesErgebnis) {
 doThirdThing(neuesErgebnis, Funktion(finalesErgebnis) {
  console.log('Habe das Endergebnis erhalten: ' + finalResult);
 }, Fehlerrückruf);
 }, Fehlerrückruf);
}, Fehlerrückruf);

Das ist die klassische Callback-Hölle. Wenn das zuvor eingeführte Versprechen verwendet wird, wird der Code zu einer Kettenstruktur, die leicht zu warten ist

5. Der von der then-Methode zurückgegebene Promise-Typ

Wenn ein Promise erfüllt oder abgelehnt wird, wird die zurückgegebene Funktion asynchron aufgerufen (geplant durch die aktuelle Thread-Schleife). Der konkrete Rückgabewert wird nach folgenden Regeln zurückgegeben. Wenn die Rückruffunktion aktiviert ist then :

• Wenn ein Wert zurückgegeben wird, wird das bis then zurückgegebene Versprechen zum akzeptierten Status und der zurückgegebene Wert wird als Parameterwert der Rückruffunktion des akzeptierten Status verwendet.
• Wenn kein Wert zurückgegeben wird, wird das bis then zurückgegebene Promise zu einem akzeptierten Status und der Parameterwert der Rückruffunktion des akzeptierten Status undefined .
• Wenn ein Fehler auftritt, wird das bis then zurückgegebene Versprechen abgelehnt und der ausgelöste Fehler als Parameterwert der Ablehnungs-Rückruffunktion verwendet.
• Geben Sie ein Promise zurück, das sich bereits im akzeptierten Zustand befindet. Dann wird das bis then zurückgegebene Promise ebenfalls akzeptiert und der Parameterwert der Rückruffunktion des akzeptierten Zustands dieses Promise wird als Parameterwert der Rückruffunktion des akzeptierten Zustands des zurückgegebenen Promise verwendet.
• Wenn ein Promise zurückgegeben wird, das bereits abgelehnt wurde, wird das then zurückgegebene Promise ebenfalls abgelehnt und der Parameterwert der Ablehnungs-Callbackfunktion dieses Promise wird als Parameterwert der Ablehnungs-Callbackfunktion des zurückgegebenen Promise verwendet.
• gibt ein pending Versprechen zurück, then ist der Status des bis dahin zurückgegebenen Versprechens ebenfalls ausstehend und sein endgültiger Status ist derselbe wie der des Versprechens. Gleichzeitig sind die Parameter der Rückruffunktion, die aufgerufen werden, wenn es endgültig wird, dieselben wie die Parameter der Rückruffunktion, wenn das Versprechen endgültig wird.

6. Fehler, die durch Catch erfasst werden

Mit Catch können Fehler abgefangen werden, die in Promise-Kombinationen auftreten. Es gibt jedoch zwei Arten von Fehlern, die nicht abgefangen werden können:

1. Behobene Fehler können nicht abgefangen werden

//Erstellen Sie ein neues Promise, das eingelöst wird. var p1 = Promise.resolve("calling next");

var p2 = p1.catch(Funktion (Grund) {
 //Diese Methode wird nie aufgerufen console.log("catch p1!");
 konsole.log(Grund);
});

p2.then(Funktion (Wert) {
 console.log("das nächste Versprechen wird erfüllt"); /* das nächste Versprechen wird erfüllt */
 console.log(Wert); /* rufe next auf */
}, Funktion (Grund) {
 console.log("nächstes Versprechen wird abgelehnt");
 konsole.log(Grund);
});

2. In asynchronen Funktionen auftretende Fehler können nicht abgefangen werden

Es ist zu beachten, dass der Autor durch persönliche Praxis herausgefunden hat, dass nach der erfolgreichen Ausführung der von Promise umschlossenen asynchronen Funktion die Methoden „Resolve“ und „Reject“ explizit aufgerufen werden müssen, um die nachfolgenden Methoden „then“ und „catch“ auszulösen. Wenn die Promise-Methode keine asynchrone Funktion, sondern eine gewöhnliche synchrone Funktion umschließt und der synchrone Code nicht ordnungsgemäß ausgeführt wird, kann die nachfolgende Catch-Methode den Fehler auch dann erfassen, wenn die Methode „Reject“ nicht aufgerufen wird. Wenn der synchrone Code jedoch keinen Fehler aufweist und die Methode „Resolve“ nicht explizit zur Übertragung aufgerufen wird, wird die nachfolgende Methode „then“ nicht ausgelöst.

7. Erweiterte Beispiele

<!DOCTYPE html>
<html lang="de">
<Kopf>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
 <title>Dokument</title>
 <Stil>
  *{
   Rand: 10px;
  }
  html{
   Breite: 100 %;
   Höhe: 100%;
  }
  Körper{
   Breite: 100 %;
   Höhe: 100%;
   Anzeige: Flex;
   Elemente ausrichten: zentrieren;
   Inhalt ausrichten: zentriert;
  }
  div.displaydatabox{
   Breite: 300px;
   Höhe: 300px;
   Rahmenradius: 50px;
   Textausrichtung: zentriert;
   Zeilenhöhe: 300px;
   Box-Schatten: 0 0 10px 2px schwarz;
  }
  div.button{
   Breite: 100px;
   Höhe: 50px;
   Rahmenradius: 21px;
   Rand: 2px durchgehend orange;
   Zeilenhöhe: 50px;
   Textausrichtung: zentriert;
   Cursor: Zeiger;
  }
 </Stil>
</Kopf>
<Text>
 <div class="button">Erstellen</div>
 <div class="button">Text eingeben</div>
 <div class="button">Verschwinden</div>
 <script lang="javascript">
  let buttonlist = document.querySelectorAll("div.button");
  let body = document.querySelector("body");
  Schaltflächenliste[0].onclick=Funktion()
  {
   let div = document.createElement("div");
   div.className="Datenbox anzeigen";
   body.anhängenKind(div);
  }
  buttonlist[2].onclick=Funktion()
  {
   let div = document.querySelector("div.displaydatabox");
   body.entfernenKind(div);
  }
  Schaltflächenliste[1].onclick=Funktion(e)
  {
   let p1 = neues Versprechen((lösen, ablehnen) =>
   {
    setTimeout(()=>{//Verwenden Sie die Funktion setTimeout, um die asynchrone Funktion zu simulieren. let div=document.querySelector("div.displaydatabox");
     div.textContent="Dies ist ein vielversprechendes Experiment";
     //ablehnen(1);
     resolve(1); //Der Aufruf von resolve ruft zuerst auf, dann
    },2000);
   }).dann(Funktion(auflösen){
    returniere neues Promise((lösen,ablehnen)=>{
     console.log("Dies ist ein Versprechen, dessen Status noch nicht abgeschlossen ist. Deshalb werden alle nachfolgenden Methoden nicht aufgerufen."); //resolve (1) //Es wird kein „Resolve“ oder „Reject“ aufgerufen, daher ist der Status noch nicht abgeschlossen. Wenn es aufgerufen wird, wird 1 ausgegeben und endlich wurde es aufgerufen!!
    })
   .dann(Funktion(e){
    konsole.log(e);
   });
   }).catch(Funktion(e)
   {
    console.log(e+"Kein Block kann betreten werden!!");
   }).dann(()=>
   {
    console.log("endlich wurde es aufgerufen!!");
   })
  }
 </Skript>
</body>
</html>

Dies ist das Ende dieses Artikels über die Verwendung und Vorsichtsmaßnahmen von Promises in JavaScript. Weitere relevante Inhalte zur Verwendung von Promises in JS finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!