So verwenden Sie Async in Javascript

Da Webanwendungen immer komplexer werden, wird die asynchrone Programmierung immer wichtiger. In JavaScript können wir das Schlüsselwort async/await verwenden, um asynchrone Vorgänge zu verwalten. In diesem Artikel wird die grundlegende Verwendung von Async vorgestellt und einige Beispiele bereitgestellt, die Ihnen das Verständnis erleichtern.

Was ist asynchron?

async-Funktion ist eine neue asynchrone Programmiermethode, die in ES6 eingeführt wurde. Das Schlüsselwort async kann eine JavaScript-Funktion in eine asynchrone Funktion umwandeln, wodurch die Funktion ein Promise-Objekt zurückgibt und sie bei der Verarbeitung asynchroner Vorgänge prägnanter und klarer wird. Asynchrone Funktionen werden häufig mit dem Schlüsselwort „await“ verwendet, das die Ausführung der asynchronen Funktion anhält, bis das Versprechen abgeschlossen ist.

Die Syntax der asynchronen Funktion lautet wie folgt:

async function functionName() {
    //异步操作
}

Asynchron verwenden

Bei Verwendung asynchroner Funktionen müssen Sie normalerweise Promise-Objekte verwenden Kombination. Wenn wir beispielsweise ein Stück Remote-Daten abrufen möchten, können wir die Fetch-Funktion verwenden:

async function fetchData() {
    const response = await fetch('http://example.com/data');
    const data = await response.json();
    return data;
}

Im obigen Code erstellen wir eine asynchrone Funktion namens fetchData und verwenden die Fetch-Funktion, um sie zu initiieren Eine Remote-Anfrage. Da es sich bei der Abruffunktion um einen asynchronen Vorgang handelt, müssen wir das Schlüsselwort „await“ verwenden, um auf die Fertigstellung des Promise-Objekts zu warten. Wir können eine Destrukturierungszuweisung verwenden, um die erhaltenen Daten in den variablen Daten zu speichern und sie zurückzugeben, nachdem das von „await“ zurückgegebene Versprechen abgeschlossen ist.

Umgang mit mehreren Promise

Wenn wir mehrere Promise-Objekte verarbeiten müssen, können wir die Methode Promise.all() verwenden. Die Promise.all()-Methode kombiniert Promise-Objekte zu einem einzigen Promise-Objekt und gibt ein Array zurück, das die Ergebnisse jedes Promise-Objekts enthält, wenn alle Promise-Objekte erfolgreich sind. Wenn eines der Promise-Objekte fehlschlägt, gibt diese Methode sofort ein fehlgeschlagenes Promise-Objekt zurück und wartet nicht länger auf das ausstehende Promise-Objekt.

Wenn wir beispielsweise Daten von zwei entfernten Datenquellen gleichzeitig abrufen und nach Erhalt beider Datenquellen arbeiten möchten, können wir folgendermaßen vorgehen:

async function fetchData() {
    const [data1, data2] = await Promise.all([(async () => {
        const response = await fetch('http://example.com/data1');
        return response.json();
    })(), (async () => {
        const response = await fetch('http://example.com/data2');
        return response.json();
    })()]);
    console.log(data1, data2);
}

In Im obigen Code haben wir eine asynchrone Funktion namens fetchData erstellt und die Methode Promise.all() verwendet, um auf Daten von zwei Remote-Datenquellen zu warten. Wir haben eine selbstausführende Funktion und das Schlüsselwort async/await verwendet, um zwei Datenquellen abzurufen und sie in ein Array von Promise-Objekten zu formen. Wenn die Daten aus beiden Datenquellen vollständig geparst wurden, speichern wir sie in den Variablen data1 und data2 und führen eine einfache Protokollierung auf der Konsole durch.

Fehlerbehandlung

Bei der Fehlerbehandlung in asynchronen Funktionen verwenden wir normalerweise Try/Catch-Anweisungen. Da die asynchrone Funktion ein Promise-Objekt zurückgibt, wird das zurückgegebene Promise-Objekt abgelehnt, wenn wir eine Ausnahme auslösen. Wir können diese Ausnahme in einem Catch-Block abfangen und behandeln.

Zum Beispiel können wir auf eine Ausnahme stoßen, bei der die Netzwerkanforderung fehlschlägt, wie unten gezeigt:

async function fetchData() {
    try {
        const response = await fetch('http://example.com/data');
        const data = await response.json();
        return data;
    } catch (error) {
        console.error(error);
    }
}

Im obigen Code erstellen wir eine asynchrone Datei mit dem Namen fetchData. Die Funktion verwendet try /catch-Anweisungen zur Behandlung von Ausnahmen, wenn Netzwerkanforderungen fehlschlagen. Wenn die Anfrage erfolgreich ist, speichern wir die Daten in der Variablen data und geben sie zurück. Andernfalls geben wir den Fehler auf der Konsole aus.

Fazit

Das Schlüsselwort async/await ist eine praktische Möglichkeit für JavaScript, asynchrone Programmierung zu verwalten. Die Verwendung von async/await führt zu saubererem Code, der leichter zu lesen und zu verstehen ist. Wenn Sie mehrere asynchrone Vorgänge verwalten oder Fehler behandeln müssen, können Sie dazu auch Promise- und Try/Catch-Anweisungen verwenden. Ich hoffe, dieser Artikel hilft Ihnen!

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Async in Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!