JavaScript-Versprechen && Abrufen

Versprechen

Restaurants

Ein Versprechen in JavaScript ist nur eine ausstehende Aufgabe. Es ist, als würde man in einem Restaurant Essen bestellen: Wenn Sie Ihre Bestellung aufgeben, macht der Kellner das Versprechen, Ihnen das bestellte Essen zu bringen. Sobald das Essen auf den Tisch gebracht wird, ist das Versprechen erfüllt. Wenn das von Ihnen bestellte Essen nicht serviert werden kann, weil die Küche eine wichtige Zutat nicht mehr hat, können Sie sich woanders eine Mahlzeit holen.

Das ist alles asynchron. Wenn Sie sich an den Tisch setzen, chatten Sie möglicherweise mit einem Freund oder scrollen auf Ihrem Telefon. Sie pausieren, was Sie gerade getan haben, damit Sie Ihre Bestellung an den Server erteilen können, und machen dann wieder mit dem weiter, was Sie zuvor getan haben.

JavaScript-Versprechen funktionieren ähnlich. Da JavaScript Single-Threaded ist, ermöglichen Versprechen es der JavaScript-Engine, mit anderen Aufgaben fortzufahren, während sie auf den Abschluss bestimmter Vorgänge wartet.

JavaScript

Ein Versprechen ist eine bestimmte Art von Objekt. Alle Versprechen beginnen in einem ausstehenden Zustand. Die Rückruffunktion innerhalb des Versprechens, ein sogenannter Executor, definiert, wann das Versprechen aufgelöst oder abgelehnt werden soll.

Ein Versprechen erstellen:

const order = new Promise((resolve, reject) => {
  if ( foodDelivered) {
    resolve('eat food');
  } else {
    reject('find another restaurant');
  }
})

Ein Versprechen verwenden

order
  // wait for the asynchronous value to be fulfilled
  .then(value => console.log(value))
  // handle rejection
  .catch(error => console.log(error))
  .finally(() => console.log('all done'));

Bringen

fetch ist eine integrierte Funktion in JavaScript, die ein Versprechen zurückgibt. Es stellt eine HTTP-Anfrage und ermöglicht Ihnen die asynchrone Verarbeitung der Antwort mit .then() und .catch().

Verwenden von fetch()

fetch('url')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.log(error))
  .finally(() => console.log('all done');

Der Aufrufstapel und die Ereignisschleife

Der Aufrufstapel verwaltet synchrone Aufgaben und verfolgt die Reihenfolge, in der sie ausgeführt werden. Das ist ziemlich einfach: Aufgaben werden in der Reihenfolge ausgeführt, in der sie geschrieben wurden.

asynchrone Aufgaben werden jedoch von der Ereignisschleife verarbeitet. Die Ereignisschleife ermöglicht die Ausführung von asynchronem Code außerhalb der Reihenfolge, sodass die JavaScript-Engine ohne Wartezeit an anderen Aufgaben weiterarbeiten kann.

Beispiel

Wie wird das ausgeführt?

console.log("console log first!");
setTimeout( _ => console.log("set timeout second!"), 0);
Promise.resolve().then(() => console.log("promise third"));
console.log("console log last!!!");

Man könnte erwarten, dass es in der richtigen Reihenfolge ausgeführt wird, aber das ist nicht der Fall. Die JavaScript-Ereignisschleife verarbeitet diese Anweisungen unterschiedlich.
Das Ergebnis ist tatsächlich dieses:

> console log first!
> console log last!!!
> promise third
> set timeout second!

Warum?

Die Ereignisschleife ordnet die Ausführungspriorität neu:

1. Synchronisierte Aufgaben (wie console.log („Konsolenprotokoll zuerst!“) und console.log („Konsolenprotokoll zuletzt!!!“)) werden sofort in der Reihenfolge ausgeführt, in der sie erscheinen.
2. Mikrotasks (z. B. Promise-Rückrufe) erhalten die nächste Priorität und werden vor allen anderen asynchronen Aufgaben ausgeführt.
3. Makroaufgaben (wie setTimeout) werden zuletzt verarbeitet, auch wenn das Timeout auf Null gesetzt ist.

Dadurch kann die JavaScript-Engine asynchron arbeiten und andere Aufgaben ausführen, ohne darauf warten zu müssen, dass alle Vorgänge sofort abgeschlossen sind.

Titelbild von Andrew Petrov auf Unsplash

Das obige ist der detaillierte Inhalt vonJavaScript-Versprechen && Abrufen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!