Wozu dient das Warten in Vue?

Await bedeutet „Warten“. Die Verwendung von „await“ zusammen mit „async“ ist gleichbedeutend damit, dass eine asynchrone Funktion auf das Rückgabeergebnis des folgenden Ausdrucks wartet zum nächsten Schritt.

Die Betriebsumgebung dieses Artikels: Windows 10-System, Vue Version 2.9.6, DELL G3-Computer.

Was ist die Verwendung von „await“ in Vue? Lassen Sie uns zunächst über die Verwendung von „async“ sprechen. Es wird als Schlüsselwort vor der Funktion platziert, um anzuzeigen, dass die Funktion eine asynchrone Funktion ist, da „async“ „asynchron“ und „asynchron“ bedeutet Funktion bedeutet auch, dass die Ausführung der Funktion die Ausführung des folgenden Codes nicht blockiert. Schreiben Sie eine asynchrone Funktion

async function timeout() {
　　return 'hello world';
}

　Die Syntax ist sehr einfach. Fügen Sie einfach das Schlüsselwort async vor der Funktion hinzu, um anzuzeigen, dass sie asynchron ist. Auch die asynchrone Funktion ist eine Funktion. Rufen Sie sie einfach direkt mit Klammern auf, indem Sie den Satz

rrree

hinzufügen Beim Aufruf der asynchronen Funktion sehen wir, dass die asynchrone Funktion „Timeout“ aufgerufen wird, aber keine Ausgabe erfolgt. Machen Sie sich keine Sorgen, sehen Sie sich an, was die Ausführung von „timeout()“ zurückgibt ? Ändern Sie die obige timeout()-Anweisung in console.log(timeout()). Wert, wir sollten die Methode then verwenden und den Code weiter ändern mit dem, was wir gerade gesagt haben.

Zu diesem Zeitpunkt stellen Sie möglicherweise fest, dass das Versprechen in der Konsole aufgelöst wurde. Dies ist das interne Implementierungsprinzip der asynchronen Funktion. Wenn die asynchrone Funktion einen Wert zurückgibt, wenn die Funktion aufgerufen wird. Die Promise.solve()-Methode wird intern aufgerufen, um sie in ein Promise-Objekt umzuwandeln. Was passiert jedoch, wenn innerhalb der Timeout-Funktion ein Fehler ausgegeben wird? Ändern Sie die Timeout-Funktion

console.log;
async function timeout() {
    return 'hello world'
}
timeout();
console.log('虽然在后面，但是我先执行');

　Die Konsole sieht wie folgt aus:

　Wenn die Funktion einen Fehler auslöst, verfügt das Versprechensobjekt über eine Catch-Methode, um ihn abzufangen.

async function timeout() {
    return 'hello world'
}
console.log(timeout());
console.log('虽然在后面，但是我先执行');

　Das Schlüsselwort async ist fast da, schauen wir uns an Das Schlüsselwort „await“ bedeutet erneut „Warten“. Worauf wartet es also und was folgt darauf? Es ist jedoch wahrscheinlicher, dass wir einen Ausdruck einfügen, der ein Versprechensobjekt zurückgibt Schreiben Sie nun eine Funktion, um ein Promise-Objekt zurückzugeben. Dann multiplizieren Sie den Wert mit 2. Schreiben Sie nun eine asynchrone Funktion, damit Sie das Schlüsselwort „Was“ verwenden können ist ein Ausdruck, der das Promise-Objekt zurückgibt, sodass Sie den Aufruf der Funktion doubleAfter2seconds danach schreiben können Die Funktion „Warten“ bedeutet, dass der Code hier angehalten und nicht mehr ausgeführt wird. Warten Sie dann, bis das Versprechen aufgelöst ist und geben Sie ihn zurück. Wenn Sie auf „await“ stoßen, wird die Ausführung unterbrochen, bis die Ausführung von „doubleAfter2seconds(30)“ abgeschlossen ist. Nach 2 Sekunden wird das Versprechen aufgelöst und gibt einen Wert von 60 zurück. Zu diesem Zeitpunkt ruft das Warten den Rückgabewert 60 ab, weist ihn dann dem Ergebnis zu und pausiert. Am Ende beginnt der Code mit der Ausführung und führt die Konsole aus .log-Anweisung.

　Bei dieser Funktion sehen wir möglicherweise nicht die Rolle von async/await. Was ist, wenn wir die Werte von 3 Zahlen berechnen und dann die erhaltenen Werte ausgeben möchten?

async function timeout() {
    return 'hello world'
}
timeout().then(result => {
    console.log(result);
})
console.log('虽然在后面，但是我先执行');

Nach 6 Sekunden gibt die Konsole 220 aus. Wir können sehen, dass das Schreiben von asynchronem Code genauso ist wie das Schreiben von synchronem Code, und es gibt keinen Rückrufbereich mehr.

Hinweis:

Async und Wait basieren auf Versprechen. Funktionen, die Async verwenden, geben immer ein Promise-Objekt zurück. Denken Sie daran, dass Sie hier häufig Fehler machen können.

Bei Verwendung von „await“ pausieren wir die Funktion, nicht den gesamten Code.

Async und Wait sind nicht blockierend.

Sie können weiterhin Promise wie Promise.all() verwenden.

【Verwandte Empfehlung: „

vue.js Tutorial

“】

Das obige ist der detaillierte Inhalt vonWozu dient das Warten in Vue?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!