So verwenden Sie async und await in JS

1. asynchron

async erstellt eine asynchrone Funktion, um einen Codeblock zu definieren, in dem asynchroner Code ausgeführt wird;

Wie kann man daraus eine asynchrone Funktion machen? Es beginnt mit dem Schlüsselwort async , das vor eine Funktion gesetzt werden kann.

asynchrone Funktion f() {
  Rückgabe 1;
}
 
f().dann(alarm); // 1
 
//Die Ergebnisse sind die gleichen wie oben async function f() {
  gibt Promise.resolve(1) zurück;
}
 
f().dann(alarm); // 1
 
//Sie können auch die Pfeilfunktion let hello = async () => { return "1" }; verwenden.
hallo().dann((Wert) => console.log(Wert))
//Der Rückgabewert kann auch wie folgt vereinfacht werden: hello().then(console.log)

Eine der Eigenschaften asynchroner Funktionen: Der Rückgabewert der Funktion ist garantiert promise .

Durch Hinzufügen des Schlüsselworts async zu Funktionsdeklarationen werden diese angewiesen, promise statt eines Werts direkt zurückzugeben. Darüber hinaus wird jeglicher potenzieller Overhead synchroner Funktionen vermieden, um die Verwendung von await zu unterstützen.

2. warten:

await funktioniert nur innerhalb asynchroner Funktionen. Es kann in jedes asynchrone „ await -Schlüsselwort eingefügt werden, um die JavaScript Engine warten zu lassen, bis promise erfüllt und das Ergebnis zurückgegeben wird. Während auf promise gewartet wird, hat anderer Code, der auf die Ausführung wartet, die Chance, ausgeführt zu werden.

Sie können await beim Aufrufen einer beliebigen Funktion verwenden, die Promise zurückgibt, einschließlich Web API -Funktionen.

asynchrone Funktion f() {
  let promise = neues Versprechen((lösen, ablehnen) => {
    setTimeout(() => lösen("boom!"), 1000)
  });
 
  let result = await promise; // Warten, bis das Versprechen eingelöst wird. alert(result); // "Boom!"
}
 
f(); //Ergebnis abrufen und mit der Ausführung fortfahren. Der obige Code zeigt also nach 1 Sekunde „Boom!“ an.

Hinweis: „await“ unterbricht die Ausführung der Funktion tatsächlich, bis der Status des Versprechens erfüllt ist, und setzt dann die Ausführung mit dem Ergebnis des Versprechens fort. Dieses Verhalten verbraucht keine CPU-Ressourcen, da die JavaScript-Engine gleichzeitig andere Aufgaben erledigen kann: Ausführen anderer Skripts, Verarbeiten von Ereignissen usw.

3. Umfassende Anwendung

Mit async/await können Sie die .then() Codeblöcke überall loswerden, da await wartet.

asynchrone Funktion A() {
  let response = warte auf fetch('c.jpg');
  lass myBlob = warte auf Antwort.blob();
 
  let objectURL = URL.createObjectURL(meinBlob);
  let image = document.createElement('img');
  image.src = Objekt-URL;
  Dokument.Body.AppendChild(Bild);
}
 
A()
.catch(e => {
  console.log('Problem: ' + e.message);
});

Sie umschließen Ihren Code mit weniger .then() Blöcken, und er ähnelt stark synchronem Code, ist also sehr intuitiv. Es ist sehr cool, es auf diese Weise zu verwenden!

Dies ist das Ende dieses Artikels zur Verwendung von JS async/await . Weitere Informationen zur Verwendung von JS async/await finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!