ES6 - Versprechen

Versprechen Syntax

Die Syntax in Bezug auf Versprechen wird unten erwähnt, wo, p ist das Versprechen Objekt, resolve ist die Funktion, die aufgerufen werden soll, wenn das Versprechen erfolgreich ausgeführt wird und reject ist die Funktion, die aufgerufen werden soll, wenn das Versprechen auf einen Fehler stößt.

let p = new Promise(function(resolve,reject){
   let workDone = true; // some time consuming work
      if(workDone){
      //invoke resolve function passed
      
	  resolve('success promise completed')
   }
   else{
      reject('ERROR , work could not be completed')
   }
})

Beispiel

Das folgende Beispiel zeigt eine Funktion add_positivenos_async()Dadurch werden zwei Zahlen asynchron hinzugefügt. Das Versprechen wird gelöst, wenn positive Werte übergeben werden. Das Versprechen wird abgelehnt, wenn negative Werte übergeben werden.

<script>   
   function add_positivenos_async(n1, n2) {
      let p = new Promise(function (resolve, reject) {
         if (n1 >= 0 && n2 >= 0) {
            //do some complex time consuming work
            resolve(n1 + n2)
         }
         else
            reject('NOT_Postive_Number_Passed') 
         })
         return p;
   }

   add_positivenos_async(10, 20)
      .then(successHandler) // if promise resolved
      .catch(errorHandler);// if promise rejected

   add_positivenos_async(-10, -20)
      .then(successHandler) // if promise resolved
      .catch(errorHandler);// if promise rejected

   function errorHandler(err) {
      console.log('Handling error', err)
   }
   function successHandler(result) {
      console.log('Handling success', result)
   }

   console.log('end')
</script>

Die Ausgabe des obigen Codes erfolgt wie unten erwähnt -

end
Handling success 30
Handling error NOT_Postive_Number_Passed

Verspricht Verkettung

Promises chaining kann verwendet werden, wenn wir eine Folge von haben asynchronous tasksnacheinander zu tun. Versprechen werden verkettet, wenn ein Versprechen vom Ergebnis eines anderen Versprechens abhängt. Dies wird im folgenden Beispiel gezeigt

Beispiel

Im folgenden Beispiel ist add_positivenos_async() functionfügt zwei Zahlen asynchron hinzu und lehnt ab, wenn negative Werte übergeben werden. Das Ergebnis des aktuellen asynchronen Funktionsaufrufs wird als Parameter an die nachfolgenden Funktionsaufrufe übergeben. Beachten Sie jeweilsthen() Methode hat eine return-Anweisung.

<script>   
   function add_positivenos_async(n1, n2) {
      let p = new Promise(function (resolve, reject) {
         if (n1 >= 0 && n2 >= 0) {
            //do some complex time consuming work
            resolve(n1 + n2)
         }
         else
            reject('NOT_Postive_Number_Passed')
      })
      return p;
   }

   add_positivenos_async(10,20)
   .then(function(result){
      console.log("first result",result)
      return add_positivenos_async(result,result)
   }).then(function(result){
   console.log("second result",result)
      return add_positivenos_async(result,result)
   }).then(function(result){
      console.log("third result",result)
   })

   console.log('end')
</script>

Die Ausgabe des obigen Codes erfolgt wie folgt:

end
first result 30
second result 60
third result 120

Einige häufig verwendete Methoden des Versprechungsobjekts werden nachstehend ausführlich erörtert -

versprechen.all ()

Diese Methode kann nützlich sein, um die Ergebnisse mehrerer Versprechen zusammenzufassen.

Syntax

Die Syntax für die promise.all() Methode wird unten erwähnt, wo, iterableist ein iterierbares Objekt. ZB Array.

Promise.all(iterable);

Beispiel

Das folgende Beispiel führt ein Array von asynchronen Operationen aus [add_positivenos_async(10,20),add_positivenos_async(30,40),add_positivenos_async(50,60)]. Wenn alle Vorgänge abgeschlossen sind, ist das Versprechen vollständig erfüllt.

<script>   
   function add_positivenos_async(n1, n2) {
      let p = new Promise(function (resolve, reject) {
         if (n1 >= 0 && n2 >= 0) {
            //do some complex time consuming work
            resolve(n1 + n2)
         }
         else
            reject('NOT_Postive_Number_Passed')
      })

      return p;
   }
   //Promise.all(iterable)

Promise.all([add_positivenos_async(10,20),add_positivenos_async(30,40),add_positivenos_async(50,60)])
   .then(function(resolveValue){
      console.log(resolveValue[0])
      console.log(resolveValue[1])
      console.log(resolveValue[2])
      console.log('all add operations done')
   })
   .catch(function(err){
      console.log('Error',err)
   })
   console.log('end')
</script>

Die Ausgabe des obigen Codes lautet wie folgt:

end
30
70
110
all add operations done

versprechen.race ()

Diese Funktion nimmt eine Reihe von Versprechungen entgegen und gibt das erste Versprechen zurück, das erfüllt wurde.

Syntax

Die Syntax für die promise.race()Die Funktion wird unten erwähnt, wobei iterable ein iterierbares Objekt ist. ZB Array.

Promise.race(iterable)

Beispiel

Das folgende Beispiel zeigt ein Array [add_positivenos_async(10,20),add_positivenos_async(30,40)] von asynchronen Operationen.

Das Versprechen wird immer dann gelöst, wenn einer der Addiervorgänge abgeschlossen ist. Das Versprechen wartet nicht auf den Abschluss anderer asynchroner Vorgänge.

<script>   
   function add_positivenos_async(n1, n2) {
      let p = new Promise(function (resolve, reject) {
         if (n1 >= 0 && n2 >= 0) {
            //do some complex time consuming work
            resolve(n1 + n2)
         } else
            reject('NOT_Postive_Number_Passed')
      })

      return p;
   }

   //Promise.race(iterable)
   Promise.race([add_positivenos_async(10,20),add_positivenos_async(30,40)])
   .then(function(resolveValue){
      console.log('one of them is done')
      console.log(resolveValue)
   }).catch(function(err){
      console.log("Error",err)
   })

   console.log('end')
</script>

Die Ausgabe des obigen Codes lautet wie folgt:

end
one of them is done
30

Promisessind eine saubere Möglichkeit, asynchrone Programmierung in JavaScript zu implementieren (neue ES6-Funktion). Vor Versprechungen wurden Rückrufe verwendet, um asynchrone Programmierung zu implementieren. Beginnen wir mit dem Verständnis der asynchronen Programmierung und ihrer Implementierung mithilfe von Rückrufen.

Rückruf verstehen

Eine Funktion kann als Parameter an eine andere Funktion übergeben werden. Dieser Mechanismus wird als bezeichnetCallback. Ein Rückruf wäre bei Veranstaltungen hilfreich.

Das folgende Beispiel hilft uns, dieses Konzept besser zu verstehen.

<script>   
   function notifyAll(fnSms, fnEmail) {   
      console.log('starting notification process');   
      fnSms();   
      fnEmail();   
   }   
   notifyAll(function() {   
      console.log("Sms send ..");   
   }, 
   function() {   
      console.log("email send ..");   
   });   
   console.log("End of script"); 
   //executes last or blocked by other methods   
</script>

In dem notifyAll()Bei der oben gezeigten Methode erfolgt die Benachrichtigung durch Senden einer SMS und durch Senden einer E-Mail. Daher muss der Aufrufer der notifyAll-Methode zwei Funktionen als Parameter übergeben. Jede Funktion übernimmt eine einzelne Verantwortung wie das Senden von SMS und das Senden einer E-Mail.

Die folgende Ausgabe wird bei erfolgreicher Ausführung des obigen Codes angezeigt.

starting notification process 
Sms send .. 
Email send .. 
End of script

In dem oben erwähnten Code sind die Funktionsaufrufe synchron. Dies bedeutet, dass der UI-Thread darauf wartet, den gesamten Benachrichtigungsprozess abzuschließen. Synchrone Anrufe werden zu blockierenden Anrufen. Lassen Sie uns jetzt nicht blockierende oder asynchrone Anrufe verstehen.

Grundlegendes zu AsyncCallback

Betrachten Sie das obige Beispiel.

Führen Sie zum Aktivieren des Skripts einen asynchronen oder nicht blockierenden Aufruf der notifyAll () -Methode aus. Wir werden die verwendensetTimeout()Methode von JavaScript. Diese Methode ist standardmäßig asynchron.

Die setTimeout () -Methode akzeptiert zwei Parameter -

  • Eine Rückruffunktion.

  • Die Anzahl der Sekunden, nach denen die Methode aufgerufen wird.

In diesem Fall wurde der Benachrichtigungsprozess mit einem Timeout abgeschlossen. Daher dauert es eine Verzögerung von zwei Sekunden, die durch den Code festgelegt wird. NotifyAll () wird aufgerufen und der Hauptthread wird wie die Ausführung anderer Methoden ausgeführt. Daher blockiert der Benachrichtigungsprozess den Haupt-JavaScript-Thread nicht.

<script>   
   function notifyAll(fnSms, fnEmail) {   
      setTimeout(function() {   
         console.log('starting notification process');   
         fnSms();   
         fnEmail();   
      }, 2000);   
   }   
   notifyAll(function() {   
      console.log("Sms send ..");   
   },  
   function() {   
      console.log("email send ..");   
   });   
   console.log("End of script"); //executes first or not blocked by others   
</script>

Die folgende Ausgabe wird bei erfolgreicher Ausführung des obigen Codes angezeigt.

End of script 
starting notification process 
Sms send .. 
Email send ..

Bei mehreren Rückrufen sieht der Code unheimlich aus.

<script>   
   setTimeout(function() {   
      console.log("one");   
      setTimeout(function() {   
         console.log("two");   
         setTimeout(function() {   
            console.log("three");   
         }, 1000);   
      }, 1000);   
   }, 1000);   
</script>

ES6 hilft Ihnen, indem Sie das Konzept der Versprechen einführen. Versprechen sind "Fortsetzungsereignisse" und helfen Ihnen, die mehreren asynchronen Vorgänge zusammen in einem viel saubereren Codestil auszuführen.

Beispiel

Lassen Sie uns dies anhand eines Beispiels verstehen. Es folgt die Syntax dafür.

var promise = new Promise(function(resolve , reject) {    
   // do a thing, possibly async , then..  
   if(/*everthing turned out fine */)    resolve("stuff worked");  
   else     
   reject(Error("It broke"));  
});  
return promise;
// Give this to someone

Der erste Schritt zur Umsetzung der Versprechen besteht darin, eine Methode zu erstellen, die das Versprechen verwendet. Sagen wir in diesem Beispiel diegetSum()Die Methode ist asynchron, dh ihre Operation sollte die Ausführung anderer Methoden nicht blockieren. Sobald dieser Vorgang abgeschlossen ist, wird der Anrufer später benachrichtigt.

Im folgenden Beispiel (Schritt 1) ​​wird ein Promise-Objekt als 'var versprechen' deklariert. Der Promise Constructor übernimmt zuerst die Funktionen für den erfolgreichen Abschluss der Arbeit und eine weitere für den Fall, dass ein Fehler auftritt.

Das Versprechen gibt das Ergebnis der Berechnung zurück, indem der Auflösungsrückruf verwendet und das Ergebnis übergeben wird, dh n1 + n2

Step 1 - Auflösung (n1 + n2);

Wenn getSum () auf einen Fehler oder eine unerwartete Bedingung stößt, ruft es die Rückrufmethode "Zurückweisen" im Versprechen auf und übergibt die Fehlerinformationen an den Aufrufer.

Step 2 - ablehnen (Fehler ("Negative nicht unterstützt"));

Die Methodenimplementierung ist im folgenden Code angegeben (SCHRITT 1).

function getSum(n1, n2) {   
   varisAnyNegative = function() {   
      return n1 < 0 || n2 < 0;   
   }   
   var promise = new Promise(function(resolve, reject) {   
      if (isAnyNegative()) {   
         reject(Error("Negatives not supported"));   
      }   
      resolve(n1 + n2)
   });   
   return promise;   
}

Der zweite Schritt beschreibt die Implementierung des Anrufers (SCHRITT 2).

Der Aufrufer sollte die 'then'-Methode verwenden, die zwei Rückrufmethoden verwendet - erstens für den Erfolg und zweitens für den Misserfolg. Jede Methode verwendet einen Parameter, wie im folgenden Code gezeigt.

getSum(5, 6)   
.then(function (result) {   
   console.log(result);   
},   
function (error) {   
   console.log(error);   
});

Die folgende Ausgabe wird bei erfolgreicher Ausführung des obigen Codes angezeigt.

11

Da der Rückgabetyp von getSum () ein Versprechen ist, können wir tatsächlich mehrere 'then'-Anweisungen haben. Das erste 'dann' hat eine return-Anweisung.

getSum(5, 6)   
.then(function(result) {   
   console.log(result);   
   returngetSum(10, 20); 
   // this returns another promise   
},   
function(error) {   
   console.log(error);   
})   
.then(function(result) {   
   console.log(result);   
}, 
function(error) {   
   console.log(error);
});

Die folgende Ausgabe wird bei erfolgreicher Ausführung des obigen Codes angezeigt.

11
30

Im folgenden Beispiel werden drei then () -Aufrufe mit der Methode getSum () ausgeführt.

<script>   
   function getSum(n1, n2) {   
      varisAnyNegative = function() {   
         return n1 < 0 || n2 < 0;   
      }   
      var promise = new Promise(function(resolve, reject) {   
         if (isAnyNegative()) {   
            reject(Error("Negatives not supported"));   
         }   
         resolve(n1 + n2);   
      });   
      return promise;   
   }   
   getSum(5, 6)   
   .then(function(result) {   
      console.log(result);   
      returngetSum(10, 20); 
      //this returns another Promise   
   },   
   function(error) {   
      console.log(error);   
   })
   .then(function(result) {   
      console.log(result);   
      returngetSum(30, 40); 
      //this returns another Promise   
   }, 
   function(error) {   
      console.log(error);   
   })   
   .then(function(result) {   
      console.log(result);   
   }, 
   function(error) {         
      console.log(error);   
   });   
   console.log("End of script ");   
</script>

Die folgende Ausgabe wird bei erfolgreicher Ausführung des obigen Codes angezeigt.

Das Programm zeigt zuerst das Ende des Skripts an und resultiert dann aus dem Aufruf der Methode getSum () nacheinander.

End of script  
11 
30 
70

Dies zeigt, dass getSum () im asynchronen oder nicht blockierenden Stil aufgerufen wird. Promise bietet eine schöne und saubere Möglichkeit, mit den Rückrufen umzugehen.

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved