Understanding Promises in JavaScript

2018-05-04

Promises are a fundamental feature in modern JavaScript for handling asynchronous operations. They provide a cleaner, more manageable way to work with async code compared to traditional callback functions, helping to avoid “callback hell” and making code more readable and maintainable.

What is a Promise?

A Promise is an object representing the eventual completion (or failure) of an asynchronous operation and its resulting value. A Promise can be in one of three states:

  1. Pending: The initial state. The operation has not completed yet.
  2. Fulfilled: The operation completed successfully, and the promise has a resulting value.
  3. Rejected: The operation failed, and the promise has a reason for the failure (usually an error).

Once a promise is fulfilled or rejected, it is considered settled, and its state cannot change.

Creating a Promise

You can create a promise using the Promise constructor, which takes a function (called the “executor”) with two parameters: resolve and reject.

const myPromise = new Promise((resolve, reject) => {
  // Simulate an async operation
  setTimeout(() => {
    const success = true;
    
    if (success) {
      resolve("Operation successful!");
    } else {
      reject("Operation failed!");
    }
  }, 1000);
});

myPromise
  .then(result => {
    console.log(result); // "Operation successful!"
  })
  .catch(error => {
    console.error(error);
  });

Using Promises with the Fetch API

The fetch() API is a modern way to make HTTP requests and returns a Promise. Here’s a practical example of fetching data from an API.

// getData() returns a Promise
function getData() {
  return fetch('https://jsonplaceholder.typicode.com/posts')
    .then(response => {
      // Check if the response is successful
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
      return response.json();
    })
    .then(data => {
      return data;
    })
    .catch(error => {
      console.error('Error fetching data:', error);
      throw error; // Re-throw to allow caller to handle it
    });
}

const getBtn = document.getElementById('getdata');

getBtn.addEventListener('click', () => {
  getData()
    .then(data => {
      console.log('Fetched data:', data);
    })
    .catch(error => {
      console.error('Failed to get data:', error);
    });
});

Promise Chaining

One of the most powerful features of Promises is chaining. Each .then() returns a new Promise, allowing you to chain multiple asynchronous operations together.

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => response.json())
  .then(post => {
    console.log('Post title:', post.title);
    // Fetch user information based on post's userId
    return fetch(`https://jsonplaceholder.typicode.com/users/${post.userId}`);
  })
  .then(response => response.json())
  .then(user => {
    console.log('Author name:', user.name);
  })
  .catch(error => {
    console.error('Error in promise chain:', error);
  });

Error Handling with .catch()

Promises provide a clean way to handle errors using the .catch() method. Any error thrown in the promise chain will be caught by the nearest .catch().

getData()
  .then(data => {
    console.log(data);
    // Simulate an error
    throw new Error('Something went wrong!');
  })
  .catch(error => {
    console.error('Caught error:', error.message);
  })
  .finally(() => {
    console.log('Cleanup operations can go here');
  });

The .finally() method runs regardless of whether the promise was fulfilled or rejected, making it useful for cleanup operations.

Promise.all() and Promise.race()

JavaScript provides utility methods for working with multiple promises:

Promise.all()

Waits for all promises to resolve. If any promise is rejected, the entire operation fails.

const promise1 = fetch('https://jsonplaceholder.typicode.com/posts/1');
const promise2 = fetch('https://jsonplaceholder.typicode.com/posts/2');
const promise3 = fetch('https://jsonplaceholder.typicode.com/posts/3');

Promise.all([promise1, promise2, promise3])
  .then(responses => {
    return Promise.all(responses.map(res => res.json()));
  })
  .then(data => {
    console.log('All posts:', data);
  })
  .catch(error => {
    console.error('One or more requests failed:', error);
  });

Promise.race()

Resolves or rejects as soon as the first promise in the array settles.

Promise.race([promise1, promise2, promise3])
  .then(response => response.json())
  .then(data => {
    console.log('First completed post:', data);
  });

Modern Alternative: Async/Await

While promises are powerful, modern JavaScript provides an even cleaner syntax using async/await, which is built on top of promises.

async function getData() {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts');
    
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Error fetching data:', error);
    throw error;
  }
}

// Usage
getBtn.addEventListener('click', async () => {
  try {
    const data = await getData();
    console.log('Fetched data:', data);
  } catch (error) {
    console.error('Failed to get data:', error);
  }
});

Conclusion

Promises are essential for modern JavaScript development, providing a robust way to handle asynchronous operations. Understanding how to create, chain, and handle errors in promises will make your code more reliable and easier to maintain. For even cleaner code, consider using async/await syntax, which builds upon promises to make asynchronous code look and behave more like synchronous code.

Resources