Modern web development is intrinsically linked to asynchrony. A web page or application that handles requests to the server, I/O operations, or any task that can block the main thread of execution, needs intelligent handling of these operations to prevent the interface from freezing and providing a bad user experience. JavaScript, as an event-oriented and non-blocking programming language, provides mechanisms to effectively handle such tasks. Among these mechanisms is the Promise API in JavaScript, a key piece for writing asynchronous code in the world of this language. In this article, we will explore the concept of asynchrony and how the Promise API plays a critical role in managing it.
What is Asynchrony in JavaScript?
Asynchrony, in the context of JavaScript, refers to the ability to execute operations in the background without blocking the execution of the main code. This allows web applications to remain responsive even while performing time-consuming tasks such as reading files, database queries, or network requests.
How JavaScript Handles Asynchrony
JavaScript has a concurrency model based on an event loop and a callback system that allows you to wait for an operation to complete before executing a code segment. However, excessive nesting of callbacks can lead to problems known as "callback hell", where the code becomes difficult to read and maintain.
Introduction to Promises in JavaScript
Promises are a design pattern that seeks to solve the problems of nesting callbacks by providing a more orderly and manageable way of working with async.
What is a Promise?
A promise is an object that represents the eventual result (or error) of an asynchronous operation. This abstraction allows handlers to be associated with an asynchronous operation that has not yet completed, making it easier to work with.
State of a Promise
Every promise can be found in one of these three states:
Pending: Initial state, neither completed nor rejected.Fulfilled: It means that the operation was completed successfully.Rejected: The operation failed and the promise was rejected.
Creating and Using Promises
To create a promise, you use the constructor Promise:
const myPromise = new Promise((resolve, reject) => { // Asynchronous operation if (/* successful operation */) { resolve(value); // change the status to fulfilled } else { reject(error); // change the status to rejected } });To consume a promise and assign handlers for success or error cases, the methods are used .then() for success and .catch() for errors:
myPromise .then(value => { // Success case handling }) .catch(error => { // Error handling });The Promise API and Group Promises
With the widespread use of promises in complex applications, the need arose to coordinate multiple promises at the same time. The Promise API provides several functions for working with promise groups.
Promise API Methods for Group Promises
Promise.all()
This method takes an iterable of promises and returns a single promise that is resolved when all promises in the iterable have been resolved, or rejected if any of the promises are rejected.
Promise.all([promise1, promise2, promise3]) .then(values => { // values is an array with the results of each promise }) .catch(error => { // Handling if any promise was rejected }) ;Promise.race()
Unlike Promise.all(), Promise.race() is resolved or rejected as soon as one of the promises in the iterable is resolved or rejected, with the value or reason of that promise.
Promise.race([promise1, promise2, promise3]) .then(value => { // value is the result of the first resolved promise }) .catch(error => { // Handle if the first promise to resolve was rejected });Promise.allSettled()
This method returns a promise that resolves after all given promises have been fulfilled or rejected, with an array of objects describing the result of each promise.
Promise.allSettled([promise1, promise2, promise3]) .then(results => { // results is an array with the status and value or reason of each promise });Promise.any()
Promise.any() takes an iterable of promises and returns the first promise that resolves, ignoring rejected ones unless they are all rejected.
Promise.any([promise1, promise2, promise3]) .then(value => { // value is the result of the first successfully resolved promise }) .catch(error => { // Handling if all promises were rejected });Practical Examples of Promises in JavaScript
To better understand how group promises work and how they can be applied in real-world situations, let's look at some concrete examples.
Example of Promises with Fetch API
Let's imagine that we need to make multiple requests to an API and process all responses only when they have arrived:
const url1 = 'https://api.example.com/data1'; const url2 = 'https://api.example.com/data2'; const url3 = 'https://api.example.com/data3'; Promise.all([ fetch(url1).then(response => response.json()), fetch(url2).then(response => response.json()), fetch(url3).then(response => response .json()) ]).then(([data1, data2, data3]) => { console.log(data1, data2, data3); // Joint processing of the data }).catch(error => { console .error("There was an error with the requests", error);Asynchronous Flow Control Example
Suppose we are developing a game and need to load several resources, but we want to start the game as soon as the critical resource is loaded:
const criticalResource = new Promise((resolve, reject) => { // Load critical resource }); const extraresource1 = new Promise((resolve, reject) => { // Load extra resource 1 }); const extraresource2 = new Promise((resolve, reject) => { // Load extra resource 2 }); Promise.race([CriticalResource, ExtraResource1, ExtraResource2]) .then(() => { // Start game }) .catch(error => { // Error handling });Best Practices and Final Considerations
Using promises and the Promise API in JavaScript revolutionizes the way you write and reason about asynchronous code. Promises provide a predictable flow of control and encourage writing clearer, more maintainable code. However, it is important not to overuse promises and understand that each tool has its purpose. It is advisable to use them when they really provide clarity and efficiency to the management of asynchronous operations, and always accompany their use with adequate error handling and a solid logic of retries and cancellations if necessary.
Promises have become the cornerstone of modern JavaScript development, and mastering them is essential for any serious JavaScript developer. Those comfortable with promises and the capabilities of the Promise API will be well equipped to meet the challenges of asynchronous programming in today's JavaScript ecosystem, ranging from developing user interfaces with React to managing services and APIs. in Node.js.
English 
Spanish