How the async-await works in JavaScript?

Asynchronous programming is a crucial aspect of modern JavaScript development, allowing for efficient handling of time-consuming operations such as I/O operations and API requests without blocking the main thread. Traditionally, callbacks were used to handle asynchronous code, but they often led to complicated and hard-to-maintain code structures known as “callback hell.” Then came promises, which provided a more structured and readable way to handle asynchronous code. However, JavaScript introduced a new feature called async-await, which simplifies asynchronous programming even further, making it more concise and readable.

In this blog, we will take an in-depth look at how async-await actually works in JavaScript. We will explore the underlying mechanics of async-await, how it compares to callbacks and promises, and its advanced usage. We will also discuss its limitations and considerations, along with best practices and tips for using it effectively in real-world applications. Whether you’re a beginner or an experienced JavaScript developer, understanding async-await is essential for writing modern, efficient, and maintainable asynchronous code.

So, let’s dive into the world of async-await and uncover its inner workings to unlock its full potential in JavaScript!

Understanding Asynchronous JavaScript

JavaScript is a single-threaded language, meaning it executes one task at a time in a sequential manner. However, it supports asynchronous behavior through various mechanisms to efficiently handle time-consuming tasks without blocking the main thread. Let’s delve into the key concepts of asynchronous JavaScript.

JavaScript event loop and the call stack:

The JavaScript event loop is a mechanism that allows for handling asynchronous tasks in JavaScript. It constantly monitors the call stack, which is a data structure that keeps track of function invocations in the order they occur. When a function is called, it is added to the top of the call stack, and when a function completes its execution, it is removed from the call stack.

However, some tasks, such as I/O operations, timers, and DOM events, are asynchronous and do not block the call stack. Instead, they are offloaded to the browser’s Web APIs, such as setTimeout, XMLHttpRequest, and fetch, which are provided by the environment in which JavaScript runs. Once these tasks are completed, they are placed in the event queue.

The event loop constantly checks the event queue and, if the call stack is empty, it dequeues tasks from the event queue and adds them to the call stack for execution. This allows JavaScript to perform tasks concurrently, enabling efficient handling of asynchronous operations.

Example:

console.log("Start");

setTimeout(() => {
  console.log("Async Task 1");
}, 1000);

console.log("Middle");

setTimeout(() => {
  console.log("Async Task 2");
}, 500);

console.log("End");

Output:

Start
Middle
End
Async Task 2
Async Task 1

In the above example, the “Start,” “Middle,” and “End” logs are synchronous and executed immediately, while the “Async Task 1” and “Async Task 2” logs are asynchronous and executed after the specified timeouts, demonstrating the non-blocking nature of asynchronous tasks.

JavaScript’s single-threaded nature and its implications:

JavaScript’s single-threaded nature means that it executes one task at a time in a sequential manner. While this simplifies the language, it also has implications, such as the potential for blocking the main thread and causing performance issues, especially when dealing with time-consuming tasks.

For example, if a large amount of data is fetched from an API using a synchronous XMLHttpRequest, it will block the main thread until the data is retrieved, resulting in a poor user experience with a frozen UI. Asynchronous programming techniques, such as callbacks, promises, and async-await, allow for non-blocking execution of tasks, preventing such performance issues.

Asynchronous tasks in JavaScript:

Asynchronous tasks in JavaScript typically involve operations that take time to complete, such as I/O operations (e.g., reading/writing to files, making database queries) and API requests (e.g., fetching data from a remote server). These tasks are performed asynchronously to avoid blocking the main thread and allow the program to continue executing other tasks in the meantime.

Asynchronous tasks are typically handled using callbacks, promises, or async-await. Callbacks are functions passed as arguments to other functions and are called once the asynchronous task completes. Promises provide a more structured way to handle asynchronous tasks and represent a future value that may be resolved or rejected. async-await is a modern and concise way to write asynchronous code using promises, making it more readable and maintainable.

Example:

// Asynchronous task with a callback
function fetchUserData(callback) {
  setTimeout(() => {
    const userData = { name: "John", age: 30 };
    callback(null, userData);
  }, 1000);
}

fetchUserData((error, userData) => {
if (error) {
console.error("Error fetching user data:", error);
} else {
console.log("User data:", userData);
}
});

In the above example, fetchUserData is an asynchronous task that fetches user data after a delay of 1 second using setTimeout. It takes a callback as an argument, which will be called once the task completes. The callback handles the returned data or error accordingly. However, callback-based asynchronous code can quickly become complex and difficult to manage, leading to callback hell.

This introduces the need for more structured approaches like promises and async-await, which we will explore in the subsequent sections of this blog. Understanding the concepts of the JavaScript event loop, call stack, and asynchronous tasks is fundamental to grasp how async-await works and why it is a powerful tool for handling asynchronous programming in JavaScript.

Callbacks and Promises

Callbacks and promises are two common approaches for handling asynchronous tasks in JavaScript. Callbacks are functions that are passed as arguments to other functions and are called once the asynchronous task completes. Promises, on the other hand, provide a more structured and cleaner way to handle asynchronous tasks and represent a future value that may be resolved or rejected. Let’s dive into these concepts in more detail.

Callbacks:

Callbacks are a traditional approach for handling asynchronous tasks in JavaScript. In this approach, a callback function is passed as an argument to a function that performs the asynchronous task. Once the task is completed, the callback function is called with the result.

function fetchData(callback) {
  setTimeout(() => {
    const data = "This is some data";
    callback(null, data);
  }, 1000);
}

fetchData((error, data) => {
  if (error) {
    console.error("Error fetching data:", error);
  } else {
    console.log("Data:", data);
  }
});

In the above example, the fetchData function is an asynchronous task that fetches data after a delay of 1 second using setTimeout. It takes a callback as an argument, which will be called once the task completes. The callback function handles the returned data or error accordingly.

However, one downside of using callbacks is that they can quickly become nested and result in callback hell, making the code difficult to read and maintain, especially when multiple asynchronous tasks are involved.

Promises:

Promises provide a more structured and cleaner way to handle asynchronous tasks in JavaScript. A promise is an object that represents a future value that may be resolved (with data) or rejected (with an error). It has three states: pending, fulfilled, or rejected.

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = "This is some data";
      resolve(data);
    }, 1000);
  });
}

fetchData()
  .then(data => {
    console.log("Data:", data);
  })
  .catch(error => {
    console.error("Error fetching data:", error);
  });

In the above example, the fetchData function returns a promise that represents the asynchronous task. The resolve function is called once the task is completed with the returned data, and the catch function is called if the task is rejected with an error.

Promises allow for better error handling and chaining of asynchronous tasks using then and catch methods, making the code more readable and manageable compared to callback-based approaches.

Promises also provide additional methods like finally, race, and all for more advanced use cases, making them a powerful tool for handling asynchronous programming in JavaScript.

There is one more crucial function that we need to know when it comes to handling asynchronous code in JavaScript – Generators.

Generators

Generators are a special type of function that can be paused and resumed, allowing for asynchronous behavior. They provide more control over the flow of execution and can be used as an alternative approach to handle asynchronous tasks.

Generators are defined using a function with an asterisk (*) before the function name. They can have one or more pause points using the yield keyword, which allows the generator function to yield a value and then pause its execution. The generator can be resumed later from the same point where it was paused using the next() method.

Here’s an example of a generator function that fetches data from an API asynchronously using the yield keyword:

function* fetchAPIData() {
  try {
    const response = yield fetch('https://api.example.com/data');
    const data = yield response.json();
    return data;
  } catch (error) {
    console.error('Error fetching API data:', error);
    throw error;
  }
}

const dataGenerator = fetchAPIData();
const fetchPromise = dataGenerator.next().value;

fetchPromise
  .then(response => dataGenerator.next(response).value)
  .then(data => {
    console.log('API data:', data);
    // Further processing of the data
  })
  .catch(error => dataGenerator.throw(error));

In this example, the fetchAPIData() generator function yields promises at each step of the asynchronous operation, allowing for sequential execution of asynchronous tasks. The next() method is used to resume the generator and pass the resolved value to the next yield statement, while the throw() method is used to handle errors.

Generators provide a powerful way to write asynchronous code with more fine-grained control over the flow of execution. However, they are less commonly used compared to callbacks and promises, as they require manual management of the generator’s state and can be more complex to work with. Nevertheless, they can be a useful tool in certain scenarios where more control over asynchronous flow is required.

Understanding generators, callbacks and promises is crucial to comprehend the underlying principles of async-await, which we will explore in the next section of this blog.

Introducing async-await

Async-await is a powerful and concise syntax for handling asynchronous tasks in JavaScript. It is built on top of promises and provides a more synchronous-looking code structure, making it easier to write, read, and manage asynchronous code. Async-await was introduced in ECMAScript 2017 (ES8) and has become widely adopted in modern JavaScript development. Let’s dive into the details of how async-await works.

1. Understanding async and await: The async keyword is used to declare a function that contains asynchronous code. When a function is declared as async, it automatically returns a promise that will be resolved with the value returned from the function, or rejected with an error if an exception occurs within the function.

The await keyword is used inside an async function to pause the execution of the function until a promise is resolved or rejected. It allows you to write asynchronous code that looks like synchronous code, without blocking the main thread.

async function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = "This is some data";
      resolve(data);
    }, 1000);
  });
}

async function getData() {
  try {
    const data = await fetchData();
    console.log("Data:", data);
  } catch (error) {
    console.error("Error fetching data:", error);
  }
}

getData();

In the above example, the fetchData function returns a promise that represents the asynchronous task. Inside the getData function, the await keyword is used to pause the execution of the function until the promise is resolved with the data. If the promise is rejected with an error, the catch block will handle the error.

Async-await makes it easier to write asynchronous code that resembles synchronous code, making it more readable and maintainable, especially when dealing with complex asynchronous tasks.

2. Error handling with async-await:
   Error handling with async-await is similar to promises. Errors can be caught using try-catch blocks or by chaining a .catch method to the returned promise.

async function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      reject("Error fetching data");
    }, 1000);
  });
}

async function getData() {
  try {
    const data = await fetchData();
    console.log("Data:", data);
  } catch (error) {
    console.error("Error fetching data:", error);
  }
}

getData();

In the above example, the fetchData function returns a promise that is rejected with an error. Inside the getData function, the catch block will handle the error.

3. Parallel execution with async-await:
   One of the powerful features of async-await is the ability to execute multiple asynchronous tasks in parallel, and wait for all of them to complete before proceeding further. This can be achieved using Promise.all with async-await.

async function fetchUserData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const userData = "User data";
      resolve(userData);
    }, 2000);
  });
}

async function fetchProductData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const productData = "Product data";
      resolve(productData);
    }, 1000);
  });
}

async function fetchData() {
  const userDataPromise = fetchUserData();
  const productDataPromise = fetchProductData();

  try {
    const [userData, productData] = await Promise.all([userDataPromise, productDataPromise]);
    console.log("User data:", userData);
    console.log("Product data:", productData);
 }catch (error) {
    console.error("Error fetching data:", error);
  }
}

fetchData();

In the above example, the fetchData function fetches user data and product data using two separate promises, fetchUserData and fetchProductData, respectively. The Promise.all method is used with async-await to wait for both promises to resolve, and then the data is destructured from the resolved array. This allows for parallel execution of multiple asynchronous tasks, resulting in more efficient and faster code execution.

4. Handling async-await in loops:
   Another common use case for async-await is to iterate over an array or perform a similar operation in a loop with asynchronous tasks. However, using await inside a loop can have unintended consequences, as it can cause the tasks to be executed sequentially instead of in parallel, leading to slower performance. To overcome this, we can use Promise.all with map or for...of loops.

Example using map:

async function fetchData(url) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(`Data from ${url}`);
    }, Math.random() * 2000);
  });
}

async function getData(urls) {
  const promises = urls.map(async (url) => {
    return await fetchData(url);
  });

  try {
    const data = await Promise.all(promises);
    console.log("Data:", data);
  } catch (error) {
    console.error("Error fetching data:", error);
  }
}

const urls = ["url1", "url2", "url3"];
getData(urls);

Example using for...of loop:

async function fetchData(url) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(`Data from ${url}`);
    }, Math.random() * 2000);
  });
}

async function getData(urls) {
  const data = [];

  for (const url of urls) {
    data.push(await fetchData(url));
  }

  console.log("Data:", data);
}

const urls = ["url1", "url2", "url3"];
getData(urls);

In the above examples, map and for...of loop are used with async-await to iterate over an array of URLs and fetch data asynchronously. This allows for parallel execution of the asynchronous tasks, resulting in better performance.

Behind the Scenes of async-await

While async-await provides a clean and intuitive way to write asynchronous code in JavaScript, it’s important to understand how it works under the hood to gain a deeper insight into its behavior and potential gotchas. Let’s take a closer look at the inner workings of async-await.

1. Understanding the underlying mechanics:
   At its core, async-await is built on top of Promises, which are a key feature of JavaScript for handling asynchronous code. Async-await allows developers to write asynchronous code in a more synchronous-looking way, making it easier to reason about and manage. However, it’s important to understand the underlying mechanics of how async-await works.

When a function is marked as async with the async keyword, it returns a Promise implicitly. The await keyword is then used to pause the execution of the function until the Promise is resolved or rejected. While the function is paused, the JavaScript engine is free to continue executing other tasks, making the code non-blocking.

2. How it uses promises to handle asynchronous code:
   Async-await uses Promises to handle asynchronous code. When an async function is invoked, it returns a Promise that represents the eventual completion of the asynchronous operation. The Promise can have one of three states: pending, fulfilled, or rejected.

When an await keyword is used inside an async function, it waits for the Promise to be resolved. If the Promise is fulfilled, the value is returned and the execution of the async function continues. If the Promise is rejected, an error is thrown, which can be caught using a try-catch block.

Example:

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

fetchData();

In the above example, the fetchData function uses async-await to fetch data from an API using the fetch function. The await keyword is used to wait for the response to be resolved and the data to be parsed as JSON. If an error occurs, it is caught in the catch block.

3. Overview of the event loop and microtask queue in relation to async-await:
   JavaScript has a single-threaded event loop that manages the execution of code, including async-await. The event loop ensures that JavaScript can handle concurrent tasks without blocking the main thread, allowing for responsive and interactive web applications.

When an async function is invoked, it is executed synchronously until an await keyword is encountered. At that point, the function is paused, and the Promise associated with the await expression is added to the microtask queue. The microtask queue is a special queue that has higher priority than the regular task queue, such as the callback queue.

Once the microtask queue is empty, the event loop checks the regular task queue for tasks, such as user interactions or timers, and executes them. When the tasks are completed, the event loop returns to the microtask queue and resumes the execution of the async function from where it left off.

Example:

async function fetchData() {
  console.log('Start fetching data');

  const response = await fetch('https://api.example.com/data');
  const data = await response.json();

  console.log('Data:', data);
}

console.log('Before invoking fetchData');
fetchData();
console.log('After invoking fetchData');

In the above example, the fetchData function is invoked, and it logs messages before and after calling the function. When fetchData is invoked, it starts fetching data and logs the “Start fetching data” message. However, the function is paused at the first await expression until the Promise is resolved. During this time, the event loop continues to run other tasks, such as logging “Before invoking fetchData” and “After invoking fetchData”. Once the Promise is resolved, the microtask queue is empty, and the event loop returns to the fetchData function to continue executing the remaining code, logging the “Data: ” message.

4. Handling errors and exceptions with async-await:
   Like any other JavaScript code, async-await can also encounter errors and exceptions during its execution. However, handling errors and exceptions with async-await requires some special considerations.

When an async function encounters an error or an exception, the Promise associated with it will be rejected. This can be caught using a catch block after an await expression. If there is no catch block, the error will be propagated up the call stack and can be caught by an outer try-catch block, or it may result in an unhandled promise rejection error.

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

fetchData();

In the above example, the catch block is used to catch any errors that occur during the fetching of data. If an error occurs, it will be logged in the console with an appropriate error message.

It’s also important to note that async-await can handle both synchronous and asynchronous errors. Synchronous errors, such as a TypeError or a ReferenceError, can be caught using a try-catch block around the entire async function. Asynchronous errors, such as a failed API request, can be caught using catch blocks after await expressions.

Advanced Usage of async-await

In this section, we will explore some advanced techniques and use cases of async-await.

1. Parallel and sequential execution of async functions with Promise.all and Promise.allSettled:
   Asynchronous tasks often need to be executed in parallel or sequentially, depending on the requirements of the application. JavaScript provides two useful methods, Promise.all and Promise.allSettled, that can be used in combination with async-await to achieve these behaviors.

• Promise.all: This method takes an array of Promises and returns a new Promise that is fulfilled with an array of the fulfilled values of the input Promises, in the same order as the input array. However, if any of the input Promises is rejected, the returned Promise will be rejected with the reason of the first rejected Promise. This behavior can be used to execute multiple async functions in parallel and wait for all of them to complete.

async function fetchData1() {
  // Fetch data from API
}

async function fetchData2() {
  // Fetch data from another API
}

async function fetchData3() {
  // Fetch data from a third API
}

async function getData() {
  try {
    const [data1, data2, data3] = await Promise.all([fetchData1(), fetchData2(), fetchData3()]);
    console.log('Data 1:', data1);
    console.log('Data 2:', data2);
    console.log('Data 3:', data3);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

getData();

In the above example, fetchData1(), fetchData2(), and fetchData3() are three async functions that fetch data from different APIs. The Promise.all method is used to execute them in parallel and wait for all of them to complete. If any of the Promises reject, the catch block will be executed with the corresponding error.

• Promise.allSettled: This method takes an array of Promises and returns a new Promise that is fulfilled with an array of objects representing the fulfillment or rejection status of each input Promise. This allows for sequential execution of async functions, regardless of whether they fulfill or reject.

async function fetchData1() {
  // Fetch data from API
}

async function fetchData2() {
  // Fetch data from another API
}

async function fetchData3() {
  // Fetch data from a third API
}

async function getData() {
  try {
    const [result1, result2, result3] = await Promise.allSettled([fetchData1(), fetchData2(), fetchData3()]);
    console.log('Result 1:', result1.status, result1.value);
    console.log('Result 2:', result2.status, result2.value);
    console.log('Result 3:', result3.status, result3.value);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

getData();

In the above example, fetchData1(), fetchData2(), and fetchData3() are three async functions that fetch data from different APIs. The Promise.allSettled method is used to execute them sequentially and get the fulfillment or rejection status of each Promise.

2. Error handling and retries with async-await:
   Error handling is an important aspect of asynchronous code. With async-await, error handling can be achieved using try-catch blocks around await expressions, as well as using the catch block after the entire async function.

Example:

async function fetchData() {
    try {
        const response = await fetch('https://api.example.com/data');
        const data = await
            response.json();
        // Process the data
        return data;
    } catch (error) {
        // Handle any errors that occur during fetching or processing
        console.error('Error fetching data:', error);
        // Retry logic can be implemented here
        // For example, retry fetching after a delay using setTimeout
        await new Promise(resolve => setTimeout(resolve, 1000));
        return fetchData(); // Retry fetching
    }
}

async function getData() {
    try {
        const data = await fetchData();
        console.log('Data:', data);
    } catch (error) {
        console.error('Error getting data:', error);
    }
}

getData();

In the above example, fetchData() is an async function that fetches data from an API using fetch(). If an error occurs during fetching or processing, the catch block will be executed, and a retry logic is implemented using setTimeout to retry fetching after a delay of 1 second. This demonstrates how async-await can be used to handle errors and implement retries in asynchronous code.

3. Error propagation in async-await chains:
   In async-await, errors that occur in any of the await expressions within a try block will cause the execution to jump to the catch block immediately, skipping any subsequent await expressions. This can be used to control the flow of error propagation in async-await chains.

async function fetchData1() {
  // Fetch data from API
}

async function fetchData2() {
  // Fetch data from another API
}

async function processData(data) {
  // Process the data
}

async function getData() {
  try {
    const data1 = await fetchData1();
    const data2 = await fetchData2();
    await processData(data1, data2); // This line will not be reached if an error occurs in fetchData1() or fetchData2()
  } catch (error) {
    console.error('Error getting data:', error);
  }
}

getData();

In the above example, fetchData1(), fetchData2(), and processData() are three async functions that fetch and process data from different APIs. If an error occurs in fetchData1() or fetchData2(), the catch block will be immediately executed, and processData() will not be called. This allows for fine-grained error handling and flow control in async-await chains.

Best practices for using async-await effectively in real-world applications:

• Keep async functions small and focused: It’s a good practice to keep async functions small and focused on a specific task. This makes the code more maintainable and easier to debug.
• Use proper error handling: Use try-catch blocks to handle errors that occur within async functions, and implement appropriate error propagation and retry logic as needed.
• Understand the behavior of await: Remember that await waits for a Promise to resolve or reject, and it returns the resolved value of the Promise. Be aware of how await behaves in different scenarios, such as when used with multiple Promises, and plan your code accordingly.
• Use Promise-based APIs: async-await is designed to work with Promises, so it’s recommended to use Promise-based APIs wherever possible, instead of using callbacks or other async patterns.
• Be mindful of performance: Asynchronous code can have performance implications, such as increased memory usage and potential for blocking the event loop. Be mindful of performance considerations and use techniques like throttling or debouncing as needed.
• Test thoroughly: Asynchronous code can be complex and harder to debug, so thorough testing is important to catch any issues early and ensure the correct behavior of your code.

Limitations and Considerations

As powerful as async-await is in simplifying asynchronous code in JavaScript, it does come with some limitations and considerations that developers should be aware of. In this section, we will explore some of these limitations and considerations when working with async-await.

1. Error handling: While async-await provides a convenient way to handle errors using try-catch blocks, it’s important to note that errors in asynchronous code may not always be caught by the immediate try-catch block. Errors that occur inside async functions, such as in Promise rejections, may not be caught by the surrounding try-catch block, resulting in unhandled errors. Therefore, it’s important to properly handle errors at every level of the async function chain to ensure robust error handling.

async function getData() {
  try {
    const data = await fetchData();
    await processData(data);
    console.log('Data:', data);
  } catch (error) {
    console.error('Error getting data:', error);
  }
}

getData().catch(error => console.error('Unhandled error:', error));

2. Performance considerations: Although async-await simplifies asynchronous code, it does come with a performance cost. When multiple asynchronous functions are awaited sequentially, it can result in blocking the event loop, leading to reduced performance and slower execution times. Careful consideration should be given to the order and timing of async-await operations to ensure optimal performance.
3. Browser support: While async-await is a widely supported feature in modern JavaScript environments, it’s important to note that some older browsers may not fully support async-await or may have limited support for it. Therefore, when writing code for production applications, it’s important to check for browser compatibility and consider using transpilers or polyfills if necessary.
4. Debugging: Debugging async-await code can be challenging, as the execution order of asynchronous operations may not be linear and can be difficult to trace. Properly handling and logging errors, as well as using browser developer tools or debugging libraries, can help in identifying and fixing issues in async-await code.
5. Overuse of async-await: While async-await can greatly simplify asynchronous code, it’s important to use it judiciously and avoid overuse. In some cases, traditional callback-based or Promise-based approaches may be more appropriate and efficient, depending on the specific use case. This function should be used where it adds value and improves the readability and maintainability of the code.

Conclusion:

Async await is a powerful feature in JavaScript, but it also comes with some limitations and considerations that developers should be aware of. Proper error handling, performance considerations, browser support, debugging challenges, and avoiding overuse are important factors to consider when working with asynchronous JavaScript applications. By understanding these limitations and considerations, developers can make informed decisions and write more robust and efficient asynchronous code using async-await.

We hope this article has provided you with a comprehensive understanding of how async-await works in JavaScript. From the basics of asynchronous programming and callbacks to the advanced usage of async await, we have covered a wide range of topics to help you master this powerful feature. By leveraging async-await effectively in your JavaScript applications, you can write more efficient, scalable, and maintainable code. We encourage you to continue exploring and experimenting with async-await in your projects, and we hope that the insights and practical examples shared in this article will be valuable in your journey to becoming a proficient async-await developer.

Happy coding!