Async/await vs Promises in JavaScript | Updated Version in 2023
In JavaScript, asynchronous programming is essential for building high-performance and responsive applications. Two popular approaches for handling asynchronous operations are Promises and the newer async/await syntax. In this blog, we will explore what Promises and async/await are, how they work, and their differences.
➡️ Promises
Promises are a way of handling asynchronous operations in JavaScript. They were introduced in ES6 as a native feature to deal with callback hell, a common problem when working with asynchronous operations. Promises provide a cleaner and more organized way to write asynchronous code.
A Promise is an object that represents a value that may not be available yet but will be resolved in the future. A Promise can be in one of three states:
▶️ Pending: The initial state of a Promise.▶️ Fulfilled: The state when the operation has been completed successfully, and a result is available.
▶️ Rejected: The state when an error has occurred during the operation.
Promises are created using the Promise constructor. The Promise the constructor takes a single argument, a function called the executor function. The executor function takes two arguments, resolve and reject, which are functions that are called when the Promise is fulfilled or rejected, respectively.
Here's an example of a Promise that resolves after a delay of 1 second:
const delay = (ms) => new Promise((resolve) =>In this example, we create a Promise using the
setTimeout(resolve, ms)); delay(1000).then(() => console.log('1 second has passed.'));
Promise constructor and the delay function. The delay the function takes a time in milliseconds and returns a Promise that resolves after that time has elapsed. We then call the then method on the Promise to handle the fulfillment of the Promise.➡️ Async/await
Async/await is a newer syntax that was introduced in ES2017 as a way of writing asynchronous code in a more synchronous way. Async/await is built on top of Promises and provides a cleaner syntax for handling asynchronous operations.
Async/await is essentially just syntax sugar for working with Promises. It allows you to write asynchronous code that looks like synchronous code, making it easier to read and understand.
Here's an example of how you can use async/await to wait for a Promise to resolve:
const delay = (ms) => new Promise((resolve) =>
setTimeout(resolve, ms)); async function wait() { console.log('Waiting...'); await delay(1000); console.log('Done.'); } wait();
In this example, we define an async function called wait. Inside the function, we call the delay function and wait for it to resolve using the await keyword. The await keyword can only be used inside an async function and waits for the Promise to resolve before continuing.
Differences between Promises and async/await
Both Promises and async/await are ways of handling asynchronous operations, but they have some key differences:
▶️ Error handling: Promises handle errors using the catch method, while async/await uses the try...catch syntax.
▶️ Readability: Async/await provides a cleaner and more readable syntax for handling asynchronous operations, making it easier to understand what's happening in the code.
