JavaScript Promise: The Ultimate Promise

Why Promise?

JavaScript is commonly known as a single thread language where two bits of the script cannot run at the same time and will run one after the other. JavaScript language usually does not have the luxury of having multithreaded systems like humans do. Typically, JavaScript has the same unhindered characteristics as printers and painters where it falls under the same queue.

Imagine loading an image in JavaScript where event listeners and callbacks are probably used.

var img1 = document.querySelector(‘.img-1’);

img1.addEventListener(‘load’, function() {
// Image loaded
});

img1.addEventListener(‘error’, function() {
// Not loaded
});

Certainly, event listeners can handle this simple loading component, but when it comes to “complete” property, things will take a turn.

var img1 = document.querySelector(‘.img-1’);

function loaded(){

// loaded

}

If(img1.complete){

Loaded();

}else{

img1.addEventListener(‘load’, loaded);

img1.addEventListener(‘error’, function() {
// Not loaded
});

This method could not catch the images that errored before we got the chance to listen to them. There are no methods available in the DOM either. Things will get more complicated when trying to load multiple images in a huge system with more sophisticated functionalities.

Terminology of Promises and how it functions

A promise can be described as an object that may produce a single value at a future time. It can be either a resolved value or a reason that it is not resolved. A network error is a perfect example. A promise can be implemented in one of three different states. They are, “fulfilled”, “rejected”, or “pending”. Promise users can merge callbacks to handle the fulfilled value or the reason for rejection.

A promise will usually start doing whatever task you order it as soon as the promise constructor is invoked. This means that promises are eager to do tasks.

A promise is an object which can be returned synchronously from an asynchronous function.

· Fulfilled: onFulfilled() will be called when resolve() was called.

· Rejected: onRejected() will be called when reject() was called.

· Pending: not yet fulfilled or rejected.

· Settled: has fulfilled or rejected.

If a promise was settled, it cannot be resettled. Calling either resolve or reject functions may not result in anything. The immutability of a settled promise is a vital feature in promises.

const wait = time => new Promise((resolve) => setTimeout(resolve, time));

wait(3000).then(() => console.log(‘Hello!’)); // ‘Hello!’

The wait(3000) function call will wait 3000ms, which is 3 seconds, and then print “Hello!” in the console. Promises usually define a .then() method which you use to pass handlers that can take the resolved or rejected value. We usually call setTimeout() to create the probable delay, and call resolve() when it is finished calling. Anyone can resolve() or reject() with values as an option. Which will be passed to the callback functions attached with .then().

When someone reject() with a value, it always passes an error object. Passing an error object makes that explicit.

Rules of Promises

A standard for promises was usually identified by the Promises specification community. Promises must follow a specific set of rules.

· A pending promise may transform into a rejected or fulfilled state.

· When a rejected or fulfilled promise is settled, it must not transform into any other state.

· A promise or “tenable” is an object that supplies a standard-compliant .then() method.

· It must have a value (which may be undefined) when a promise is settled. The value must not be changed.

The .then() method must contain these specific sets of rules.

· If the arguments supplied are not the functions, the arguments must be ignored.

· Both onFulfilled() and onRejected() are optional.

· Either onFulfilled() or onRejected() may not be called more than once.

· onFulfilled() will be called after the promise is fulfilled, with its value as the first argument.

· onRejected() will be called after a promise is rejected, with the sole reason for rejection as the first argument.

· A promise can be used to aggregate callbacks, which means .then() method can be called many times on the same promise.

· It must return a new promise.