softmixx background

Asynchrones JavaScript

Javascript, Full Stack Development

Promise in Verbindung mit async / await Beispiel

[ 28.04.2021 | Alex]
In vielen Bereichen wird die Programmierung von Webanwendungen in JavaScript durch das asynchrone - sprich non-blocking - Verhalten der Sprache geprägt. Spätestens jedoch, wenn der eigene Code durch zigfaches Verschachteln von Callback Funktionen ('callback hell') unleserlich wird, ist es an der Zeit sich mit Promises und async/await Konstrukten anzufreunden.

Denn häufig kann die Verarbeitung eines Business Case nicht in allen Schritten parallel sondern eben Step by Step ausgeführt werden. Bei nur zwei aufeinanderfolgenden Programmschritten sieht das dann meist so aus:

/*
 * processSomeData
 *
**/

processSomeData = function(){

   var fnReturn = false;
   
   fetchRESTURL('example.url/api/data/1', function(data){

     /* fetch erfolgreich, data response verarbeiten */

    fetchRESTURL('example.url/api/data/2', function(data){

      /* fetch erfolgreich, data response verarbeiten */
      
      fnReturn = true;

    }, function(data){

      /* fetch löst fehler aus */

    });

   }, function(data){

     /* fetch löst fehler aus */

   });

   return fnReturn;
}

Bei 3, 4 oder noch mehr asynchronen Funktionen wird der Scriptcode völlig unübersichtlich. Wenn ich die Rückgabe und/oder Daten aus einer Funktion für die nächste Verarbeitung benötige, verwende ich i.d.R. Promises mit async/await Kontrukt, hier ein Beispiel:

/*
 * fetchStep1
 *
**/

fetchStep1 = function(){

  return new Promise( (resolve, reject) => {

   fetchRESTURL('example.url/api/data/1', function(data){

     /* fetch erfolgreich, data response verarbeiten */

     resolve( true )

   }, function(data){

     /* fetch löst fehler aus */

     reject(false)

   });

  } );
  
}


/*
 * fetchStep2
 *
**/

fetchStep2 = function(){

  return new Promise( (resolve, reject) => {

   fetchRESTURL('example.url/api/data/2', function(data){

     /* fetch erfolgreich, data response verarbeiten */

     resolve( true )

   }, function(data){

     /* fetch löst fehler aus */

     reject(false)

   });

  } );
  
}


/*
 * processSomeData
 *
**/

processSomeData = async function(){

  if( await fetchStep1() ){

   return await fetchStep2() ;

  }

  return false;

}