Async Await And Promises In Javascript

4 min read Jun 23, 2024

Async/Await and Promises in JavaScript

Async/await is a powerful feature in JavaScript that simplifies asynchronous operations. It provides a more readable and intuitive way to handle code that needs to wait for a result, like fetching data from a server or reading files.

What are Promises?

Before diving into async/await, it's important to understand Promises. Promises are objects that represent the eventual completion (or failure) of an asynchronous operation and its resulting value. They have three states:

Pending: The operation is in progress.
Fulfilled: The operation completed successfully, and the promise holds the result.
Rejected: The operation failed, and the promise holds the error.

Promises are created with the Promise constructor, which takes a function as an argument. This function receives two parameters: resolve and reject.

const myPromise = new Promise((resolve, reject) => {
  // Do some asynchronous operation
  if (successful) {
    resolve(result); // Fulfill the promise with the result
  } else {
    reject(error); // Reject the promise with the error
  }
});

Async/Await: Making Asynchronous Code Look Synchronous

Async/await builds upon promises and allows us to write asynchronous code that resembles synchronous code.

async keyword: You use the async keyword to declare a function that will handle asynchronous operations.
await keyword: The await keyword is used within an async function to pause the execution of the function until the promise it's waiting on is resolved or rejected.

Here's a basic example:

async function fetchData() {
  try {
    const response = await fetch('https://example.com/data'); // Wait for the fetch call to complete
    const data = await response.json(); // Wait for the JSON parsing to finish
    console.log(data); 
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

fetchData();

In this example:

fetchData() is declared as an async function.
We await the fetch call, which is an asynchronous operation, and the execution of the function is paused until the data is fetched.
We then await the response.json() call to parse the fetched data.
If the process is successful, we log the data.
If there's an error, we catch it and log an error message.

Advantages of Async/Await

Readability and Simplicity: Async/await allows you to write asynchronous code that looks like synchronous code, making it easier to read and understand.
Error Handling: The try...catch block elegantly handles errors in your asynchronous code.
Cleaner Code: It eliminates the need for nested callbacks, leading to cleaner and more maintainable code.

Conclusion

Async/await is a powerful feature in JavaScript that makes handling asynchronous operations much easier. It provides a simpler and more intuitive way to write and understand asynchronous code, making your JavaScript applications more robust and efficient.

Async Await And Promises In Javascript