Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Async/Await | Asynchronous JavaScript and APIs
Advanced JavaScript Mastery
course content

Course Content

Advanced JavaScript Mastery

Advanced JavaScript Mastery

1. Classes
2. DOM Manipulation
3. Events and Event Handling
4. Asynchronous JavaScript and APIs

bookAsync/Await

The async/await syntax is a modern and more readable way to work with promises in JavaScript. It allows developers to write asynchronous code that looks and behaves like synchronous code. Instead of chaining then() calls, you can use await to pause the execution of an async function until a promise is resolved.

How async Functions Work

An async function is a function declared with the async keyword. It returns a Promise by default, and you can use the await keyword within it to pause execution until the promise is resolved.

html

index

css

index

js

index

copy

The fetchData function is declared as async, allowing it to use await to pause execution until a promise resolves. Here, a simulated delay of 2 seconds mimics a data-fetching operation. Once resolved, the result ("Data fetched successfully!") is displayed in the HTML paragraph.

Simplifying Promise Chains with Async/Await

When working with multiple asynchronous operations in sequence, using async/await can simplify code that would otherwise involve promise chaining with then().

Let's see how a series of promises (like fetching and processing data) can be handled more cleanly with async/await.

html

index

css

index

js

index

copy

The processData function calls three asynchronous functions—fetchData, processFetchedData, and displayProcessedData—one after the other, each waiting (await) for the previous operation to complete before moving to the next. This structured flow eliminates the need for chaining promises, improving readability. The final output ("Raw Data processed and displayed on the page") is then shown in the HTML.

Error Handling with try...catch in Async/Await

Handling errors in promise chains with .catch() can become cumbersome, especially when dealing with multiple asynchronous operations. With async/await, you can handle errors using the traditional try...catch block, making error handling more intuitive and readable.

html

index

css

index

js

index

copy

In fetchDataWithError, the try block runs the await operation, and if it succeeds, the result is displayed in the HTML. If an error occurs (as simulated by simulateError), the catch block handles it by setting the paragraph text to the error message ("Error: Something went wrong!").

1. What does the `async` keyword do when added to a function?
2. What is the purpose of the `await` keyword?
3. Which of the following is a benefit of using `async/await` over `.then()` chaining?
What does the `async` keyword do when added to a function?

What does the async keyword do when added to a function?

Select the correct answer

What is the purpose of the `await` keyword?

What is the purpose of the await keyword?

Select the correct answer

Which of the following is a benefit of using `async/await` over `.then()` chaining?

Which of the following is a benefit of using async/await over .then() chaining?

Select the correct answer

Everything was clear?

How can we improve it?

Thanks for your feedback!

Section 4. Chapter 4
some-alt