Vijaya Shree's Blog

Promises in JavaScript

Promises in JavaScript

Vijaya Shree's photo
Vijaya Shree
·

3 min read

Promises will perform asynchronous operations. They were not always part of JavaScript.

Callbacks worked together with asynchronous functions to produce desired results in the past. A callback is any function that is a parameter of an async function, which the async function invokes to complete its operation.

Lets take code examples of how things used to work before and after promises.

Suppose we are building an e-commerce website, we will be having cart in it with some items, we will make asynchronous API calls using call backs , the code looks something like this:

const cart = ["shoes","pants","shirts"];

// API
createOrder(cart, function(orderId){
    proceedToPayment(orderId);
});

In the above code, we are passing a call back function to another function, which is not reliable as we cannot say when that function will be called in future. Its like giving control of our program to other part of the code which we are not aware of. tHis is not a confident way of writing code.

To handle this type of situations, promises are introduced, lets see how they work, the code looks something like this:

const cart = ["shoes","pants","shirts"];

const promise = createOrder(cart)
// {data: undefined}- before api call
// {data : orderDetails}- after api call

promise.then(function(orderId){
    proceedToPayment(orderId);
})

In the above code,

The createOrder function is like making a request for something, but it takes some time to get the result.

When we call createOrder, it doesn't give us the result right away. Instead, it gives us a promise, which is like a placeholder for the result.

This promise will eventually be filled with the result from createOrder. It's like saying, "Hey, I'm waiting for the result." We don't know exactly how long it will take for createOrder to finish its job. Once createOrder is done, it will fill the promise with the result it got.

We can then use the .then() function to say, "When you're done, do this with the result." So, we attach a function (proceedToPayment) to the promise using .then(). This function will only run when createOrder is finished. Promises make sure that the attached function (proceedToPayment) is called exactly once and only after createOrder is done.

In similar manner browser also provides a promise called fetch(), it returns a promise, lets take an example.

const GITHUB_URL = "https://api.github.com/users/user1";
const user = fetch(GITHUB_URL);
// gives us a promise object of details of user1

In the above code we are using fetch() to get the data from the provided URL, as we know fetch is a promise it returns an data object which is returned by the URL.

JavaScript promises can be in one of three possible states. These states indicate the progress of the promise. They are:

  • pending: This is the default state of a defined promise

  • fulfilled: This is the state of a successful promise

  • rejected: This is the state of a failed promise

A promise goes from pending to fulfilled, or from pending to rejected—‘fulfilled’ and ‘rejected’ indicate the end of a promise.

If we want to attach any callback to a promise , we do something like this :

const GITHUB_URL = "https://api.github.com/users/user1";
const user = fetch(GITHUB_URL);
user.then(function(data){
    console.log(data)
})

This gives the data object returned by promise.

Promise objects are immutable and can be resolved just once.

This is how promises work in JavaScript.

Javascript Promises