Async/await höllische Problembehandlung

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
})()

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 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
})()

Wie Sie sehen können, 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 darauf warten, es mitzuteilen

应该如何避免 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
})()

我们将语句分成两个函数。在函数内部，每个语句都依赖于前一个语句的执行。然后我们同时执行这两个函数 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中文网其它相关文章！

推荐阅读：

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!