A Wizard never breaks his (JavaScript) Promise

A beginner’s guide to using and chaining asynchronous operations

A promise in JavaScript is an object that represents the result of a magical spell. It allows you to write asynchronous code in a way that looks and behaves like synchronous code.

Here is a metaphor to help you understand how promises work: Imagine that you are a wizard, and you want to cast a spell to summon a magical creature. You can’t just cast the spell right away, because it takes time for the creature to appear. So, you cast the spell and promise to wait for the creature to arrive.

In this metaphor, the spell is the promise, and the creature is the asynchronous operation. Just like it takes time for the creature to appear, the promise needs some time to complete the asynchronous operation. When the creature arrives, the spell is complete and the creature appears. Similarly, when the asynchronous operation is complete, the promise is resolved and returns the result.

Here is an example of how you might use a promise to load data from a server using the fetch API:

function getDataFromServer() {
  return fetch('/some/data')
    .then(response => {
      if (response.ok) {
        return response.json();
      }
      throw new Error(`Request failed: ${response.statusText}`);
    })
    .catch(error => {
      throw error;
    });
}

To use the promise, you can call the getDataFromServer function and use the then and catch methods to handle the result:

getDataFromServer()
  .then(data => {
    // Do something with the data
    console.log(data);
  })
  .catch(error => {
    // Handle any errors
    console.error(error);
  });

The then method is called when the promise is resolved, and the catch method is called when the promise is rejected.

You can also use the async/await syntax to make working with promises even easier:

async function getDataFromServer() {
  try {
    const response = await fetch('/some/data');
    if (response.ok) {
      return response.json();
    }
    throw new Error(`Request failed: ${response.statusText}`);
  } catch (error) {
    throw error;
  }
}

(async () => {
  try {
    const data = await getDataFromServer();
    // Do something with the data
    console.log(data);
  } catch (error) {
    // Handle any errors
    console.error(error);
  }
})();

Here are the methods that are available on a promise object in JavaScript:

• then: This method is used to handle the resolved value of a promise. It takes two arguments: a callback function to be called when the promise is resolved, and an error-handling callback function to be called if the promise is rejected. You can chain multiple then methods together to create a chain of asynchronous operations.
• catch: This method is used to handle errors that occur in a promise chain. It takes a single argument: a callback function to be called if the promise is rejected. You can use this method to handle any errors that occur in the promise chain.
• finally: This method is called after the promise is either resolved or rejected. It takes a single argument: a callback function that will be called regardless of the outcome of the promise. You can use this method to perform cleanup tasks, such as closing open connections or releasing resources.
• all: This method returns a promise that is resolved when all of the promises in an iterable (such as an array) have been resolved. If any of the promises are rejected, the returned promise is rejected with the value of the first rejected promise.
• race: This method returns a promise that is resolved or rejected as soon as one of the promises in an iterable (such as an array) is resolved or rejected. The value of the resolved or rejected promise is the value of the returned promise.
• resolve: This method returns a promise that is resolved with a given value. It can be used to create a resolved promise, or to convert a value into a promise.
• reject: This method returns a promise that is rejected with a given reason. It can be used to create a rejected promise, or to signal an error.

Contact me here: LinkedIn | Codepen | Email