Ein Anfänger -Leitfaden zu JavaScript async/wartet mit Beispielen

Master JavaScript asynchrone Operationen: Async/wartet eine detaillierte Erklärung

In diesem Artikel wird in JavaScript eingehender async/await untersucht, wodurch Sie unterrichtet, wie Sie asynchrone Operationen effizient kontrollieren und klarer und leichter zu lesen können.

Kernpunkte:

• async/await im JavaScript vereinfacht die Verarbeitung asynchroner Vorgänge und lässt den Code so aussehen, als wäre er synchron ausgeführt, aber immer noch nicht blockiert.
Die Funktion
• async gibt ein Versprechen zurück, und das Schlüsselwort await vereint die Funktionsausführung, bis das Versprechen behoben ist, wodurch die Lesbarkeit des Codes und der Flussregelung verbessert wird.
Die Fehlerbehandlung von
• async Funktionen kann mithilfe try/catch block oder Promise effizient verwaltet werden. catch()
Verwenden Sie
• , um das Ausführen von asynchronen Befehlen parallel zu optimieren, sodass mehrere Promise.all gleichzeitig aufgelöst werden können, anstatt nacheinander ausgeführt zu werden. Promise
asynchronisierte Iteratoren und
• -Sloops ermöglichen die korrekte Verarbeitung von for...of -Funktionen in der Schleife, sodass die richtige Ausführungsreihenfolge und ein besseres Leistungsmanagement sicherstellen. async
Die von ES2022 eingeführte obere Schicht ermöglicht die Verwendung von
• in der oberen Ebene des ES -Moduls, wodurch die Integration von asynchronem Code vereinfacht wird, ohne dass zusätzliche Wrapper erforderlich sind. await await

Zusammenfassung des Inhalts:

So erstellen Sie eine asynchrone Funktion von JavaScript

1. • Schlüsselwörter async
   • Schlüsselwörter await
   verschiedene Möglichkeiten, asynchrone Funktionen zu deklarieren
JavaScript
2. /await unterirdische Verwendung Versprechen async
   Wechsel von Versprechen auf
   • /async await
Fehlerbehandlung in asynchronen Funktionen
3. Die Methode
   • mit Funktionsaufruf catch()
4. asynchrone Befehle parallel ausführen
5. asynchron in synchroner Schleife await
6. oberes Level await
7. asynchrone Code zuversichtlich
schreiben

In JavaScript sind einige Operationen asynchron. Dies bedeutet, dass die Ergebnisse oder Werte, die sie produzieren, nicht sofort verfügbar sind.

Betrachten Sie den folgenden Code:

function fetchDataFromApi() {
  // 数据获取逻辑
  console.log(data);
}

fetchDataFromApi();
console.log('数据获取完成');

Der fetchDataFromApi JavaScript -Interpreter wartet nicht, bis die asynchrone 数据获取完成 -Funktion vor der Ausführung der nächsten Anweisung auszuführen ist. Daher werden die tatsächlichen Daten aufgezeichnet, die von der API

zurückgegeben wurden.

async In vielen Fällen ist dies nicht das erwartete Verhalten. Glücklicherweise können wir die Schlüsselwörter await und

verwenden, damit unser Programm darauf warten, dass der asynchrone Betrieb abgeschlossen ist, bevor wir weiter ausführen.

Diese Funktion führt JavaScript in ES2017 ein und wird von allen modernen Browsern unterstützt.

So erstellen Sie eine asynchrone Funktion von JavaScript

fetchDataFromApi Schauen wir uns die Datenerfassungslogik in der Funktion

genauer an. Das Abrufen von Daten in JavaScript ist ein primäres Beispiel für asynchrone Operationen.

Verwenden der Fetch -API können wir dies tun:

function fetchDataFromApi() {
  // 数据获取逻辑
  console.log(data);
}

fetchDataFromApi();
console.log('数据获取完成');

Hier bekommen wir einen Programmierwitz von Jokeapi. Die Antwort der API befindet sich im JSON -Format. Nach Abschluss der Anforderung (unter Verwendung der json() -Methode) extrahieren wir die Antwort und protokollieren dann den Witz an der Konsole.

Bitte beachten Sie, dass Jokeapi eine API von Drittanbietern ist. Daher können wir die Qualität der Witze, die wir zurückgeben, nicht garantieren!

Wenn wir diesen Code in einem Browser oder im Knoten ausführen (Version 17.5 mithilfe des Flags), sehen wir, dass die Konsole den Inhalt immer noch in der falschen Reihenfolge anmeldet. --experimental-fetch

ändern wir es.

Schlüsselwörter async

Das erste, was wir tun müssen, ist, die Einfügungsfunktion als asynchrone Funktion zu markieren. Wir können dies mit dem Schlüsselwort

tun und es vor das Schlüsselwort async stellt: function

function fetchDataFromApi() {
  fetch('https://v2.jokeapi.dev/joke/Programming?type=single')
    .then(res => res.json())
    .then(json => console.log(json.joke));
}

fetchDataFromApi();
console.log('数据获取完成');

asynchronisierte Funktionen geben immer ein Versprechen zurück (mehr dazu später). Links Sie also nur

mit dem Funktionsaufruf, um die richtige Ausführungsreihenfolge zu erhalten: then()

async function fetchDataFromApi() {
  fetch('https://v2.jokeapi.dev/joke/Programming?type=single')
    .then(res => res.json())
    .then(json => console.log(json.joke));
}

Wenn wir den Code jetzt ausführen, werden wir so etwas sehen:

fetchDataFromApi()
  .then(() => {
    console.log('数据获取完成');
  });

Aber wir wollen das nicht! Die Versprechensyntax von JavaScript kann etwas kompliziert sein, und hier können

/async Blitze: Wir können einen asynchronen Code mit Syntax schreiben, das eher wie synchroner Code aussieht und leichter zu lesen ist. await

Schlüsselwörter await

Das nächste, was Sie tun müssen, ist, asynchrone Operationen in der Funktion mit dem Schlüsselwort

vorzubilden. Dadurch wird der JavaScript -Interpreter dazu gezwungen, die Ausführung zu "pausieren" und auf das Ergebnis zu warten. Wir können die Ergebnisse dieser Operationen Variablen zuweisen: await

<code>程序员的浪漫：一行代码解决千行代码的bug。
数据获取完成</code>

Wir müssen auch auf das Ergebnis des Aufrufens der

-Funktion warten: fetchDataFromApi

async function fetchDataFromApi() {
  const res = await fetch('https://v2.jokeapi.dev/joke/Programming?type=single');
  const json = await res.json();
  console.log(json.joke);
}

Wenn wir jetzt versuchen, den Code jetzt auszuführen, werden wir auf einen Fehler stoßen:

await fetchDataFromApi();
console.log('数据获取完成');

Dies liegt daran, dass wir

außerhalb von async -Funktionen in Nicht-Modul-Skripten nicht verwenden können. Wir werden dies später ausführlicher behandeln, aber jetzt ist der einfachste Weg, dieses Problem zu lösen await async Wenn wir den Code jetzt ausführen, sollte alles in der richtigen Reihenfolge ausgegeben werden:

<code>Uncaught SyntaxError: await is only valid in async functions, async generators and modules</code>

Die Tatsache, dass wir diesen zusätzlichen Boilerplate-Code benötigen, ist unglücklich, aber meiner Meinung nach ist der Code immer noch einfacher zu lesen als die vielversprechende Version.

async function fetchDataFromApi() {
  const res = await fetch('https://v2.jokeapi.dev/joke/Programming?type=single');
  const json = await res.json();
  console.log(json.joke);
}

async function init() {
  await fetchDataFromApi();
  console.log('数据获取完成');
}

init();

verschiedene Möglichkeiten, asynchrone Funktionen zu deklarieren

Das vorherige Beispiel verwendet zwei benannte Funktionserklärungen (das Schlüsselwort

, gefolgt vom Funktionsnamen), wir sind jedoch nicht darauf beschränkt. Wir können auch Funktionsausdrücke, Pfeilfunktionen und anonyme Funktionen als

markieren.

function async Wenn Sie die Unterschiede zwischen Funktionserklärungen und Funktionsausdrücken überprüfen möchten, lesen Sie unser Handbuch

(Der folgende Inhalt ist derselbe. Schreiben Sie den Absatz nach Absatz nach dem Originaltext neu, behalten

Das obige ist der detaillierte Inhalt vonEin Anfänger -Leitfaden zu JavaScript async/wartet mit Beispielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!