JavaScript async and await

Introduction

Asynchronous programming is a fundamental part of modern web development, allowing JavaScript to perform non-blocking operations such as fetching data from APIs or reading files. While Promises provide a powerful way to handle asynchronous operations, they can sometimes lead to callback hell or complex chaining, making the code hard to read and maintain. This is where async and await come in. They offer a cleaner syntax that makes asynchronous code look more like synchronous code, improving readability and reducing errors.

In this tutorial, you'll learn how to use async and await to write asynchronous JavaScript code that looks synchronous. We'll start with the basics and gradually move to more complex examples.

Core Content

What is async/await?

The async and await keywords were introduced in ES2017 to simplify working with Promises. Here's a brief overview of each:

• async: This keyword is used to declare a function as asynchronous. An async function always returns a Promise.
• await: This keyword is used inside an async function to pause the execution until a Promise is resolved or rejected.

Basic Syntax

Let's start with a simple example to understand how async and await work.

1// Define an asynchronous function
2async function fetchData() {
3// Await keyword pauses the execution until the Promise is resolved
4const response = await fetch('https://api.example.com/data');
5const data = await response.json();
6return data;
7}
8 
9// Call the async function and handle the result
10fetchData()
11.then(data => console.log(data))
12.catch(error => console.error(error));

{
"id": 1,
"name": "Example Data",
"value": 42
}

In this example, the fetchData function is declared as async, allowing us to use the await keyword inside it. The await keyword pauses the execution of the function until the Promise returned by fetch and response.json() are resolved. Once both Promises are resolved, the data is returned from the fetchData function.

Error Handling

Handling errors in async functions can be done using try-catch blocks, similar to synchronous code.

1async function fetchData() {
2try {
3  const response = await fetch('https://api.example.com/data');
4  if (!response.ok) {
5    throw new Error('Network response was not ok');
6  }
7  const data = await response.json();
8  return data;
9} catch (error) {
10  console.error(error);
11}
12}
13 
14fetchData();

Error: Network response was not ok

In this example, the try-catch block is used to handle any errors that occur during the execution of the async function. If an error occurs, it will be caught and logged to the console.

Multiple Async Operations

You can use await with multiple asynchronous operations inside an async function. Here's how you can fetch data from multiple APIs in sequence.

1async function fetchData() {
2const response1 = await fetch('https://api.example.com/data1');
3const data1 = await response1.json();
4 
5const response2 = await fetch('https://api.example.com/data2');
6const data2 = await response2.json();
7 
8return { data1, data2 };
9}
10 
11fetchData()
12.then(data => console.log(data))
13.catch(error => console.error(error));

{
"data1": {
  "id": 1,
  "name": "Data One"
},
"data2": {
  "id": 2,
  "name": "Data Two"
}
}

In this example, the fetchData function fetches data from two different APIs in sequence. The execution is paused at each await keyword until the corresponding Promise is resolved.

Parallel Async Operations

If you want to perform multiple asynchronous operations concurrently and wait for all of them to complete, you can use Promise.all.

1async function fetchData() {
2const [response1, response2] = await Promise.all([
3  fetch('https://api.example.com/data1'),
4  fetch('https://api.example.com/data2')
5]);
6 
7const data1 = await response1.json();
8const data2 = await response2.json();
9 
10return { data1, data2 };
11}
12 
13fetchData()
14.then(data => console.log(data))
15.catch(error => console.error(error));

{
"data1": {
  "id": 1,
  "name": "Data One"
},
"data2": {
  "id": 2,
  "name": "Data Two"
}
}

In this example, Promise.all is used to fetch data from two APIs concurrently. The execution waits for all Promises in the array to resolve before proceeding.

Common Mistakes

1. Using await outside an async function: You cannot use await directly in the top-level code. It must be inside an async function.
2. Not handling errors properly: Always use try-catch blocks or .catch() methods to handle potential errors in async functions.

Practical Example

Let's create a complete example that fetches user data and posts it to another API.

1async function getUserData() {
2const response = await fetch('https://api.example.com/user');
3if (!response.ok) {
4  throw new Error('Failed to fetch user data');
5}
6return response.json();
7}
8 
9async function postData(data) {
10const response = await fetch('https://api.example.com/post', {
11  method: 'POST',
12  headers: { 'Content-Type': 'application/json' },
13  body: JSON.stringify(data)
14});
15if (!response.ok) {
16  throw new Error('Failed to post data');
17}
18return response.json();
19}
20 
21async function main() {
22try {
23  const userData = await getUserData();
24  console.log('Fetched user data:', userData);
25 
26  const result = await postData(userData);
27  console.log('Posted data successfully:', result);
28} catch (error) {
29  console.error(error);
30}
31}
32 
33main();

Fetched user data: { id: 1, name: 'John Doe' }
Posted data successfully: { success: true, message: 'Data posted successfully' }

In this example, the getUserData function fetches user data from an API. The postData function posts the fetched data to another API. The main function orchestrates these operations using async/await.

Summary

What's Next?

Now that you understand how to use async and await, the next step is to learn about the JavaScript Event Loop. The event loop is crucial for managing asynchronous operations in JavaScript, ensuring that non-blocking tasks are handled efficiently without freezing the main thread.

Stay tuned for our next tutorial on "JavaScript Event Loop"!