Die Verwendung und Methoden von async und await in JavaScript

asynchrone Funktion und await-Schlüsselwort in JS

Funktion Höllenwelt() {

    return "Hallo! Schöne Welt!";

}

console.log(hellworld()); // Hallo! Schöne Welt!

asynchrone Funktion asyHellworld() {

    return "Hallo! Schöne Welt!";

}

console.log(asyHellworld()); // Versprechen { 'Hallo! Schöne Welt! ' }

Die normale Funktion „Hellworld“ gibt einfach die Zeichenfolge „Hello!“ zurück. Schöne Welt! , und die asynchrone Funktion gibt ein Promise-Objekt zurück.

Wenn Sie den von der asynchronen Funktion zurückgegebenen Wert verwenden müssen, müssen Sie danach wie folgt einen .then()-Block hinzufügen:

asynchrone Funktion asyHellworld() {

    return "Hallo! Schöne Welt!";

}

asyHellworld().then((str) => console.log(str)); // Hallo! Schöne Welt!

Das Schlüsselwort „await“ stellt sicher, dass das Promise der asynchronen Funktion abgeschlossen wird und ein Ergebnis zurückgibt, bevor mit der Ausführung anderen Codes fortgefahren wird, der möglicherweise auf den Wert warten muss.

asynchrone Funktion asyHellworld() {

    return await Promise.resolve("Hallo! Schöne Welt!");

}

asyHellworld().then(console.log); // Hallo! Schöne Welt!

Dieser Code ist zwar einfach, zeigt aber die Verwendung des Schlüsselworts „await“ und wie es mit Promise-Objekten innerhalb eines Funktionskörpers funktionieren sollte.

Um den Code leichter verständlich zu machen, entfernen Sie als Nächstes die Promise-Syntax im Code wie folgt:

asynchrone Funktion asyHellworld() {

    return "Hallo! Schöne Welt!";

}

asynchrone Funktion printHello() {

    const strHello = warte auf asyHellworld();

    console.log(strHallo);

}

druckeHallo();

Der obige Code lässt die Verwendung von „async“ und „await“ intuitiver erkennen. Normalerweise werden „async“ und „await“ zur Verarbeitung asynchroner Vorgänge verwendet. Dies ist eine Möglichkeit, Asynchronität in Synchronisierung umzuwandeln.

async deklariert eine Funktion, um diese asynchrone Funktion darzustellen, und await wird verwendet, um auf den Abschluss einer asynchronen Operation in der Funktion zu warten.

Durch die obige Einführung haben wir ein vorläufiges Verständnis von async und await. Wofür können sie also verwendet werden?

Das Schlüsselwort „await“ stellt sicher, dass das Promise der asynchronen Funktion abgeschlossen wird und ein Ergebnis zurückgibt, bevor mit der Ausführung anderen Codes fortgefahren wird, der möglicherweise auf den Wert warten muss.

Daher ist bei der Verarbeitung asynchroner AJAX-Anfragen, beispielsweise in VUE-Projekten, die übliche Verarbeitungsmethode wie folgt:

login(Benutzername, Passwort).then((loginResult) => {

    //Anforderung wird verarbeitet, nachdem die Anmeldeanforderung gesendet wurde console.log("Anmeldung erfolgreich!");

});

Und die Verwendung von „await“ kann folgendermaßen gehandhabt werden:

const loginResult = warte auf login(Benutzername, Passwort);

console.log(Anmeldeergebnis);

Zu beachten ist hierbei, dass await nur in asynchronen Funktionen verwendet werden kann. Der obige Code ist problematisch. Wenn er im Store verarbeitet wird, muss er wie folgt geändert werden:

const Aktionen = {

    async [LOGIN]({ commit }, Nutzlast) {

        const { Benutzername, Passwort } = Nutzlast;

        const loginResult = warte auf login(Benutzername, Passwort);

        console.log(Anmeldeergebnis);

    },

};

Hier zeigt sich, dass der Vorteil beim Umgang mit einer Then-Kette bestehend aus mehreren Promises zum Tragen kommt.

Eine weitere häufige Verwendung ist das Anhalten des Programms, also die Sleep-Methode. Der Implementierungscode lautet wie folgt:

const sleep = (ms) => {
    gib ein neues Promise zurück((auflösen) => setTimeout(auflösen, ms));
};

(asynchron () => {
    console.log("Ausführung starten, 10 Sekunden lang „Hallo“ ausgeben");
    warte auf Schlaf (10 * 1000);
    console.log("Hallo");
})();

Dies ist das Ende dieses Artikels über die Verwendung und Methoden von async und await in JavaScript. Weitere relevante Inhalte zu Js async und await finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!