Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Table of contents
1.
Introduction
2.
What is an Async Function?
2.1.
Syntax of Async
3.
Handling Return Values and Exceptions
3.1.
Awaiting Promises
4.
What is the Await Function?
4.1.
Syntax of Await
5.
Real-world Application
6.
Supported Browsers
6.1.
Google Chrome
6.2.
Mozilla Firefox
6.3.
Microsoft Edge
6.4.
Safari
6.5.
Opera
7.
Frequently Asked Questions
7.1.
Can I use await outside async functions?
7.2.
How do I handle errors in async/await?
7.3.
Can async/await be used with all promises?
8.
Conclusion
Last Updated: Mar 27, 2024
Easy

Async Await in Javascript

Author Rinki Deka
0 upvote

Introduction

Navigating through the complexities of web development, we often stumble upon the challenge of asynchronous operations in JavaScript. This is where the concepts of async and await step in, offering a sleek and manageable way to handle such tasks. These features streamline coding practices and enhance readability, making your journey through JavaScript a bit smoother. 

Async Await in Javascript

This article aims to unravel the intricacies of async and await, providing you with a clear understanding and practical know-how to apply them in your coding endeavors.

What is an Async Function?

An async function in JavaScript is essentially a syntactical sugar coating over JavaScript's native promise mechanism, designed to make asynchronous code easier to write and understand. By marking a function with the async keyword, you indicate that the function is asynchronous and will implicitly return a promise. This is particularly useful when dealing with operations that require waiting, such as API calls, file operations, or any tasks that need to be completed instantaneously.

The beauty of async functions lies in their simplicity. They allow you to write asynchronous code that looks and behaves like synchronous code. This means you can use traditional control flows, like loops and conditionals, without getting into the complexities of callbacks or promise chaining. The async function ensures that the code within it won't execute until the promise is resolved, thus avoiding the infamous "callback hell" and making your code cleaner and more intuitive.

For example, consider a function that fetches user data from a database. Without async, you might rely on callbacks or then-chains, which can become cumbersome:

function fetchUserData(userId, callback) {
  getUserFromDatabase(userId, function(error, user) {
    if (error) {
      callback(error);
      return;
    }
    callback(null, user);
  });
}


With an async function, this can be simplified as follows:

async function fetchUserData(userId) {
  let user = await getUserFromDatabase(userId);
  return user;
}


In this async version, await pauses the function execution until getUserFromDatabase resolves, making the code easier to read and maintain.

Syntax of Async

The syntax for declaring an async function is straightforward. You simply add the async keyword before a function declaration or expression. This keyword transforms the function, making it return a Promise implicitly. When the function executes, if it completes without encountering any errors, the returned promise is resolved with the value returned by the function. If an error is thrown, the promise is rejected with that error.

Here are two common ways to define an async function:

Async Function Declaration:

async function myAsyncFunction() {
  // Your asynchronous code goes here
}


In this format, async precedes the standard function declaration. Any function defined in this manner automatically returns a promise.

Async Arrow Function:

For those who prefer arrow function syntax for anonymous functions or when using functions as variables, async functions can be declared as follows:

const myAsyncFunction = async () => {
  // Your asynchronous code goes here
}


This is particularly useful in modern JavaScript development patterns, where arrow functions are prevalent due to their concise syntax and behavior with this binding.

Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

Handling Return Values and Exceptions

When an async function returns a value, that value is wrapped in a resolved promise. For instance, if your async function returns 42, the actual return value is Promise.resolve(42). This is crucial for understanding how return values are handled in asynchronous code.

Conversely, if an error is thrown inside an async function, the function returns a rejected promise with the thrown error. This allows for elegant error handling using try and catch blocks within or around async functions.

async function riskyFunction() {
  if (Math.random() < 0.5) {
    return 'Success!';
  } else {
    throw new Error('An error occurred!');
  }
}


In this example, riskyFunction will either return a promise resolved with 'Success!' or a promise rejected with an Error.

Awaiting Promises

The true power of async functions is unlocked when combined with the await keyword, which we'll delve into in the next section. The await keyword can only be used inside async functions and allows you to pause the execution of the async function until a Promise is resolved.

What is the Await Function?

In async functions, await acts as a pause button, allowing you to wait for a promise to resolve before moving on to the next line of code. It can only be used within an async function, which makes it a unique feature tailored for asynchronous operations. The await keyword simplifies working with promises by making asynchronous code appear and behave more like traditional synchronous code, enhancing readability and maintainability.

When you prefix a promise with await, the execution of the async function is paused until the promise is settled. If the promise fulfills, the value of the await expression is that fulfillment value. If the promise is rejected, the await expression throws the rejection value, allowing for traditional error handling mechanisms like try...catch blocks.

Syntax of Await

Using await is as simple as placing it before a promise within an async function. Here's a basic usage pattern:

async function fetchData() {
  const data = await fetch('https://api.example.com/data');
  console.log(data);
}


In this example, fetchData uses await to pause its execution at the fetch call until the request completes. Once the promise returned by fetch is resolved, the function resumes, and data is logged to the console. If fetch were to fail, the promise would reject, and you could catch the error using a try...catch block surrounding the await statement.

Real-world Application

Consider a scenario where you need to fetch user details and their posts from an API. Without await, you might end up in a nested mess of .then() calls. With await, the code is cleaner and more straightforward:

async function getUserData(userId) {
  try {
    const user = await getUser(userId);
    const posts = await getUserPosts(userId);
    console.log(user, posts);
  } catch (error) {
    console.error('Failed to fetch user data:', error);
  }
}


This function first awaits the resolution of getUser, then proceeds to await getUserPosts, effectively making two dependent asynchronous calls in a manner that's easier to read and reason about.

The await keyword significantly simplifies handling asynchronous operations by allowing for a more synchronous coding style, which is particularly beneficial in complex applications.

Supported Browsers

The introduction of async and await has been a game-changer in writing asynchronous JavaScript code. However, it's essential to ensure that the web applications we develop are accessible to as many users as possible, which brings us to the topic of browser support.

Most modern browsers have embraced these features, making them widely available for contemporary web development. Here's a rundown of the support landscape:

Google Chrome

Full support from version 55 onwards, which was a significant milestone as Chrome is one of the most widely used browsers.

Mozilla Firefox

Support was introduced in version 52, catering to a vast number of users who prefer this browser for its privacy-focused features and developer tools.

Microsoft Edge

Starting from version 15, Edge users have been able to enjoy the benefits of async and await, enhancing the development capabilities for those in the Windows ecosystem.

Safari

 Apple's Safari added support in version 10.1, ensuring that macOS and iOS users could also experience the improved asynchronous operations in their JavaScript web applications.

Opera

Known for its innovative features, Opera has supported async and await since version 42, aligning with its commitment to providing a cutting-edge browsing experience.

Frequently Asked Questions

Can I use await outside async functions?

No, await is exclusive to async functions and triggers a syntax error otherwise.

How do I handle errors in async/await?

Use try...catch blocks within async functions to catch and handle errors from awaited promises.

Can async/await be used with all promises?

Yes, async/await can be applied to any operation that returns a promise, enhancing code readability.

Conclusion

Async and await transform the way we write and manage asynchronous code in JavaScript, offering a cleaner, more intuitive syntax that resembles synchronous code. This not only improves readability but also simplifies error handling and debugging processes. Whether you're fetching data from an API, reading files, or executing any time-consuming task, leveraging async and await can significantly enhance your coding efficiency and the overall quality of your web applications. Embracing these features will equip you to tackle the challenges of asynchronous operations with confidence and finesse.

You can refer to our guided paths on the Coding Ninjas. You can check our course to learn more about DSADBMSCompetitive ProgrammingPythonJavaJavaScript, etc. 

Also, check out some of the Guided Paths on topics such as Data Structure and AlgorithmsCompetitive ProgrammingOperating SystemsComputer Networks, DBMSSystem Design, etc., as well as some Contests, Test Series, and Interview Experiences curated by top Industry Experts.

Previous article
JavaScript clearInterval()
Next article
Call apply bind in Javascript
Live masterclass