Async und Versprechen in JS erklärt

Hinweis: Alle Konzepte hängen zusammen. Um also eine Sache zu wissen, müssen Sie auch andere Konzepte verstehen

Sperrcode

Angenommen, Sie haben eine Schleife in Ihrem Programm, deren Abschluss Jahre dauert. Jetzt haben Sie zwei Möglichkeiten: entweder weitermachen oder warten. Wenn Sie warten möchten, wird dies als Blockierungscode betrachtet. Wenn nicht, dann haben Sie keine Wahl? Mal sehen.

//blocking code
let sum = 0;
for(let i = 1;i<Number.MAX_SAFE_INTEGER;i++){
  for(let j = 1;j<Number.MAX_SAFE_INTEGER;j++){
      sum = i+j;
}
}
console.log(sum);
// above program is dummy and does not serve any purpose

Wie Sie sehen können, werden Programme, die sich darunter befinden, nicht ausgeführt, bevor der Vorgang abgeschlossen ist. Jetzt müssen wir jahrelang warten, bis die Summe ausgeführt wird, und der Benutzer könnte einige wichtige Dinge (andere Funktionen) verpassen.

Um solche Situationen zu umgehen, können wir for und console.log(sum) in eine Datei einfügen, die parallel zu unserem Code laufen kann, und warten, bis wir ihr ein grünes Signal geben. Dies wird als asynchron bezeichnet. Asynchroner Code wird parallel zum Hauptcode ausgeführt und erst nach Abschluss des Hauptcodes.

Wenn der asynchrone Code einen anderen asynchronen Code enthält. Es läuft erst, wenn die äußeren Ziele erreicht sind.

Hausaufgabenproblem

Was wird das Ergebnis des folgenden Programms sein?

• setInterval ist eine integrierte JS-Funktion zum Ausführen von Programmen in Intervallen.

// will inner ever run ? if yes then why (ask gemini/gpt)
setInterval(()=>{
  console.log("outer");
  setInterval(()=>{
    console.log("inner");
  },1000)
},1000)

nicht blockierender Code

setTimeout(()=>{
   console.log("outer");
   setTimeout(()=>{
     console.log("inner");
     for(let i = 1;i<1000;i++){}
     console.log("inner finished");
   },0)
   console.log("outer finishes");
},0)
console.log("i will run first");

Ausgabe

i will run first
outer
outer finishes
inner
inner finished

Hinweis: Mit dem obigen Code können Sie festlegen, dass der äußere Block jetzt als Hauptcode und der innere als asynchroner Code fungiert.

Sie sehen sogar console.log("i will run first") geschrieben nach dem Hauptcode, der zuerst ausgeführt wird. Wie ? Dies wird als nicht blockierender oder asynchroner Code bezeichnet. Die Hauptfunktionalität Ihres Programms wird dadurch nicht beeinträchtigt. Lassen Sie zeitraubende Vorgänge in Ihrer Anwendung wie Schreiben und Lesen durchführen.

async-await

Das Schlüsselwort „await“ ist immer in eine asynchrone Funktion eingeschlossen und lässt keinen anderen Code darunter ausführen, bis es abgeschlossen ist. Async und Await sind Schlüsselpaare. Noch eine Sache: Warten Sie immer vor Funktionen, die Versprechen zurückgeben, und schließen Sie es immer in den Try-Catch-Block ein.

async function myPromise(){
 try{
  await doSomething(); // a function that return promise
  console.log("Your file is successfully created"); //only runs when promise is accepted
  }
  catch(err){
   console.log(err); // if promised is rejected;
  }
}
myPromise();
console.log("first");

Ausgabe

# consider promise to be successful
first
Your file is successfully created

Bisheriges Verständnis (Schlussfolgerung):

1. Eine Funktion gibt ein Versprechen zurück, das immer in async-await verpackt ist.
2. async-await geht Hand in Hand.
3. Warten Sie immer in einen Try-Catch-Block. (falls nicht, lesen Sie meinen Blog)
4. Jetzt werden Programme außerhalb der asynchronen Funktion immer ausgeführt, unabhängig davon, ob sie wie oben gezeigt gelöst oder abgelehnt werden. (Das ist das Schöne?)
5. Jetzt lasst uns das Versprechen verstehen

Beginnen wir nun mit der Anwendung von Versprechen

1. API-Anfragen – Daten von einem anderen Server übertragen
2. Dateioperationen – Dateien lesen und schreiben
3. Datenbankabfragen – Daten abrufen oder schreiben

Finden Sie etwas, das in allen Anwendungsfällen gemeinsam ist?

Ja, die Ausführung aller Anwendungen dauert einige Zeit.

Versprechen gibt uns die Superkraft, mit einer solchen Situation angemessen umzugehen. Auch hier gehen Promises und Async-Await Hand in Hand.

Promises hat 3 Zustände (wie im obigen Beispiel gezeigt)

• Gelöst (wenn ja, wird unsere Datei erfolgreich erstellt und ausgeführt)
• abgelehnt (ein Code im Catch-Block wird ausgeführt)
• ausstehend (es wartet und lässt keinen Code innerhalb der Funktion laufen)

Lassen Sie uns ein benutzerdefiniertes Versprechen in JS erstellen

Ein asynchrones Schlüsselwort außerhalb einer Funktion, die Promise zurückgibt, ist rein optional. Siehe Code unten...

fetchData

// trying to mimic as a server response
function fetchData(success=false){
  return new Promise((resolve,reject)=>{
    if(success){
      setTimeout(()=>{
        resolve("fetched successfully");
      },5000) // execute after 5 sec
    }
    else
    reject("server is not responding");
  })
}
// lets consider fetchData is in-built function

Haupt

/* lets consider fetchData is a in-built function that gets data from other server. We are passing success para to just mimic the server otherwise it does not serve any purpose here.
*/
async function getData(){
  try{
    let result = await fetchData(true);
    console.log(result) //fetched successfully
  }
  catch(err){
    console.log(err); // in case of rejection
  }
}
getData();
// load other code

Der andere Code wird auch unabhängig davon ausgeführt, ob Daten abgerufen wurden oder nicht. Es verbessert die Leistung und die Qualität unseres Codes.

Referenzen

error-handling-by-aryan

Das obige ist der detaillierte Inhalt vonAsync und Versprechen in JS erklärt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!