Callbacks vs. Promises vs. Async/Await: Detaillierter Vergleich

Einführung:
Asynchrone Programmierung ist ein Eckpfeiler der modernen JavaScript-Entwicklung und ermöglicht die gleichzeitige Ausführung von Aufgaben, ohne den Hauptthread zu blockieren. Im Laufe der Zeit hat sich JavaScript mit eleganteren Lösungen für die Handhabung asynchroner Vorgänge weiterentwickelt. In diesem Artikel untersuchen wir die Entwicklung von asynchronem JavaScript, angefangen bei traditionellen Rückrufen bis hin zu Versprechen und der Async/Await-Syntax.

1. Rückruffunktionen: Traditionell verwendete JavaScript Rückruffunktionen, um asynchrone Vorgänge abzuwickeln. Mit Rückrufen können Sie eine Funktion definieren, die ausgeführt wird, sobald eine asynchrone Aufgabe abgeschlossen ist. Da die Codebasen jedoch größer und komplexer wurden, führte der Callback-basierte Ansatz zu Problemen wie Callback-Hölle und schlechter Lesbarkeit des Codes.

Beispiel:

const datas =[
  {name:"kishan",profession:"software Engineer"},
  {name:"Anuj",profession:"software Engineer"}
]


function getDatas(){
  setTimeout(() => {
     datas.forEach((data,index)=>{
      console.log(data.name);

     })
  }, 1000);
}


function createddata(newdata,callback){
  setTimeout(() => {
      datas.push(newdata)
     callback()
  }, 2000);
}``


createddata({name:"jatin",profession:"software Engineer"},getDatas)

Ausgabe:
Wenn Sie den Code ausführen, lautet die Ausgabe:

kishan
Anuj
jatin

Schritt 2

Versprechen sind für die Handhabung asynchroner Vorgänge besser als Rückrufe, da sie eine sauberere, besser verwaltbare und fehlerresistente Möglichkeit bieten, mit asynchronem Code zu arbeiten. Darum gelten Versprechen als besser:

1. Vermeiden Sie die Rückrufhölle Callback: Das Verschachteln mehrerer Callbacks führt zu tief verschachteltem und schwer lesbarem Code (allgemein bekannt als „Callback-Hölle“). Versprechen: Verkettung von .then()-Aufrufen verspricht, sodass der Code flach und lesbar bleibt

1. Fehlerbehandlung
   Rückruf: Fehler müssen auf jeder Ebene explizit behandelt werden, was fehleranfällig ist.
   Versprechen: Mit .catch() können Sie Fehler an einer Stelle behandeln

2. Bessere Lesbarkeit
   Versprechen haben eine klare Struktur mit .then() und .catch(), wodurch der Code leichter zu verstehen, zu debuggen und zu warten ist.

3. Verkettung mehrerer asynchroner Aufrufe
   Versprechen machen die Verkettung sequenzieller asynchroner Vorgänge nahtlos

Beispiel

const datas = [
  { name: "kishan", profession: "software Engineer" },
  { name: "Anuj", profession: "software Engineer" },
];

function getDatas() {
  return new Promise((resolve) => {
    setTimeout(() => {
      datas.forEach((data) => {
        console.log(data.name);
      });
      resolve(); // Signal completion
    }, 1000);
  });
}

function createdData(newData) {
  return new Promise((resolve) => {
    setTimeout(() => {
      datas.push(newData);
      resolve(); // Signal completion
    }, 2000);
  });
}

function logCompletion() {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log("All tasks completed!");
      resolve();
    }, 500);
  });
}

// Usage with an Additional Task
createdData({ name: "jatin", profession: "software Engineer" })
  .then(getDatas)
  .then(logCompletion) // New Task
  .catch((err) => console.error(err));

Wie es funktioniert:
erstellte Daten:
Fügt nach 2 Sekunden einen neuen Dateneintrag zum Datenarray hinzu.
getDatas:
Protokolliert alle Namen im Datenarray nach 1 Sekunde.
logCompletion (Neue Aufgabe):
Protokolle „Alle Aufgaben erledigt!“ nach 500 Millisekunden.

Ausgabe:
Wenn Sie den aktualisierten Code ausführen, lautet die Ausgabe:

kishan
Anuj
jatin
All tasks completed!

Warum Versprechen dies einfach machen:
Jede Aufgabe gibt ein Versprechen zurück, sodass Sie Schritte in der Kette einfach hinzufügen, neu anordnen oder entfernen können.
Die klare Struktur sorgt dafür, dass die Reihenfolge erhalten bleibt und leicht zu befolgen ist.

Schritt 3

Die Verwendung von async/await vereinfacht die Syntax von Promises, wodurch der Code besser lesbar und näher am synchronen Fluss ist, während er immer noch asynchron ist. So sieht Ihr Code aus, wenn er mit async/await neu geschrieben wird:

const datas =[
  {name:"kishan",profession:"software Engineer"},
  {name:"Anuj",profession:"software Engineer"}
]


function getDatas(){
  setTimeout(() => {
     datas.forEach((data,index)=>{
      console.log(data.name);

     })
  }, 1000);
}


function createddata(newdata,callback){
  setTimeout(() => {
      datas.push(newdata)
     callback()
  }, 2000);
}``


createddata({name:"jatin",profession:"software Engineer"},getDatas)

Vorteile von async/await:
Lesbarkeit:
Der Code liest sich wie eine synchrone Schritt-für-Schritt-Logik.
Keine Verkettung oder Verschachtelung.
Fehlerbehandlung:
Verwenden Sie try...catch-Blöcke für einen zentralisierten und konsistenten Fehlerbehandlungsmechanismus.
Skalierbarkeit:
Das Hinzufügen neuer Aufgaben ist so einfach wie das Hinzufügen einer weiteren Wartezeile.

Ausgabe:
Wenn Sie den Code ausführen, erhalten Sie Folgendes:

kishan
Anuj
jatin

Das obige ist der detaillierte Inhalt vonCallbacks vs. Promises vs. Async/Await: Detaillierter Vergleich. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!