Understanding Promises in JavaScript.

Abiala Israel — Sun, 23 Apr 2023 03:54:52 +0000

Introduction

Promises are a powerful tool in JavaScript that allow us to write asynchronous code that is more readable and easier to manage. They provide a way to handle and manage operations that may take a long time to complete, without blocking the execution of other code.

In this article, we will explore the nature of promises in JavaScript, how they work, and how they can be used to write more efficient and effective code. We will also look at some common use cases for promises, and how they can be combined with other JavaScript concepts such as callbacks and async/await.

Join us as we delve into the world of promises in JavaScript, and discover how they can make your code cleaner, more maintainable, and more powerful.

Prerequisites

Basic understanding of JavaScript fundamentals.

AJAX

AJAX stands for Asynchronous JavaScript and XML. Asynchronous operations in JavaScript allows information to be fetched from a remote server or API without disturbing the running of the program. It runs in the background and when the operation is complete, the task gives a result.

Most of the time, our programs consists of various callback functions which takes time to load, running them independently makes handling efficient.

Let's look at the lines of codes shown below:

const userName = "Abiala Israel";
console.log(userName);
const  age  =  56;
console.log(age);
setTimeout(function () {
    console.log('Dotun is a boy');
}, 5000);
console.log(`${userName} is ${age} years old`);

This will output the following result:

Abiala Israel
56
Abiala is 56 years old
Dotun is a boy`

Normally, JavaScript is a single threaded language and it executes each line of code sequentially. But in the example shown above, the setTimeout function is an asynchronous operation which got the output Dotun is a boydelayed for 5 secs.

After 5 secs, the callback function was returned but the last line of code was executed before it. This shows clearly that the setTimeout function was running in the background.

What are Promises?

Promises are returned objects which are gotten from a complete or an incomplete asynchronous operation. It can be termed as success or failure depending on the result. It is used as a placeholder of an asynchronous operation.

Fetching and manipulation of data has been made possible through Promises. It serves as a container for a finished asynchronous operation.

Various technologies can be used in updating the user interface of website without having to refresh the browser page. The most efficient way of fetching data from web servers is through the use of Promises. The two major technologies we will consider in this article includes:

XMLHttpRequest
Fetch API

For example, lets consider some code that uses addRecipe() that asynchronously add recipe to a list of recipes in a cooking catalogue:

const  successCallback  =  recipe  => {
    console.log(`I downloaded the recipe from ${recipe}`);
    };

const  failureCallback  =  error  => {
    console.log(`Could not load recipe: ${error}`);
    };

addRecipe(recipeLoader, successCallback, failureCallback);

Instead of attaching the callback handlers to the addRecipe(), you can wait for a value to be returned. Then the handlers can be attached to it.

addRecipe(recipeLoader).then(successCallback, failureCallback);

In this case, addRecipe(recipeLoader) returns a promise. Then, the then() keyword allows us to perform subsequent asynchronous operations on the returned promise.

States of Promises

Pending: This means that the operation is still in progress.
Fulfilled: The operation is successful and complete. Hence, a value is returned.
Rejected: The operation is incomplete and unsuccessful. Then, an error can be thrown.

Creating New Promises

To create a new promise, you can use the constructor function and the new keyword. The constructor function takes one executor function as an argument.

const newPromise = new Promise((resolve, reject) => {
    // Code contains asynchronous operation
});

The new Promise() returns a new object. The executor function takes two functions resolve and reject as arguments. The successful asynchronous operations are handled by the resolve callback function while the rejected ones are handled by the reject function.

Resolving and Rejecting Promises

After creating a new object, we can handle the object using either of the two executor functions. For example,

const myPromise = new  Promise((resolve, reject) => {
    resolve("This result is fulfilled")
});

In this case, "Hello world" is the value of the fulfilled promise.

const  myPromise = new Promise((resolve, reject) => {
    reject(new Error("This result is rejected"))
});

The promise is rejected and the error "This result is rejected" will be the value of the rejected promise.

Chaining Promises

The methods used in handling promises is the use of then(), catch() and finally(). The next operation performs after the previous operation has been settled. This allows us to chain the promises, hence perform series of asynchronous operations.

const fetchImage1 = new Promise((resolve, reject) => {
    // Asynchronous code
});

const  fetchImage2  =  fetchImage1.then(successHandler, failureHandler);

The then()keyword takes one or two arguments e.g. then(successHandler, failureHandler) or then(successHandler).

For example, lets consider an asynchronous function that fetches image from a remote server. Then the src of each images are added to imageList The code is shown below:

const imageList = [];

fetchImageSrc()
    .then(url => fetch(url))
    .then(res => res.json())
    .then(data => imageList.push(data));

The fetchAPI takes the url as an argument and the src of the images are fetched. The returned promise is attached to .then(res => res.json()) which converts it to a json file. This also returns a promise.
Then .then(data => imageList.push(data)) pushes the src of the images into the array imageList created.

Consuming Promises with `catch()`

Whenever the asynchronous operation becomes rejected, you use the catch() method to handle errors. Let's consider the code shown below.

fetchImageSrc()
        .then(url => fetch(url))
        .then(res => res.json())
        .then(data => imageList.push(data))
        .catch(console.log('Could not find image source');

In this case, if the promise returned an error, the result shown will be:

Could not find image source

Consuming Promises with `Async/Await` method

Since ES 2017, an updated method of handling promises is the use of async function declaration. This method enables the use of await keyword within its function body. This allows us to await the promise result while the asynchronous function is running in the background. The syntax is shown below:

const  fetchImage = async function() {
    const  res = await fetch(url);
    const data = await res.json()
    console.log(data);
};

fetchImage();

When the fetchImage() is called, the promise is settled. The await fetch(url) waits for the response to be complete. The value of the await expression will be the value of the promise. Then, the console.log(data) logs the JSON object to the console.

Error Handling with `try()` and `catch()` methods

Handling errors in promises makes it easy to write clean codes. We use the try() and catch() statements. In this case, you define the main code block into the try statement. Then in the case whereby the promise is rejected, you handle the error using the catch() statement.

const imageList = [];

const fetchImage = async function() {
    try {
        const res = await fetch(url);
        res = await res.json();
        data = imageList.push(data);
    } catch(error) {
        console.log(`No image found ${error}`);
    }
    };

fetchImage();

In the example above, the function throws error if the promises got rejected.

Other Promises methods

There are other promises methods that can handle one or more promises. They include:

Promise.race()
Promise.all()
Promise.any()
Promise.allSettled()
Promise.resolve()
Promise.reject()

The `Promise.race()` method

This method takes an array of promises as an argument and executes them simultaneously. The result of the fastest promise on execution is returned whether resolved or rejected.

The `Promise.all()` method

This method waits for all the promises to be resolved. The array containing the result of the resolved promises are returned. If one of the promises reject, then all other promises result will ignored, In this case, you can handle the error thrown.

The `Promise.any()` method

It returns when any of the promises is resolved, then the value of this promise is returned. It does not wait for other result of other promises.

The `Promise.allSettled()` method

This method is quite similar to Promise.all() method but it waits for the promises to settle. Then logs the result of the promises whether they are fulfilled or rejected

The `Promise.resolve()` method

This method returns a new Promise object that is resolved with a given value or a resolved promise if the given value is already a promise.

The `Promise.reject()` method

This method returns a new Promise object that is rejected for a reason. The error thrown by this rejection can be handled using catch() method.

In my next article, we will fully examine these methods.

Conclusion

Wow! It's good to still have you here. I hope you were able to pick some things about Promises. I can't wait to see you use them on your next project.
By using Promises effectively, you can write asynchronous code that is easier to read, debug and maintain. In this article, we were able to learn how Promises work in JavaScript, the syntax, how to create promises as well as best practices of using them.

DEV Community: Abiala Israel

Understanding Promises in JavaScript.

Introduction

Prerequisites

AJAX

What are Promises?

States of Promises

Creating New Promises

Resolving and Rejecting Promises

Chaining Promises

Consuming Promises with catch()

Consuming Promises with Async/Await method

Error Handling with try() and catch() methods

Other Promises methods

The Promise.race() method

The Promise.all() method

The Promise.any() method

The Promise.allSettled() method

The Promise.resolve() method

The Promise.reject() method