Asynchron und warten in JavaScript

Einführung in asynchrones JavaScript

JavaScript ist Single-Threaded, was bedeutet, dass es jeweils nur eine Aufgabe ausführen kann. Um mehrere Aufgaben zu bewältigen, insbesondere E/A-Vorgänge wie API-Anfragen oder das Lesen von Dateien, verwendet JavaScript asynchrone Programmierung. Dadurch können andere Aufgaben weiter ausgeführt werden, während auf den Abschluss lang andauernder Vorgänge gewartet wird.

Rückruffunktionen

Anfangs wurden asynchrone Aufgaben in JavaScript mithilfe von Callback-Funktionen abgewickelt. Ein Callback ist eine Funktion, die als Argument an eine andere Funktion übergeben wird und dann nach Abschluss der Operation ausgeführt wird.

Beispiel:

function fetchData(callback) {
    setTimeout(() => {
        callback('Data fetched');
    }, 2000);
}

fetchData((message) => {
    console.log(message);
});

Versprechen

Versprechen wurden eingeführt, um asynchrone Vorgänge effektiver abzuwickeln. Ein Versprechen stellt einen Wert dar, der jetzt, in der Zukunft oder nie verfügbar sein kann.

Beispiel:

let promise = new [Promise]((resolve, reject) => {
    setTimeout(() => {
        resolve('Data fetched');
    }, 2000);
});

promise.then((message) => {
    console.log(message);
}).catch((error) => {
    console.error(error);
});

Asynchron/Warten

Async/Await ist ein syntaktischer Zucker, der auf Promises aufbaut und dafür sorgt, dass asynchroner Code wie synchroner Code aussieht und sich wie synchroner Code verhält. Dadurch ist der Code leichter zu lesen und zu verstehen.

Grundlegende Verwendung

1. Asynchrone Funktion: Eine mit dem Schlüsselwort async deklarierte Funktion gibt ein Versprechen zurück.
2. Await-Schlüsselwort: Das Wait-Schlüsselwort kann nur innerhalb einer asynchronen Funktion verwendet werden. Dadurch wartet JavaScript, bis das Versprechen aufgelöst oder abgelehnt wird.

Beispiel:

async function fetchData() {
    let promise = new Promise((resolve, reject) => {
        setTimeout(() => resolve('Data fetched'), 2000);
    });

    let result = await promise; // Wait until the promise resolves
    console.log(result);
}

fetchData();

Fehlerbehandlung

Mit async/await wird die Fehlerbehandlung mithilfe von try...catch-Blöcken unkompliziert.

Beispiel:

async function fetchData() {
    try {
        let promise = new Promise((resolve, reject) => {
            setTimeout(() => reject('Error fetching data'), 2000);
        });

        let result = await promise;
        console.log(result);
    } catch (error) {
        console.error(error);
    }
}

fetchData();

Parallele Ausführung

Um mehrere asynchrone Vorgänge parallel auszuführen, kann Promise.all mit async/await verwendet werden.

Beispiel:

async function fetchAllData() {
    let promise1 = new Promise((resolve) => setTimeout(() => resolve('Data 1'), 2000));
    let promise2 = new Promise((resolve) => setTimeout(() => resolve('Data 2'), 1000));

    let results = await Promise.all([promise1, promise2]);
    console.log(results); // ['Data 1', 'Data 2']
}

fetchAllData();

Fortgeschrittene Konzepte

Sequentielle Ausführung

Wenn Aufgaben nacheinander ausgeführt werden müssen, verwenden Sie „await“ nacheinander.

Beispiel:

async function fetchSequentialData() {
    let data1 = await new Promise((resolve) => setTimeout(() => resolve('Data 1'), 2000));
    console.log(data1);

    let data2 = await new Promise((resolve) => setTimeout(() => resolve('Data 2'), 1000));
    console.log(data2);
}

fetchSequentialData();

Kombination von Async/Await mit traditionellen Versprechen

Sie können Async/Await mit traditionellen Promise-Methoden wie then und Catch kombinieren.

Beispiel:

async function fetchData() {
    let data = await fetch('https://api.example.com/data');
    return data.json();
}

fetchData().then((data) => {
    console.log(data);
}).catch((error) => {
    console.error(error);
});

Abschluss

Async/Await vereinfacht die Arbeit mit asynchronen Vorgängen in JavaScript, indem es eine sauberere und besser lesbare Möglichkeit bietet, asynchronen Code zu schreiben. Es ersetzt effektiv Rückrufe und macht die Arbeit mit Promises intuitiver.

Das obige ist der detaillierte Inhalt vonAsynchron und warten in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!