Dieses Mal werde ich Ihnen zeigen, wie Sie mit dem Async/Wait-Hell-Problem umgehen können.
VorwortWas ist async/await
async/await kann als Co-Modul und Generator Syntaktischer Zucker für
Funktion . 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
})()Nach dem Login kopieren
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ählenGeträ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
}
}Nach dem Login kopieren
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
})()Nach dem Login kopieren
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 ein interessantes Attribut
Sie können das Versprechen in einer bestimmten 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
})()Nach dem Login kopieren
应该如何避免 async/await 地狱
首先我们需要知道哪些命名是有前后依赖关系的。
然后将有依赖关系的系列操作进行分组合并成一个异步操作。
同时执行这些异步函数。
我们来重写这写例子：
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
})()Nach dem Login kopieren
我们将语句分成两个函数。在函数内部，每个语句都依赖于前一个语句的执行。然后我们同时执行这两个函数 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
}Nach dem Login kopieren
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
vue按钮多次点击重复提交数据如何处理
vue-router3.0版本router.push无法刷新页面如何处理
Das obige ist der detaillierte Inhalt vonAsync/await höllische Problembehandlung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
