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 inBeispiel 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
})()Erklärung
Wir haben unseren Code in einem asynchronen IIFE gekapselt und in der folgenden Reihenfolge ausgeführt:Pizzaliste abrufenGeträ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ügenGetränkeliste abrufen ->Getränke auswählen ->Getränke zum Hinzufügen auswählen WarenkorbDiese 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
}
}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
})()(async () => {
const promise = doSomeAsyncTask()
const value = await promise
console.log(value) // the actual value
})()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路由实现登陆验证控制
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!
So lösen Sie ungültige Synrax
Was tun, wenn der Windows-Fotobetrachter nicht mehr über genügend Speicher verfügt?
Gängige Verschlüsselungsmethoden für die Speicherung verschlüsselter Daten
Einführung in ausländische kostenlose VPS-Software
Der Unterschied zwischen Scratch und Python
Was bedeutet „Netzwerkzugriff verweigert' WLAN?
Port 8080 ist belegt
SQL 5120-Fehlerlösung
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
