async function

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit April 2017 browserübergreifend verfügbar.

Die async function-Deklaration erstellt eine Binding einer neuen asynchronen Funktion mit einem gegebenen Namen. Das await-Schlüsselwort ist innerhalb des Funktionskörpers erlaubt, was ermöglicht, dass asynchrones, auf Versprechen basierendes Verhalten in einem saubereren Stil geschrieben wird, und die Notwendigkeit vermieden wird, Versprechensketten explizit zu konfigurieren.

Sie können auch asynchrone Funktionen mit dem async function Ausdruck definieren.

Probieren Sie es aus

function resolveAfter2Seconds() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve("resolved");
    }, 2000);
  });
}

async function asyncCall() {
  console.log("calling");
  const result = await resolveAfter2Seconds();
  console.log(result);
  // Expected output: "resolved"
}

asyncCall();

Syntax

async function name(param0) {
  statements
}
async function name(param0, param1) {
  statements
}
async function name(param0, param1, /* …, */ paramN) {
  statements
}

Hinweis: Es darf kein Zeilenumbruch zwischen async und function sein, sonst wird ein Semikolon automatisch eingefügt, was dazu führt, dass async zu einem Bezeichner wird und der Rest zu einer function-Deklaration.

Parameter

name: Der Name der Funktion.
param Optional: Der Name eines formalen Parameters für die Funktion. Für die Syntax der Parameter siehe das Funktions-Referenz.
statements Optional: Die Anweisungen, die den Körper der Funktion bilden. Der await-Mechanismus kann verwendet werden.

Beschreibung

Eine async function-Deklaration erstellt ein AsyncFunction-Objekt. Jedes Mal, wenn eine asynchrone Funktion aufgerufen wird, gibt sie ein neues Promise zurück, das mit dem Wert aufgelöst wird, der von der asynchronen Funktion zurückgegeben wird, oder mit einer Ausnahme abgelehnt wird, die innerhalb der asynchronen Funktion nicht abgefangen wird.

Asynchrone Funktionen können null oder mehr await-Ausdrücke enthalten. Await-Ausdrücke lassen versprechensbasierte Funktionen so verhalten, als wären sie synchron, indem sie die Ausführung bis zur Erfüllung oder Ablehnung des zurückgegebenen Versprechens aussetzen. Der erfüllte Wert des Versprechens wird als Rückgabewert des Await-Ausdrucks behandelt. Der Gebrauch von async und await ermöglicht die Verwendung gewöhnlicher try / catch-Blöcke um asynchronen Code.

Hinweis: Das await-Schlüsselwort ist nur innerhalb von asynchronen Funktionen in regulärem JavaScript-Code gültig. Wenn Sie es außerhalb des Körpers einer asynchronen Funktion verwenden, erhalten Sie einen SyntaxError.

await kann eigenständig mit JavaScript-Modulen verwendet werden.

Hinweis: Der Zweck von async/await ist die Vereinfachung der Syntax die zur Nutzung von Promise-basierten APIs notwendig ist. Das Verhalten von async/await ist ähnlich wie die Kombination von Generatoren und Promises.

Asynchrone Funktionen geben immer ein Versprechen zurück. Wenn der Rückgabewert einer asynchronen Funktion nicht explizit ein Promise ist, wird es implizit in ein Promise gehüllt.

Betrachten Sie zum Beispiel folgenden Code:

async function foo() {
  return 1;
}

Er ist ähnlich wie:

function foo() {
  return Promise.resolve(1);
}

Beachten Sie, dass selbst wenn der Rückgabewert einer asynchronen Funktion so behandelt wird, als sei er in Promise.resolve gewickelt, sie nicht gleich sind. Eine asynchrone Funktion wird einen anderen Verweis zurückgeben, wohingegen Promise.resolve denselben Verweis zurückgibt, wenn der gegebene Wert ein Promise ist. Dies kann ein Problem sein, wenn Sie die Gleichheit eines Versprechens und eines Rückgabewerts einer asynchronen Funktion überprüfen möchten.

const p = new Promise((res, rej) => {
  res(1);
});

async function asyncReturn() {
  return p;
}

function basicReturn() {
  return Promise.resolve(p);
}

console.log(p === basicReturn()); // true
console.log(p === asyncReturn()); // false

Der Körper einer asynchronen Funktion kann so betrachtet werden, dass er durch null oder mehr await -Ausdrücke aufgeteilt wird. Top-Level-Code, bis einschließlich des ersten Await-Ausdrucks (falls vorhanden), wird synchron ausgeführt. Auf diese Weise wird eine asynchrone Funktion ohne einen Await-Ausdruck synchron ausgeführt. Ist jedoch ein Await-Ausdruck im Funktionskörper vorhanden, wird die asynchrone Funktion immer asynchron abgeschlossen.

Zum Beispiel:

async function foo() {
  await 1;
}

Er ist ebenfalls gleichbedeutend mit:

function foo() {
  return Promise.resolve(1).then(() => undefined);
}

Code nach jedem Await-Ausdruck kann so betrachtet werden, als würde er in einem .then Rückruf existieren. Auf diese Weise wird eine Versprechenskette mit jedem Wiedereintritt in die Funktion progressiv aufgebaut. Der Rückgabewert bildet das letzte Glied in der Kette.

Im folgenden Beispiel warten wir nacheinander auf zwei Versprechen. Der Fortschritt bewegt sich durch die Funktion foo in drei Phasen.

Die erste Zeile des Körpers der Funktion foo wird synchron ausgeführt, mit dem Await-Ausdruck, der mit dem ausstehenden Versprechen konfiguriert ist. Der Fortschritt durch foo wird dann ausgesetzt und die Kontrolle wird an die Funktion, die foo aufgerufen hat, zurückgegeben.
Einige Zeit später, wenn das erste Versprechen entweder erfüllt oder abgelehnt wurde, wird die Kontrolle zurück an foo gegeben. Das Ergebnis der ersten Versprechens-Erfüllung (falls es nicht abgelehnt wurde) wird vom Await-Ausdruck zurückgegeben. Hier wird 1 result1 zugewiesen. Der Fortschritt geht weiter und der zweite Await-Ausdruck wird ausgewertet. Wieder wird der Fortschritt durch foo unterbrochen und die Kontrolle wird zurückgegeben.