Mastering Promises: How to Use Promises for Better Asynchronous Programming

As web developers, we all strive to simplify asynchronous code and make it more readable. However, we often find it challenging and constantly ask ourselves how to achieve this. The answer lies in mastering Promises. This blog will explore how to use Promises to elevate your skills to the next level.

In the past, Promises were primarily used for fetching data from APIs on the frontend side and retrieving data from databases on the backend side, especially when using simple architectures like monolithic ones. However, in today's world, we often work with large-scale architectures like microservices and multi-layered systems, where services communicate. Asynchronous programming and Promises play crucial roles in software development in these types of architectures.

Many new developers encounter questions like "What are Promises?" and "Why do we need them?" without fully understanding this core concept. This blog aims to answer these questions and explain Promises to help you master asynchronous programming. To fully grasp Promises, we first need to understand the basics of synchronous and asynchronous programming. So, let's start with a brief overview of synchronous and asynchronous programming in JavaScript.

What is Synchronous and Asynchronous Programming in JavaScript?

In JavaScript, code can execute in two distinct ways: synchronously and asynchronously.

Synchronous Programming:

In synchronous programming, code executes line by line. Each operation must be completed before the next one begins. This means tasks are processed sequentially.

For Example,

// Sychronous Programming 
console.log('Start');

function doSomethingSync() {
  for (let i = 0; i < 1e8; i++) {}
  console.log('Finished');
}

doSomethingSync();
console.log('End');

//output
Start
Finished
End

In the example above, the code executes sequentially. First, "Start" is logged, then doSomethingSync() runs, which takes some time, and finally "End" is logged. Each task is completed before the next one begins.

Asynchronous Programming:

In contrast, asynchronous programming allows tasks to run concurrently, without waiting for other tasks to complete. This means operations can occur in parallel.

For Example,

// Asychronouse Programming
console.log('Start');

setTimeout(() => {
  console.log('Asynchronous Operation');
}, 2000); 

console.log('End');

// output
Start
End
Asynchronous Operation

In this asynchronous example, "Start" is logged first, followed by "End." The setTimeout function schedules a task to execute after 2 seconds but does not block the execution of subsequent code. As a result, "End" is logged before the "Asynchronous Operation" message, which appears after the delay.

Asynchronous programming is essential for managing tasks such as file operations, time-related tasks, network requests, and database operations. To handle these tasks effectively and ensure robust code, we use Promises. Now, let’s dive into Promises and address the questions you might have about them.

What is Promises?

In simple terms, Promises are objects that hold the future value of an asynchronous operation. You can think of Promises as containers for the eventual results of asynchronous functions.

Promises are a method for handling asynchronous operations in JavaScript. Before Promises, we often relied on callback functions and chaining them together, which led to a problem known as "Callback Hell."

Callback Hell, also called the "pyramid of doom," occurs when multiple nested callback functions are used to handle asynchronous tasks. This approach makes the code hard to read, understand, and maintain, especially when dealing with several asynchronous operations at once.

Promises hold future values, which means we don't know what the Promise contains until it is resolved. This uncertainty also means there's a chance the Promise may contain an error resulting from the asynchronous operation. Therefore, when using Promises, it's important to handle potential failures as well.

As mentioned, Promises are objects that wrap asynchronous operations and represent their state. A Promise can be in one of the following states:

1. Pending: This is the initial state, indicating that the Promise has not yet been resolved and the asynchronous operation is still ongoing.

2. Fulfilled: This state indicates that the Promise has completed the asynchronous operation.

3. Rejected: This state indicates that an error occurred while executing the asynchronous task, and the Promise has failed.

Let's look at a simple example to compare using Promises versus traditional callback functions for handling asynchronous operations, such as reading a file.

// File reading while callback function
const fs = require('fs');

function readFileWithCallback(filePath, callback) {
  fs.readFile(filePath, 'utf8', (err, data) => {
    if (err) {
      callback(err, null);
    } else {
      callback(null, data); 
    }
  });
}
readFileWithCallback('example.txt', (err, data) => {
  if (err) {
    console.error('Error reading file:', err);
  } else {
    console.log('File content:', data);
  }
});

In the example above, we read a file using a callback function to handle the error and data. As you can see, if we needed to handle multiple asynchronous operations with nested callback functions, it could lead to Callback Hell, making the code difficult to follow.

// file reading with promises
const fs = require('fs').promises;

function readFileWithPromise(filePath) {
  return fs.readFile(filePath, 'utf8'); 
}

readFileWithPromise('example.txt')
  .then((data) => {
    console.log('File content:', data);
  })
  .catch((err) => {
    console.error('Error reading file:', err);
  });

In this example, we use Promises to handle the asynchronous operation. The fs.readFile method returns a Promise, which allows us to use the .then() method to handle the successful resolution and the .catch() method to handle any errors. This approach helps us avoid nested callback functions, making the code more readable and easier to maintain.

After understanding what Promises are and how they were created, you might still wonder why we need Promises when we can just use callbacks. Let me explain the need for Promises by answering the question: Why do we need Promises?

Why do we need promises?

As you know, Promises were introduced to address the problem of "Callback Hell." By using Promises, we can avoid deeply nested callbacks and write code that is more readable and maintainable.

Promises offer several benefits:

1. Built-in Error Handling: Promises come with built-in error handling through .catch() methods, allowing us to manage errors that occur during asynchronous operations effectively.

2. Asynchronous Chaining: Promises enable us to chain asynchronous operations using .then() methods. This chaining divides the asynchronous code into manageable parts, making it more understandable.

3. Parallel Processing: Promises allow us to handle multiple Promise objects simultaneously, facilitating parallel processing and optimizing code performance by reducing time complexity.

4. Non-blocking Execution: Promises support non-blocking code execution, meaning other tasks can run while a Promise is pending.

Given these advantages, Promises are a valuable tool for JavaScript developers, simplifying asynchronous programming and helping write more readable and maintainable code.

However, like any tool, Promises come with their own set of pros and cons. While we’ve already covered the advantages by discussing their need, it’s also important to understand their limitations. This will provide you with a well-rounded view of Promises and help you determine when and where to use them effectively.

What are the Cons of Promises?

Everything has its limitations, and as a JavaScript developer, it's crucial to understand the limitations of Promises before using them. Here are some of the cons or disadvantages of Promises:

1. Complexity
   When dealing with multiple asynchronous tasks that depend on each other, the code can become nested and harder to read. For example, combining generators with Promises can result in intricate code structures that may be challenging to understand.

2. Implementation
   Effective use of Promises requires careful and thorough implementation. A deep understanding of the Promises API, including its various properties and methods, is essential.

3. Eager Execution
   In JavaScript, the interpreter executes the implementation of a Promise declaration synchronously, even though the Promise will eventually settle asynchronously.

4. Parallel Processing
   Although Promises support parallel processing, improper understanding can lead to issues. When resolving multiple Promises in parallel, if one fails, the entire process can fail.

Understanding these limitations will help you use Promises effectively and avoid potential pitfalls.

Next, let's explore some useful functions of Promises in JavaScript that can assist you in handling asynchronous programming more effectively.

What are the useful Functions of Promises?

After understanding the basics of Promises, including functions like resolve and reject for determining the outcome of promises, it's important to explore some advanced and useful functions provided by Promises. These functions can help you handle complex asynchronous scenarios more effectively. Here are some key Promise functions:

1. Promise.all(iterable):

   Returns a single promise that resolves when all of the promises in the iterable have been resolved or rejects if any promise in the iterable rejects. It resolves with an array of the resolved values.

    const promise1 = Promise.resolve(3);
    const promise2 = 42;
    const promise3 = new Promise((resolve, reject) => setTimeout(resolve, 100, 'foo'));
   
    Promise.all([promise1, promise2, promise3])
      .then(values => console.log(values));
   
    // Output: 
    [3, 42, 'foo']
   

2. Promise.allSettled(iterable):

   Returns a promise that resolves after all of the given promises have either been resolved or rejected, with an array of objects that each describe the outcome of each promise.

    const promise1 = Promise.resolve(1);
    const promise2 = Promise.reject('Failed');
    const promise3 = Promise.resolve(3);
   
    Promise.allSettled([promise1, promise2, promise3])
      .then(results => results.forEach(result => console.log(result)));
   
    // Output: 
    { status: 'fulfilled', value: 1 }
    { status: 'rejected', reason: 'Failed' }
    { status: 'fulfilled', value: 3 }
   

3. Promise.any(iterable):

   Returns a promise that resolves or rejects as soon as one of the promises in the iterable resolves or rejects, with the value or reason from that promise.

    const promise1 = new Promise((resolve, reject) => setTimeout(resolve, 500, 'first'));
    const promise2 = new Promise((resolve, reject) => setTimeout(resolve, 100, 'second'));
   
    Promise.race([promise1, promise2])
      .then(value => console.log(value));
   
    // Output: 
    second
   

Promise.finally(onFinally):

Adds a handler to be called when the promise is settled, regardless of its outcome. It returns a promise whose finally handler is set to the given function.

const promise = new Promise((resolve, reject) => {
  setTimeout(() => resolve('Done'), 1000);
});

promise
  .finally(() => console.log('Cleanup or final action'))
  .then(value => console.log(value));

// Output: 
Cleanup or final action
Done

Conclusion

In the realm of JavaScript, mastering Promises is crucial for managing asynchronous operations effectively. By understanding the fundamentals of synchronous and asynchronous programming, you gain the context needed to appreciate the advantages that Promises bring to your code.

Promises offer a powerful way to handle asynchronous tasks with greater readability and maintainability compared to traditional callback methods. They simplify error handling, enable efficient chaining of operations, and support parallel processing. All are essential for developing robust and scalable applications in today's complex architectures.

Despite their benefits, Promises are not without their limitations. Complexity in nested asynchronous tasks and the need for careful implementation can present challenges. However, with a solid understanding of Promises and their advanced functions like Promise.all, Promise.allSettled, Promise.any, and Promise.finally, you can navigate these challenges and harness the full power of asynchronous programming.

As you continue to work with Promises, remember that their effective use can significantly enhance the quality of your code and improve your development workflow. Embrace these tools to build cleaner, more efficient applications and stay ahead in the ever-evolving landscape of JavaScript development.

Mastering Promises is a step towards writing better asynchronous code and tackling the challenges of modern web development with confidence.