Home >Web Front-end >JS Tutorial >Async/await hell problem handling
This time I will bring you how to deal with the async/await hell problem. What are the precautions for dealing with the async/await hell problem. Here is a practical case, let’s take a look.
Preface
What is async/await
async/await can be said to be a co module and a generator Syntax sugar for function. Solve js asynchronous code with clearer semantics.
Students who are familiar with the co module should know that the co module is a module written by Master TJ that uses a generator function to solve asynchronous processes. It can be regarded as the executor of the generator function. Async/await is an upgrade to the co module. It has a built-in generator function executor and no longer relies on the co module. At the same time, async returns Promise.
From the above point of view, whether it is the co module or async/await, Promise is used as the most basic unit. Students who do not know much about Promise can first learn more about Promise.
async/await is fun to write, but you should pay attention to these problems.
async/await gets us out of callback hell, but it introduces the problem of async/await hell.
What is async/await hell
Async in Javascript When programming, people always use a lot of await statements. Many times our statements do not need to depend on previous statements, which can lead to performance problems.
async/await hell example
We try to write a program to buy pizza and drinks:
(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 })()
This The code runs without problems. But it's not a good implementation because it adds unnecessary waiting.
Instructions
We have encapsulated our code in an asynchronous IIFE and executed it in the following order:
Get the pizza list
Get the drink list
Select a pizza from the list
Select a drink from the list
Add the selected pizza to the shopping cart
Add the selected drink to the shopping cart
Order the shopping cart Items in
Question
There is a question here. Why does the action of selecting pizza from the list have to wait to get the drink list? These two are unrelated operations. There are two groups of related operations:
Get the pizza list-》Select the pizza-》Select the pizza to add to the shopping cart
Get the drink list-》Select the drink-》Select the drink to add to the shopping cart
These two sets of operations should be executed concurrently.
Let’s look at a worse example
This Javascript code snippet removes the items in the shopping cart and makes an order request.
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 this case the for loop must wait for the sendRequest() function to complete before continuing with the next iteration. But we don't need to wait. We hope to send all requests as quickly as possible. Then we can wait for all requests to complete.
Now that you should have a better understanding of async/await hell, let’s consider another question
What happens if we forget the await keyword?
If you forget to use await when calling an asynchronous function, it means that there is no need to wait to execute the function. The async function will directly return a promise that you can use later.
(async () => { const value = doSomeAsyncTask() console.log(value) // an unresolved promise })()
Or the program is not clear and you want to wait for the function to finish executing. Direct exit will not complete this asynchronous task. So we need to use the await keyword.
promise has an interesting property. You can get the promise in a certain line of code and wait for it to resolve elsewhere. This is the key to solving async/await hell.
(async () => { const promise = doSomeAsyncTask() const value = await promise console.log(value) // the actual value })()
As you can see doSomeAsyncTask directly returns a Promise. At the same time, the asynchronous function doSomeAsyncTask has started execution. In order to get the return value of doSomeAsyncTask, we need to await to tell
应该如何避免 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-router3.0版本router.push无法刷新页面如何处理
The above is the detailed content of Async/await hell problem handling. For more information, please follow other related articles on the PHP Chinese website!