The Ultimate Guide to Javascript Promises
A year ago, I graduated from Georgia Tech Coding Bootcamp. What a phenomenal learning experience — Celebrating everyday! #HappyOneYear
During my coding bootcamp, I worked with server side platform Node.js for most of my projects and felt the pain of dealing with asynchronous code as my applications had so much of I/O in it. To deal cleanly with asynchronous code, promises made their way into my picture and turned out to be more promising for making the code behave in a synchronous manner.
In this article, I will explain promises in the easiest way possible.
Promises
In Javascript, callback functions were initially used to handle asynchronous operations. However, callbacks were limited in terms of functionality and often led to unmanageable code that produced something known as callback hell. To solve this issue, promises were introduced. The core idea behind promises is that a promise represents the eventual completion or failure of an asynchronous operation, and its resulting value.
A promise represents the eventual completion or failure of an asynchronous operation, and its resulting value
A Promise is in one of these states:
Pending — The initial state where the outcome is not known as the operation is not completed yet.
Fulfilled — The state of a promise representing a successful operation with the resulting value.
Rejected — The state of a promise representing a failed operation with a reason why it failed.
Once a promise is fulfilled or rejected, it is immutable (i.e. it can never change again).
Creating a simple promise
In this below example, a promise is created using the new keyword and its constructor that takes a call back function with two arguments. It is assumed that the code executes successfully. If the task is successful, the promise is resolved; an optional parameter “The promised task was done successfully” is passed. If the task is unsuccessful, then the promise is rejected; an optional parameter “The promised task was not done” is passed. The methods .then() and .catch() are used, so we can return value of the called handler i.e. resolve/reject.
Methods
Promise.all( )
The Promise.all() method returns a single Promise that fulfills when all of the promises passed as an iterable have been fulfilled or when the iterable contains no promises or when the iterable contains promises that have been fulfilled and non-promises that have been returned. It rejects with the reason of the first promise that rejects, or with the error caught by the first argument if that argument has caught an error inside it using try/catch/throw blocks.
It is typically used after having started multiple asynchronous tasks to run concurrently and having created promises for their results, so that one can wait for all the tasks being finished.
Promise.allSettled( )
The Promise.allSettled() method returns a promise that resolves after all of the given promises have either resolved or rejected, with an array of objects that each describes the outcome of each promise.
Promise.race( )
The Promise.race() method returns a promise that fulfills or rejects as soon as one of the promises in an iterable fulfills or rejects, with the value or reason from that promise.
Conclusion
Promises are a way to chain asynchronous operations cleanly without deeply nested callbacks.
Promise.all — It waits for all promises to resolve and returns an array of their results. If any of the given promises rejects, it becomes the error of Promise.all, and all other results are ignored.
Promise.allSettled — It waits for all promises to settle and returns their results as an array of objects, and they can be individually either resolved or rejected.
Promise.race — It will return the promise instance which is firstly resolved or rejected.
Thank you for reading.
