Entdecken Sie die Leistungsfähigkeit von Async und Wait in JavaScript

In meinem vorherigen Tutorial haben wir die Grundlagen von Promises in JavaScript behandelt. Ich habe am Ende des Artikels gesagt, dass die Versprechen es uns ermöglichen, unseren Code asynchron auszuführen.

In diesem Tutorial lernen wir die async 和 await Schlüsselwörter in JavaScript kennen, die es uns ermöglichen, Promises effektiv zu nutzen und saubereren asynchronen Code zu schreiben.

Funktion asyncdefinieren

Beginnen wir mit asynchronen Funktionen. Betrachten Sie die folgende Begrüßungsfunktion:

function greet() {
  return "Hello, World!";
}

// Outputs: Hello, World!
console.log(greet());

Dies ist nur eine normale JavaScript-Funktion, die wir zuvor gesehen haben. Es gibt lediglich eine Zeichenfolge mit der Aufschrift „Hello, World!“ zurück. Wir können dies jedoch in eine asynchrone Funktion umwandeln, indem wir einfach async davor hinzufügen, etwa so:

async function greet() {
  return "Hello, World!";
}

// Outputs: Promise { <state>: "fulfilled", <value>: "Hello, World!" }
console.log(greet());

Diesmal gibt die Funktion ein Promise-Objekt zurück, dessen Zustandseigenschaft auf „Abgeschlossen“ und dessen Wert auf „Hallo, Welt!“ gesetzt ist. Mit anderen Worten: Das Versprechen wurde erfolgreich gelöst. Wir geben immer noch die Zeichenfolge „Hello, World!“ in der Funktionsdefinition zurück. Die Verwendung des Schlüsselworts

bedeutet jedoch, dass der Rückgabewert in ein analysiertes

-Objekt eingeschlossen wird. Der Wert des aufgelösten Versprechens ist derselbe wie der Wert, den wir von der Funktion async 关键字意味着返回值将包装在已解析的 Promise 对象中。已解决的 Promise 的值将与我们从 async zurückgegeben haben.

Sie können Ihr eigenes Versprechen auch wie folgt aus der async-Funktion zurückgeben:

async function greet() {
  return Promise.resolve("Hello, World!");
}

// Outputs: Hello, World!
greet().then((value) => console.log(value));

Grundsätzlich hilft uns das Schlüsselwort async dabei, eine Funktion zu definieren, die immer ein Versprechen zurückgibt. Sie können ein Promise explizit selbst zurückgeben oder die Funktion jeden Rückgabewert, der kein Promise ist, in ein Promise einschließen lassen.

await Schlüsselwörter

Jede async 函数都可以包含零个或多个 await 表达式。重要的是要记住 await 关键字仅在 async 函数内有效。 await 关键字用于等待 Promise Funktion kann null oder mehr

Ausdrücke enthalten. Es ist wichtig zu bedenken, dass das Schlüsselwort

nur innerhalb einer await-Funktion gültig ist. Das Schlüsselwort

wird verwendet, um darauf zu warten, dass

aufgelöst oder abgelehnt wird, und dann den vollständigen Wert abzurufen. Promise，这种情况下直接使用，原生等待。在这种情况下，不会有对 then() 的隐式调用。表达式可以是 thenable 对象，在这种情况下，将通过调用 then() 方法构造一个新的 Promise 。该表达式也可以是不可thenable 的值。在这种情况下，将构建一个已经实现的 Promise

Wir verwenden das Schlüsselwort

, die Syntax ist wie folgt: async

await expression

Der Ausdruck kann nativ sein

, in diesem Fall wird er direkt verwendet und natives Warten wird verwendet. In diesem Fall erfolgt kein impliziter Aufruf von then(). Der Ausdruck kann ein thenable-Objekt sein. In diesem Fall wird ein neues async 函数中使用 await durch Aufrufen der Methode then() erstellt. Der Ausdruck kann auch ein nicht verwertbarer Wert sein. In diesem Fall wird ein bereits implementiertes

erstellt, das wir verwenden können.

await 关键字与 asyncAngenommen, ein Versprechen wurde erfüllt.

Die Ausführung der Funktion wird weiterhin bis zum nächsten Tick pausiert. Es ist wichtig, sich daran zu erinnern.

Hier ist ein Beispiel für die Verwendung des Schlüsselworts

in einer

-Funktion:

async function greet() {
  let greeting = await "Hello, World!";
  return greeting;
}

// Outputs: [Function: Promise]
console.log(greet().constructor);

// Outputs: Hello, World!
greet().then((msg) => console.log(msg));

Hier ist ein weiteres Beispiel für die Verwendung des Schlüsselworts

mit der Funktion n_greet() 是一个返回字符串作为输出的普通函数。我们的第二个函数是 async 函数，它在 await bei expliziter Verwendung von Promise:

async function greet() {
  let greeting = new Promise((resolve) => {
    setTimeout(() => {
      resolve("Hello, World!");
    }, 2000);
  });
  
  return greeting;
}

// Outputs: [Function: Promise]
console.log(greet().constructor);

// Outputs: Hello, World!
greet().then((msg) => console.log(msg));

Dieses Mal verwenden wir explizit ein Promise, das in 2 Sekunden aufgelöst wird. Daher wird die Begrüßung „Hello, World“ nach zwei Sekunden gedruckt.

Verstehen Sie die Ausführungsreihenfolge von Anweisungenn_greet()

Wir werden nun zwei verschiedene Begrüßungsfunktionen schreiben und sehen, in welcher Reihenfolge sie ihre Ergebnisse ausgeben.

function n_greet(person) {
  return `Hello, ${person}!`;
}

async function a_greet(person) {
  let greeting = await `Hello, ${person}!`;
  return greeting;
}

a_greet()Unsere erste Funktion

ist eine normale Funktion, die als Ausgabe einen String zurückgibt. Unsere zweite Funktion ist die

-Funktion, die einen Ausdruck nach dem Schlüsselwort async 函数，其中包含多个语句。这些语句之一将具有 await 关键字。您将看到，在 async 函数中使用 await 关键字会暂停执行 await verwendet. Der Rückgabewert ist in diesem Fall ein erfülltes Versprechen.

Hier ist der Codeausschnitt, der alle diese Funktionen aufruft und die Ausgabe protokolliert: async 函数包含一个显式定义的 Promise，前面带有 await 关键字。这意味着 await

a_greet("Andrew").then((msg) => console.log(msg));
console.log(n_greet("Adam"));

/* Output in order:
Hello, Adam!
Hello, Andrew! */

Grüße Adam, der Funktionsaufruf ist beendet. Allerdings wurde er zunächst in der Ausgabe begrüßt. Dies liegt daran, dass der Funktionsaufruf direkt eine Zeichenfolge zurückgibt.

async Der Funktionsaufruf, der Andrew zu Beginn begrüßt, führt zum Aufbau eines Versprechens, das erfüllt wurde. Die Ausführung bleibt jedoch bis zum nächsten Taktzyklus ausgesetzt. Aus diesem Grund erscheint die Ausgabebegrüßung nach der Begrüßung an Adam.

🎜Jetzt definieren wir eine etwas komplexere 🎜 Funktion, die mehrere Anweisungen enthält. Eine dieser Anweisungen wird das Schlüsselwort 🎜 haben. Sie werden sehen, dass die Verwendung des Schlüsselworts 🎜 in einer 🎜-Funktion die Ausführung anderer Anweisungen anhält, die auf die 🎜-Anweisung folgen. 🎜

function timeout(ms) {
    return new Promise(resolve => setTimeout(resolve, ms))    
}

async function aa_greet(person) {
  console.log("Before Await..."); 
  await timeout(2000);
  let greeting = `Hello, ${person}!`;
  console.log("After Await...");
  
  return greeting;
}

🎜Unsere 🎜-Funktion enthält ein explizit definiertes Promise, dem das Schlüsselwort 🎜 vorangestellt ist. Das bedeutet, dass das Schlüsselwort 🎜 auf die Erfüllung des Versprechens wartet und dann den erfüllten Wert zurückgibt. Es dauert 2 Sekunden, bis das Versprechen in Erfüllung geht. Nach etwa 2 Sekunden sollte im Konsolenprotokoll „🎜After Await...🎜“ angezeigt werden. 🎜 🎜Dies ist ein Codeausschnitt, der einige Anweisungen unserer 🎜-Funktion aufzeichnet: 🎜

console.log("Before Greeting Function...");
aa_greet("Monty").then((msg) => console.log(msg));
console.log("After Greeting Function...");

/* Output in Order
23:42:15.327 Before Greeting Function...
23:42:15.331 Before Await...
23:42:15.331 After Greeting Function...
23:42:17.333 After Await...
23:42:17.333 Hello, Monty! */

首先记录字符串“Before Greeting Function...”，因为这是我们进行的第一次调用。之后，我们调用 aa_greet() 函数。这会导致输出字符串“Before Await...”。然后，浏览器遇到 await 关键字。所以它等待承诺解决。与此同时，aa_greet()函数之外的代码继续执行。这就是为什么我们在下一个日志条目中得到“After Greeting Function...”字符串作为输出。

一旦承诺得到解决，浏览器就会继续执行，我们会得到“After Await...”作为输出。最后，我们解析的问候语作为承诺返回，因为我们使用 async 函数。我们对这个已解决的 Promise 调用 then() 方法并记录“Hello, Monty!”到控制台。

通过 Fetch API 使用 async 和 await

await 关键字的一个常见用例是从远程 API 获取数据。这允许比嵌套回调或承诺链更干净的代码。

async function getData() {
    // use the fetch API to fetch data from an API endpoint
    const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
    
    // check if the response is okay (HTTP status code 200-299)
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    
    // parse the response as JSON
    const data = await response.json();
    
    return data;
}

在此函数中，首先我们等待对 API 查询的初始响应。如果响应正常，我们就会等待 JSON 格式的完整响应数据。我们返回 JSON 数据，但请记住，由于这是一个异步函数，因此我们实际上返回一个最终解析为该数据的 Promise。因此，如果您想访问结果数据，您必须再次使用类似await关键字的东西！

const data = await getData();

最终想法

在上一篇教程中了解了 Promise 对象后，我们在本教程中讨论了 async 函数和 await 关键字。您现在应该能够编写自己的 async 函数，使用 await 关键字来使用更清晰、更易读的代码实现基于 Promise 的行为。

Das obige ist der detaillierte Inhalt vonEntdecken Sie die Leistungsfähigkeit von Async und Wait in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!