Wie man mit dem Problem der verschwendeten Leistung von async/await umgeht

Dieses Mal erkläre ich Ihnen, wie Sie mit dem Problem der Asynchron-/Warten-Leistungsverschwendung umgehen können und welche Vorsichtsmaßnahmen es gibt, um mit dem Problem der Asynchron-/Warten-Verschwendungsleistung umzugehen Fall, werfen wir einen Blick darauf.

Vorwort

Was ist async/await

async/await kann als Co-Modul und Generator Syntaktischer Zucker für Funktionen. Lösen Sie asynchronen js-Code mit klarerer Semantik.

Studenten, die mit dem Co-Modul vertraut sind, sollten wissen, dass das Co-Modul ein von Master TJ geschriebenes Modul ist, das eine Generatorfunktion zur Lösung asynchroner Prozesse verwendet. Es kann als Ausführer der Generatorfunktion angesehen werden. Async/await ist ein Upgrade des Co-Moduls. Es verfügt über einen integrierten Generatorfunktions-Executor und ist nicht mehr auf das Co-Modul angewiesen. Gleichzeitig gibt async Promise zurück.

Aus der oben genannten Sicht wird Promise als grundlegendste Einheit verwendet, unabhängig davon, ob es sich um das Co-Modul oder um Async/Await handelt. Schüler, die Promise nicht gut kennen, können zunächst mehr über Promise lernen.

async/await ist großartig zu schreiben, aber Sie sollten auf diese Probleme achten.

async/await befreit uns von der Callback-Hölle, bringt aber das Problem der async/await-Hölle mit sich.

Was ist Async/Await Hell?

Async in

Javascript Beim Programmieren Oftmals müssen unsere Anweisungen nicht von vorherigen Anweisungen abhängen, was zu Leistungsproblemen führen kann.

Beispiel für async/await hell

Versuchen wir, ein Programm zu schreiben, um Pizza und Getränke zu kaufen:

(async () => {
 const pizzaData = await getPizzaData() // async call
 const drinkData = await getDrinkData() // async call
 const chosenPizza = choosePizza() // sync call
 const chosenDrink = chooseDrink() // sync call
 await addPizzaToCart(chosenPizza) // async call
 await addDrinkToCart(chosenDrink) // async call
 orderItems() // async call
})()

Das Der Code läuft ohne Probleme. Aber es ist keine gute Implementierung, weil es unnötige Wartezeiten mit sich bringt.

Erklärung

Wir haben unseren Code in einem asynchronen IIFE gekapselt und in der folgenden Reihenfolge ausgeführt:

Pizzaliste abrufen

Getränkeliste abrufen
Pizza aus der Liste auswählen
Getränk aus der Liste auswählen
Ausgewählte Pizza zum Warenkorb hinzufügen
Ausgewähltes Getränk zum Warenkorb hinzufügen
Artikel im Warenkorb bestellen in

Frage

Hier gibt es eine Frage: Warum muss die Auswahl einer Pizza aus der Liste warten, bis die Getränkekarte angezeigt wird? Diese beiden Vorgänge haben nichts miteinander zu tun. Es gibt zwei Gruppen verwandter Vorgänge:

Pizzaliste abrufen ->Pizza auswählen ->Pizza auswählen und zum Warenkorb hinzufügen

Getränkeliste abrufen ->Getränke auswählen ->Getränke zum Hinzufügen auswählen Warenkorb

Diese beiden Vorgänge sollten gleichzeitig ausgeführt werden.

Sehen wir uns ein schlechteres Beispiel an

Dieses Javascript-Code-Snippet nimmt die Artikel im Warenkorb und stellt eine Bestellanfrage.

async function orderItems() {
 const items = await getCartItems() // async call
 const noOfItems = items.length
 for(var i = 0; i < noOfItems; i++) {
 await sendRequest(items[i]) // async call
 }
}

In diesem Fall muss die for-Schleife warten, bis die Funktion sendRequest() abgeschlossen ist, bevor sie mit der nächsten Iteration fortfährt. Aber wir müssen nicht warten. Wir hoffen, alle Anfragen schnellstmöglich versenden zu können. Dann können wir warten, bis alle Anfragen abgeschlossen sind.

Da Sie nun ein besseres Verständnis von „async/await hell“ haben sollten, schauen wir uns eine weitere Frage an.

Was passiert, wenn wir das Schlüsselwort „await“ vergessen?

Wenn Sie beim Aufrufen einer asynchronen Funktion vergessen, „await“ zu verwenden, bedeutet dies, dass Sie nicht auf die Ausführung der Funktion warten müssen. Die asynchrone Funktion gibt direkt ein Versprechen zurück, das Sie später verwenden können.

(async () => {
 const value = doSomeAsyncTask()
 console.log(value) // an unresolved promise
})()

Oder das Programm ist nicht klar und Sie möchten warten, bis die Ausführung der Funktion abgeschlossen ist.

exit wird diese asynchrone Aufgabe nicht abschließen. Daher müssen wir das Schlüsselwort „await“ verwenden.

Versprechen hat eine interessante Eigenschaft: Sie können das Versprechen in einer Codezeile abrufen und darauf warten, dass es an anderer Stelle aufgelöst wird. Dies ist der Schlüssel zur Lösung der Async/Wait-Hölle.

(async () => {
 const promise = doSomeAsyncTask()
 const value = await promise
 console.log(value) // the actual value
})()

Wie Sie sehen, gibt doSomeAsyncTask direkt ein Promise zurück. Gleichzeitig hat die asynchrone Funktion doSomeAsyncTask mit der Ausführung begonnen. Um den Rückgabewert von doSomeAsyncTask zu erhalten, müssen wir dies mitteilen >

wie man Asynchronität vermeidet /warte auf die Hölle

首先我们需要知道哪些命名是有前后依赖关系的。

然后将有依赖关系的系列操作进行分组合并成一个异步操作。

同时执行这些异步函数。

我们来重写这写例子：

async function selectPizza() {
 const pizzaData = await getPizzaData() // async call
 const chosenPizza = choosePizza() // sync call
 await addPizzaToCart(chosenPizza) // async call
}
async function selectDrink() {
 const drinkData = await getDrinkData() // async call
 const chosenDrink = chooseDrink() // sync call
 await addDrinkToCart(chosenDrink) // async call
}
(async () => {
 const pizzaPromise = selectPizza()
 const drinkPromise = selectDrink()
 await pizzaPromise
 await drinkPromise
 orderItems() // async call
})()
// Although I prefer it this way
(async () => {
 Promise.all([selectPizza(), selectDrink()].then(orderItems) // async call
})()

我们将语句分成两个函数。在函数内部，每个语句都依赖于前一个语句的执行。然后我们同时执行这两个函数 selectPizza()和selectDrink() 。

在第二个例子中我们需要处理未知数量的 Promise。处理这个问题非常简单，我们只需要创建一个数组将所有 Promise 存入其中，使用 Promise.all() 方法并行执行：

async function orderItems() {
 const items = await getCartItems() // async call
 const noOfItems = items.length
 const promises = []
 for(var i = 0; i < noOfItems; i++) {
 const orderPromise = sendRequest(items[i]) // async call
 promises.push(orderPromise) // sync call
 }
 await Promise.all(promises) // async call
}

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

React怎样在react-router路由实现登陆验证控制

Angular路由内路由守卫该如何使用

Das obige ist der detaillierte Inhalt vonWie man mit dem Problem der verschwendeten Leistung von async/await umgeht. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!