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按钮多次点击重复提交数据如何处理

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!