Blog

JavaScript promises and async/await are used for working with asynchronous code. Asynchronous code is code that doesn’t block the execution of the program and allows other parts of the program to continue running while it’s waiting for something to happen, such as a network request or a file to load.

The two main JavaScript constructs for handling asynchronous operations are Javascript Promises and Async/Await. Asynchronous programming is the foundation of modern JavaScript, allowing developers to write non-blocking code to handle tasks like retrieving data from an API, reading files, or performing time-consuming calculations.

This article delves into these concepts, exploring their functionality, use cases, and providing examples to solidify your understanding.

Introduction to Asynchronous Programming

JavaScript is single-threaded, meaning only one operation executes at a time. Asynchronous programming allows the execution of multiple tasks without blocking the main thread. This capability is crucial for enhancing user experience, particularly in web applications where responsiveness is paramount.

Traditional approaches like callbacks paved the way for handling asynchronous tasks. However, callback hell—a pyramid of nested callbacks—made code hard to read and maintain. JavaScript evolved with the introduction of Promises in ES6 and Async/Await in ES8, making asynchronous programming more elegant and manageable.

The Evolution of JavaScript Asynchronous Handling

Callbacks

Callbacks were the earliest approach for managing asynchronous tasks. While effective, they suffered from issues such as inversion of control and difficulty in error handling.

function fetchData(callback) {
setTimeout(() => {
callback(null, "Data fetched successfully!");
}, 1000);
}

fetchData((error, data) => {
if (error) {
console.error(error);
} else {
console.log(data);
}
});

In this example, the fetchData function simulates an asynchronous operation using setTimeout. After a delay of 1 second, it calls the provided callback function with null as the error (indicating success) and “Data fetched successfully!” as the data. When fetchData is executed, the callback checks if an error occurred. If there is no error (null), it logs the data to the console; otherwise, it logs the error.

Javascript Promises

Javascript Promises introduced a cleaner way to handle asynchronous operations, enabling chaining and better error handling.

Javascript Async/Await

Introduced in ECMAScript 2017, Async/Await further simplified asynchronous code by making it look synchronous, enhancing readability and maintainability.

Understanding Javascript Promises

What Are Javascript Promises?

Javascript Promises are a way of handling asynchronous code that was introduced in ES6. A promise represents a value that may not be available yet, but will be at some point in the future.

When a promise is created, it is in a pending state. It can then either be resolved with a value, or rejected with an error. Javascript Promises can be chained together using the then() method to perform multiple asynchronous operations in a sequence.

A Promise is an object representing the eventual completion or failure of an asynchronous operation. It allows you to attach callbacks for success (then) or failure (catch).

States of a Javascript Promises

Javascript Promises have three states:

• Pending: The initial state, neither fulfilled nor rejected.
• Fulfilled: The operation completed successfully.
• Rejected: The operation failed.

Creating and Using Javascript Promises

You can create a Promise using the Promise constructor:

const myPromise = new Promise((resolve, reject) => {
const success = true;

if (success) {
resolve("Operation succeeded!");
} else {
reject("Operation failed!");
}
});

myPromise
.then((result) => console.log(result))
.catch((error) => console.error(error));

In this example, a Promise is created to simulate an asynchronous operation. The resolve function is called if the operation succeeds, passing the message “Operation succeeded!”. If the operation fails, the reject function is called with “Operation failed!”. The Promise is then handled using .then() to log the success message and .catch() to log the error message, depending on whether the operation was successful or not.

Promise Chaining

Promise chaining allows sequential execution of asynchronous tasks:

fetch('https://api.example.com/data')
.then((response) => response.json())
.then((data) => console.log(data))
.catch((error) => console.error(error));

In this example, the fetch function is used to make an HTTP request to https://api.example.com/data. It returns a Promise that resolves with a Response object. The first .then() processes the response by parsing it into JSON using response.json(). The second .then() handles the parsed JSON data and logs it to the console. If an error occurs at any step, the .catch() block captures and logs the error message.

Error Handling in Promises

Errors can propagate through the chain and are caught using .catch:

new Promise((resolve, reject) => {
throw new Error("Something went wrong!");
})
.then((result) => console.log(result))
.catch((error) => console.error(error));

In this example, a Promise is created, and an error is deliberately thrown using throw new Error(“Something went wrong!”). When an error is thrown inside the Promise, it automatically triggers the reject

Limitations of Promises

While Javascript Promises significantly improved asynchronous programming, handling complex workflows involving multiple asynchronous tasks could still lead to verbose and hard-to-read code. This limitation paved the way for Async/Await.

The Async/Await Syntax

Introduction to Async/Await

Async/await is a newer feature that was introduced in ES2017. It provides a way to write asynchronous code that looks synchronous, making it easier to read and understand.

An async function is a function that returns a promise, and the await keyword is used to wait for a promise to resolve before continuing with the next line of code. Async/await is built on top of promises and can be used in conjunction with them.

Async/Await provides a syntactic sugar over Promises, making asynchronous code easier to read and write. An async function always returns a Promise, and the await keyword pauses execution until the Promise resolves or rejects.

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);
}
}

fetchData();

In this example, the fetchData function is defined as async, allowing the use of await for asynchronous operations. The fetch function makes an HTTP request to https://api.example.com/data, and await ensures the function waits for the Promise to resolve, returning a Response object. The response.json() method is then awaited to parse the response into JSON format, which is logged to the console. If an error occurs during the request or parsing, the catch block captures and logs the error.

Converting Promises to Async/Await

Promises can be refactored into Async/Await:

// Using Promises
fetch('https://api.example.com/data')
.then((response) => response.json())
.then((data) => console.log(data))
.catch((error) => console.error(error));

// Using Async/Await
async function getData() {
try {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
console.log(data);
} catch (error) {
console.error(error);
}
}

getData();

This example demonstrates two ways to handle asynchronous HTTP requests: using Promises and using Async/Await. In the Promise-based approach, fetch makes a request to https://api.example.com/data. The response is parsed into JSON with response.json() using chained .then() methods, and any errors are caught with .catch(). In the Async/Await approach, the getData function uses await to pause execution until the fetch request and response.json() parsing complete. The parsed data is then logged to the console, and any errors are handled in a try-catch block.

Error Handling with Async/Await

Error handling is straightforward with try...catch blocks:

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);
}
}

In this example, the fetchData function is defined as async, enabling the use of await to handle asynchronous operations. The fetch function makes a request to https://api.example.com/data, and await ensures the function waits for the response before proceeding. The response is parsed into JSON using response.json(), and the resulting data is logged to the console. If an error occurs during the fetch or parsing process, it is caught in the catch block and logged with a descriptive message: “Error fetching data:”.

Best Practices with Async/Await

• Always use try...catch for error handling.
• Use Promise.all for parallel execution of independent asynchronous tasks.
• Avoid deeply nested await calls by modularizing code.

Comparison: Promises vs. Async/Await

Best Practices for Using Javascript Promises and Async/Await

1. Always Handle Errors: Use .catch() for Javascript Promises and try-catch blocks for Async/Await to manage errors effectively.
2. Avoid Mixing: Stick to one style—Promises or Async/Await—within a function for consistency.
3. Parallel Operations: Use Promise.all() or Promise.allSettled() for tasks that can run concurrently.
4. Clean-Up Resources: Ensure resources are cleaned up properly in case of errors.
5. Limit Nesting: Flatten nested chains by breaking them into separate functions.

Example of Promise.all:

async function fetchMultiple() {
try {
const [data1, data2] = await Promise.all([
fetch('https://api.example.com/data1').then(res => res.json()),
fetch('https://api.example.com/data2').then(res => res.json())
]);

console.log(data1, data2);
} catch (error) {
console.error(error);
}
}

In this example, the fetchMultiple function uses async and await to fetch data from two different URLs simultaneously. The Promise.all() method waits for both fetch requests to resolve before proceeding. Each fetch request is followed by .then(res => res.json()) to parse the responses into JSON format. The await keyword ensures that both Javascript promises are resolved before the data is logged to the console. If an error occurs during fetch operations or parsing, it is caught in the catch block and logged.

Conclusion

Javascript Promises and Async/Await have revolutionized asynchronous programming in JavaScript. Javascript Promises introduced a structured way to handle asynchronous operations, while Async/Await provided a more readable and synchronous-like approach.

Both are indispensable tools for modern JavaScript developers and choosing between them often depends on project complexity and coding style preferences.

By mastering these features, you can write clean, maintainable, and efficient asynchronous code, paving the way for building robust applications.

Credits:

• Photo by Pankaj Patel on Unsplash

References

1. MDN Web Docs: Promises
2. MDN Web Docs: Async/Await