Gestion des problèmes asynchrones/attendre l'enfer

Cette fois, je vais vous expliquer comment gérer le problème async/wait hell. Quelles sont les précautions pour gérer le problème async/wait hell. Voici des cas pratiques, jetons un coup d'oeil.

Préface

Qu'est-ce que async/await

async/await peut être considéré comme un module co et un générateur Sucre syntaxique pour fonction . Résolvez le code asynchrone js avec une sémantique plus claire.

Les étudiants qui connaissent le module co doivent savoir que le module co est un module écrit par Maître TJ qui utilise une fonction génératrice pour résoudre des processus asynchrones. Il peut être considéré comme l'exécuteur de la fonction génératrice. Async/await est une mise à niveau du module co. Il possède un exécuteur de fonction de générateur intégré et ne repose plus sur le module co. Dans le même temps, async renvoie Promise.

Du point de vue ci-dessus, qu'il s'agisse du module co ou async/await, Promise est utilisé comme unité la plus basique. Les étudiants qui ne connaissent pas bien Promise peuvent d'abord en apprendre davantage sur Promise.

async/await est génial à écrire, mais vous devez faire attention à ces problèmes.

async/await nous libère de l'enfer des rappels, mais cela introduit le problème de l'enfer async/await.

Qu'est-ce que async/wait Hell

Async en Javascript Lors de la programmation , les gens utilisent toujours beaucoup d'instructions wait. Souvent, nos instructions n'ont pas besoin de dépendre des instructions précédentes, ce qui peut entraîner des problèmes de performances.

Exemple d'async/wait hell

Essayons d'écrire un programme pour acheter de la pizza et des boissons :

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

Ce code s'exécute sans problème. Mais ce n’est pas une bonne implémentation car elle ajoute une attente inutile.

Explication

Nous avons encapsulé notre code dans un IIFE asynchrone et l'avons exécuté dans l'ordre suivant :

Obtenir la liste des pizzas
Obtenir la liste des boissons
Sélectionner une pizza dans la liste
Sélectionner une boisson dans la liste
Ajouter la pizza sélectionnée au panier
Ajouter la boisson sélectionnée au panier
Commander les articles du panier dans

Question

Il y a une question ici Pourquoi l'action de sélectionner une pizza dans la liste doit-elle attendre pour obtenir la liste des boissons ? Ces deux opérations ne sont pas liées. Il existe deux groupes d'opérations associées :

Obtenir la liste des pizzas->Sélectionner la pizza->Sélectionner la pizza à ajouter au panier

Obtenir la liste des boissons->Sélectionner les boissons->Sélectionner les boissons à ajouter panier

Ces deux ensembles d'opérations doivent être exécutés simultanément.

Regardons un pire exemple

Cet extrait de code Javascript prend les articles dans le panier et fait une demande de commande.

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

Dans ce cas, la boucle for doit attendre la fin de la fonction sendRequest() avant de passer à l'itération suivante. Mais nous n'avons pas besoin d'attendre. Nous espérons envoyer toutes les demandes le plus rapidement possible. Ensuite, nous pouvons attendre que toutes les demandes soient terminées.

Maintenant que vous devriez avoir une meilleure compréhension de l'enfer async/wait, considérons une autre question

Que se passe-t-il si nous oublions le mot-clé wait ?

Si vous oubliez d'utiliser wait lors de l'appel d'une fonction asynchrone, cela signifie qu'il n'est pas nécessaire d'attendre pour exécuter la fonction. La fonction asynchrone renverra directement une promesse que vous pourrez utiliser plus tard.

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

Ou le programme n'indique pas clairement que vous souhaitez attendre la fin de l'exécution de la fonction. Directement sortie ne terminera pas cette tâche asynchrone. Nous devons donc utiliser le mot-clé wait.

la promesse a un attribut intéressant. Vous pouvez obtenir la promesse dans une certaine ligne de code et attendre qu'elle soit résolue ailleurs. C'est la clé pour résoudre l'enfer asynchrone/attendre.

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

Comme vous pouvez le voir, doSomeAsyncTask renvoie directement une promesse. En même temps, la fonction asynchrone doSomeAsyncTask a commencé son exécution. Afin d'obtenir la valeur de retour de doSomeAsyncTask, nous devons attendre de dire <.>

应该如何避免 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无法刷新页面如何处理

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!