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!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
The operation process of WIN10 service host occupying too much CPU
Mar 27, 2024 pm 02:41 PM
1. First, we right-click the blank space of the taskbar and select the [Task Manager] option, or right-click the start logo, and then select the [Task Manager] option. 2. In the opened Task Manager interface, we click the [Services] tab on the far right. 3. In the opened [Service] tab, click the [Open Service] option below. 4. In the [Services] window that opens, right-click the [InternetConnectionSharing(ICS)] service, and then select the [Properties] option. 5. In the properties window that opens, change [Open with] to [Disabled], click [Apply] and then click [OK]. 6. Click the start logo, then click the shutdown button, select [Restart], and complete the computer restart.
Summary of frequently asked questions about importing Excel data into Mysql: How to deal with error log problems encountered when importing data?
Sep 10, 2023 pm 02:21 PM
Summary of frequently asked questions about importing Excel data into Mysql: How to deal with error log problems encountered when importing data? Importing Excel data into a MySQL database is a common task. However, during this process, we often encounter various errors and problems. One of them is the error log issue. When we try to import data, the system may generate an error log listing the specific information about the error that occurred. So, how should we deal with the error log when we encounter this situation? First, we need to know how
A quick guide to CSV file manipulation
Dec 26, 2023 pm 02:23 PM
Quickly learn how to open and process CSV format files. With the continuous development of data analysis and processing, CSV format has become one of the widely used file formats. A CSV file is a simple and easy-to-read text file with different data fields separated by commas. Whether in academic research, business analysis or data processing, we often encounter situations where we need to open and process CSV files. The following guide will show you how to quickly learn to open and process CSV format files. Step 1: Understand the CSV file format First,
Learn how to handle special characters and convert single quotes in PHP
Mar 27, 2024 pm 12:39 PM
In the process of PHP development, dealing with special characters is a common problem, especially in string processing, special characters are often escaped. Among them, converting special characters into single quotes is a relatively common requirement, because in PHP, single quotes are a common way to wrap strings. In this article, we will explain how to handle special character conversion single quotes in PHP and provide specific code examples. In PHP, special characters include but are not limited to single quotes ('), double quotes ("), backslash (), etc. In strings
How to handle java.lang.UnsatisfiedLinkError error in Java?
Aug 24, 2023 am 11:01 AM
The Java.lang.UnsatisfiedLinkError exception occurs at runtime when an attempt to access or load a native method or library fails due to a mismatch between its architecture, operating system, or library path configuration and the referenced one. It usually indicates that there is an incompatibility with the architecture, operating system configuration, or path configuration that prevents success - usually the local library referenced does not match the library installed on the system and is not available at runtime. To overcome this error, the key is to be native The library is compatible with your system and can be accessed through its library path setting. You should verify that library files exist in their specified locations and meet system requirements. java.lang.UnsatisfiedLinkErrorjava.lang
How to handle XML and JSON data formats in C# development
Oct 09, 2023 pm 06:15 PM
How to handle XML and JSON data formats in C# development requires specific code examples. In modern software development, XML and JSON are two widely used data formats. XML (Extensible Markup Language) is a markup language used to store and transmit data, while JSON (JavaScript Object Notation) is a lightweight data exchange format. In C# development, we often need to process and operate XML and JSON data. This article will focus on how to use C# to process these two data formats, and attach
How to crawl and process data by calling API interface in PHP project?
Sep 05, 2023 am 08:41 AM
How to crawl and process data by calling API interface in PHP project? 1. Introduction In PHP projects, we often need to crawl data from other websites and process these data. Many websites provide API interfaces, and we can obtain data by calling these interfaces. This article will introduce how to use PHP to call the API interface to crawl and process data. 2. Obtain the URL and parameters of the API interface. Before starting, we need to obtain the URL of the target API interface and the required parameters.
How to solve the problem after the upgrade from win7 to win10 fails?
Dec 26, 2023 pm 07:49 PM
If the operating system we use is win7, some friends may fail to upgrade from win7 to win10 when upgrading. The editor thinks we can try upgrading again to see if it can solve the problem. Let’s take a look at what the editor did for details~ What to do if win7 fails to upgrade to win10. Method 1: 1. It is recommended to download a driver first to evaluate whether your computer can be upgraded to Win10. 2. Then use the driver test after upgrading. Check if there are any driver abnormalities, and then fix them with one click. Method 2: 1. Delete all files under C:\Windows\SoftwareDistribution\Download. 2.win+R run "wuauclt.e
