Make Your Life Easier with JavaScript Promises: A Full-Stack Developer‘s Guide

Bybomber bot

As a full-stack JavaScript developer, asynchronous programming is a fact of life. Whether you‘re making HTTP requests from a Node.js server, querying a database, reading files, or updating the DOM in a web app, you need a robust way to handle tasks that take time without blocking execution. For years, the go-to solution was callbacks. But callbacks have several drawbacks, like making code harder to read and reason about, limited error handling, and the dreaded "callback hell" of deeply nested functions.

Promises provide a much more elegant and powerful alternative to callbacks for async programming in JavaScript. They allow you to write cleaner, more readable async code, avoid callback hell, and simplify error handling. Promises have become an indispensable tool for full-stack JavaScript developers. In this guide, I‘ll share my perspective on why promises are so useful and provide practical examples and techniques for getting the most out of them in your full-stack development work.

The Problem with Callbacks

To understand why promises are so powerful, let‘s first look at the problems with the callback approach to async programming in JavaScript. Here‘s an example of making an HTTP request using Node.js with a callback:

const request = require(‘request‘);

request(‘https://api.example.com/data‘, (err, res, body) => {
  if (err) {
    console.error(‘Error fetching data:‘, err);
    return;
  }

  const data = JSON.parse(body);
  console.log(‘Data:‘, data);
});

This code uses the popular request library to make an HTTP GET request to an API endpoint. The request function takes a URL and a callback function that will be called with an error (if one occurred), the response object, and the response body.

While this code works, there are a few issues:

  1. The callback function is nested inside the request call, which can make the code harder to read and understand at a glance.

  2. If we need to make additional async calls based on the response data, we‘ll have to nest more callbacks, quickly leading to "callback hell" and a "pyramid of doom."

  3. Error handling is manual and repetitive – we have to check for an error in each callback and handle it appropriately.

  4. It‘s difficult to do things like make multiple requests in parallel or implement more complex control flow.

Promises provide a cleaner and more powerful way to handle these issues.

Promises to the Rescue

Here‘s the same HTTP request example rewritten using a promise:

const axios = require(‘axios‘);

axios.get(‘https://api.example.com/data‘)
  .then(res => {
    console.log(‘Data:‘, res.data);
  })
  .catch(err => {
    console.error(‘Error fetching data:‘, err);
  });

This code uses the axios library, which provides a promise-based API for making HTTP requests. The axios.get method returns a promise that resolves with the response object when the request is successful, or rejects with an error if something went wrong.

We use the .then() method to specify a callback function that will be called with the response object when the promise resolves successfully. We use the .catch() method to specify an error handler function that will be called if the promise rejects.

Already, this code is much more readable than the callback version. The .then() and .catch() methods clearly separate the success and error cases, and we don‘t have to manually check for errors in each callback.

But the real power of promises comes when you need to make multiple async calls or implement more complex control flow.

Chaining Promises

One of the most powerful features of promises is the ability to chain them together. This allows you to avoid callback hell and write async code that reads more like synchronous code.

Here‘s an example of chaining promises to make multiple API calls in sequence:

axios.get(‘https://api.example.com/user/123‘)
  .then(res => {
    const userId = res.data.id;
    return axios.get(`https://api.example.com/posts?userId=${userId}`);
  })
  .then(res => {
    const posts = res.data;
    console.log(‘User posts:‘, posts);
  })
  .catch(err => {
    console.error(‘Error fetching data:‘, err);
  });

In this code, we first make a request to get a user object by ID. When that request resolves, we extract the user ID from the response data and use it to make a second request to get all of the user‘s posts. When the second request resolves, we log the posts to the console.

By returning a promise from the first .then() callback, we can chain another .then() to handle the result of the second request. The .catch() at the end will handle any errors that occur in either of the requests.

This chaining approach allows us to write async code that flows in a logical, linear way, rather than nesting callbacks. And we only need a single .catch() to handle errors for the entire chain.

Composing Promises with Promise.all() and Promise.race()

Another powerful feature of promises is the ability to compose them using utility methods like Promise.all() and Promise.race().

Promise.all() takes an array of promises and returns a new promise that resolves when all of the input promises have resolved. This is useful when you need to make multiple independent async calls and wait for all of them to complete before proceeding.

Here‘s an example of using Promise.all() to fetch data from multiple API endpoints in parallel:

const endpoints = [
  ‘https://api.example.com/users‘,
  ‘https://api.example.com/posts‘,
  ‘https://api.example.com/comments‘
];

Promise.all(endpoints.map(url => axios.get(url)))
  .then(([usersRes, postsRes, commentsRes]) => {
    console.log(‘Users:‘, usersRes.data);
    console.log(‘Posts:‘, postsRes.data);
    console.log(‘Comments:‘, commentsRes.data);
  })
  .catch(err => {
    console.error(‘Error fetching data:‘, err);
  });

Here, we use map() to create an array of promises, one for each API endpoint URL. We pass this array to Promise.all(), which returns a promise that will resolve when all of the individual API request promises have resolved. The resolved value is an array containing the response objects for each request, in the same order as the input array.

Promise.race(), on the other hand, takes an array of promises and returns a promise that resolves or rejects as soon as one of the input promises resolves or rejects. This is useful for things like implementing timeouts on async operations.

Here‘s an example of using Promise.race() to timeout an API request after 5 seconds:

const request = axios.get(‘https://api.example.com/data‘);
const timeout = new Promise((resolve, reject) => {
  setTimeout(() => reject(new Error(‘Request timed out‘)), 5000);
});

Promise.race([request, timeout])
  .then(res => {
    console.log(‘Data:‘, res.data);
  })
  .catch(err => {
    console.error(‘Error:‘, err);
  });

In this code, we create two promises: one for the actual API request using axios.get(), and another that will reject after 5 seconds using setTimeout(). We pass both promises to Promise.race(), which will resolve or reject with the result of whichever promise settles first. If the API request takes longer than 5 seconds, the timeout promise will reject first and the .catch() block will log an error.

Promise-Based Control Flow

Promises can also be used to implement more complex control flow patterns beyond simple chaining. For example, you can use promises to implement branching logic based on the result of an async operation.

Here‘s an example of using promises to conditionally fetch additional data based on the result of an initial API request:

axios.get(‘https://api.example.com/user/123‘)
  .then(res => {
    const user = res.data;

    if (user.isAdmin) {
      return axios.get(‘https://api.example.com/admin/logs‘);
    } else {
      return Promise.resolve(null);
    }
  })
  .then(adminLogsRes => {
    if (adminLogsRes) {
      console.log(‘Admin logs:‘, adminLogsRes.data);
    } else {
      console.log(‘User is not an admin‘);
    }
  })
  .catch(err => {
    console.error(‘Error:‘, err);
  });

In this code, we first fetch a user object from the API. Then, based on whether the user is an admin or not, we either fetch additional admin log data or resolve with null. The second .then() block handles the result of the conditional fetch – if adminLogsRes is truthy (i.e. we fetched admin logs), we log them to the console. Otherwise, we log a message indicating the user is not an admin.

This branching logic is implemented by returning either a new promise (axios.get()) or a pre-resolved promise (Promise.resolve()) from the first .then() callback based on a condition. The second .then() callback will wait for whichever promise is returned before proceeding.

Promise Cancellation

One potential downside of promises compared to callbacks is that they can‘t be easily cancelled once they‘ve started. This can be problematic if you have a long-running async operation that needs to be aborted based on some condition (e.g. the user navigates to a different page in a web app).

There are a few different approaches to implementing promise cancellation. One common pattern is to use a cancel token object that can be passed to the async function and checked periodically to see if the operation should be aborted.

Here‘s an example of implementing cancellable promises using a cancel token:

const makeCancellablePromise = (promise, onCancel) => {
  let isCancelled = false;

  const wrappedPromise = new Promise((resolve, reject) => {
    promise.then(
      val => isCancelled ? reject({isCancelled, value: val}) : resolve(val),
      error => reject({isCancelled, error})
    );
  });

  return {
    promise: wrappedPromise,
    cancel: () => {
      isCancelled = true;
      onCancel?.();
    }
  };
};

// Example usage
const { promise, cancel } = makeCancellablePromise(
  axios.get(‘https://api.example.com/data‘),
  () => console.log(‘Request cancelled‘)
);

// Cancel the promise after 1 second
setTimeout(cancel, 1000);

promise
  .then(res => {
    console.log(‘Data:‘, res.data);
  })
  .catch(({isCancelled, error}) => {
    if (isCancelled) {
      console.error(‘Request cancelled‘);
    } else {
      console.error(‘Error:‘, error);
    }
  });

In this code, we define a makeCancellablePromise function that takes a promise and an optional onCancel callback. Inside the function, we create a new wrapper promise that resolves or rejects based on the original promise, but checks the isCancelled flag first. We return an object with two properties: the wrapper promise, and a cancel function that sets the isCancelled flag to true and calls the onCancel callback.

To use this cancellable promise, we pass a promise to makeCancellablePromise and extract the returned wrapper promise and cancel function. We can then call cancel() at any time to abort the promise. In the example, we cancel the promise after 1 second using setTimeout. The .catch() block checks the isCancelled flag to determine if the promise was cancelled or if an actual error occurred.

This is just one approach to promise cancellation – there are other patterns and libraries that provide more sophisticated cancellation mechanisms. But the basic idea is to provide a way to abort a promise externally based on some condition.

Promises and Async/Await

Promises have become even more important in modern JavaScript with the introduction of the async and await keywords. Async functions always return a promise, and the await keyword can be used to pause execution of an async function until a promise settles.

Here‘s an example of using async and await with promises:

async function fetchData() {
  try {
    const userRes = await axios.get(‘https://api.example.com/user/123‘);
    const user = userRes.data;

    const postsRes = await axios.get(`https://api.example.com/posts?userId=${user.id}`);
    const posts = postsRes.data;

    console.log(‘User:‘, user);
    console.log(‘Posts:‘, posts);
  } catch (err) {
    console.error(‘Error:‘, err);
  }
}

fetchData();

In this code, we define an async function fetchData that uses await to pause execution until the promises returned by axios.get() settle. We can use try/catch to handle any errors that may occur.

Async/await provides a more synchronous-looking way to write async code, but under the hood it‘s still using promises. Understanding promises is essential to using async/await effectively.

Real-World Use Cases

As a full-stack JavaScript developer, I use promises extensively in my daily work. Here are a few examples of how I‘ve used promises in real-world projects:

  • In a Node.js API, using promises to handle concurrent database queries and aggregate the results before sending a response to the client.
  • In a React frontend, using promises to handle user input validation and conditionally fetch additional data from the server before rendering a component.
  • In an Express middleware function, using promises to implement request timeouts and cancel long-running requests if they exceed a certain time limit.
  • In a CLI tool, using promises to handle asynchronous file I/O and execute shell commands in a readable, sequential way.

Promises are a versatile tool that can be used in just about any situation where you need to handle asynchronous operations in JavaScript.

Conclusion

Promises are a game-changer for asynchronous programming in JavaScript. They provide a cleaner, more readable way to handle async operations compared to callbacks, and enable powerful patterns like promise chaining, composition with Promise.all() and Promise.race(), and more complex control flow.

As a full-stack JavaScript developer, taking the time to fully understand and master promises will make your life much easier and your code much cleaner and more robust. Promises are an essential tool in the modern JavaScript developer‘s toolkit.

If you‘re not already using promises in your JavaScript code, I highly encourage you to start. And if you are using promises, I hope this guide has given you some new ideas and techniques to take your promise-fu to the next level.

So go forth and conquer asynchronicity with the power of promises! Your future self (and your fellow developers) will thank you.

Similar Posts

What is Storybook and How Can I Use It to Create a Component Library in React?

Bybomber bot

As a full-stack developer, I have experienced firsthand the challenges of building and maintaining large-scale React applications. One of the most critical aspects of successful React development is creating reusable and modular components. However, as the number of components grows, it becomes increasingly difficult to manage, document, and test them effectively. This is where Storybook…

The Access-Control-Allow-Origin Header Explained – With a CORS Example

Bybomber bot

Cross-Origin Resource Sharing (CORS) is a critical mechanism for enabling controlled access to web resources across different domains. At the heart of CORS is the Access-Control-Allow-Origin HTTP response header. This header is used by a server to indicate which origins are allowed to read the information from a web browser. In this in-depth guide, we‘ll…

JavaScript Array Length Explained: A Comprehensive Guide

Bybomber bot

Arrays are a fundamental data structure in JavaScript, and understanding how they work is crucial for any developer working with the language. One of the most important properties of an array is its length, which represents the number of elements it contains. In this comprehensive guide, we‘ll dive deep into the length property of arrays…

I built a role playing game in JavaScript. You can, too. Here‘s how.

Bybomber bot

Have you ever wanted to build your own epic role playing game (RPG) like Final Fantasy or Skyrim? It may seem like an impossibly daunting task requiring teams of developers and years of effort. But thanks to the power and accessibility of JavaScript, creating your own RPG is more achievable than you might think. I…

JavaScript Objects, Square Brackets and Algorithms: A Full-Stack Developer‘s Guide

Bybomber bot

As a full-stack developer, you‘re likely to encounter JavaScript objects on a daily basis. Whether you‘re working with JSON data from an API, configuring application settings, or implementing complex data structures, objects are a fundamental part of the language. In this in-depth guide, we‘ll explore the power of objects, particularly focusing on accessing properties dynamically…