Promises in Javascript is a very interesting topic and a bit complicated topic as well. Many a time we come across promises but we fail to identify them. Promises are very common in Javascript programming.
So a Promise is an object that represents an eventual completion or failure of an asynchronous operation and its resulting value. Which means promises return some value after a particular interval of time. The value can either be a success value or a failure value.
So let's consider the below code
\n let promiseObj = new Promise(()=> 'some promise');\n\n console.log(promiseObj);\n\n /**\n * the output will be Promise {<pending>} not 'some promise'\n */A promise can be any of the below three states at a point of time:
\n const promise = new Promise((resolve, reject) => { \n try{\n setTimeout(() => { \n resolve('resolved promise'); \n }, 5000); \n }\n catch (e) {\n reject(e)\n }\n }); \n\n // this will print - 'resolved promise'\n promise.then((val) => console.log(val))The setTimeout function in the above code will be executed after 5 seconds. So the promise will settle after 5 seconds. Hence we can say that the promise will be resolved after 5 seconds. After that promise.then((val) => console.log(val)) block will be executed and will return the output resolved promise.
The Promise object takes in executor function as a parameter.
new Promise(executor_function)The executor function has two parameters again resolve or reject. Let's say you want to settle the promise with a success value then you do it with the resolve method, which is the first parameter to the executor method. If you want to settle a promise with a failure value then you use the reject method, which is the second parameter to the executor method.
new Promise((resolve , reject)=>{\n try{\n resolve(/** resolve some suceess way over here */)\n\n }catch (err){\n /** reject if some error occured */\n reject(err)\n\n }\n })Promise.all() method accepts an array as a parameter. Promise.all() waits for all the Promises in the array passed to either be resolved or rejected and returns the new array of resolved promises.
const promise1 = Promise.resolve(32);\n const promise2 = 1234;\n const promise3 = new Promise((resolve, reject)=>{\n setTimeout(()=> 'resolve something',2000)\n })\n\n Promise.all([promise1, promise2, promise3 ]).then(\n /** \n * will console the values after 2 seconds\n * [32, 1234, 'resolve something']\n */\n val => console.log(val)\n )The problem with Promise.all is, suppose that one promise fails or gets rejected then the entire chain of promises fails, throwing the respective error. Hence you need to be careful while performing Promise.all.\nThe advantage of Promise.all is it can perform concurrent tasks. But we need to make sure that none of the promises in the array fail.
Promise.allSettled takes an array as a parameter and waits for all the promises to settle. The settled promise can either be a rejected or resolved value. Once the promises are settled it returns an array of settled promises. For a resolved promise the return object will have the status field as fulfilled and value field as the resolved value of that promise. For a rejected promise the return object will have the status field as rejected and instead of value field it will have a reason field with the reason for the promise to get rejected.
const promise1 = Promise.resolve('resolved value');\n const promise2 = 23;\n const promise3 = new Promise(function(resolve, reject) {\n setTimeout(reject, 100, 'i will be rejected');\n });\n\n Promise.allSettled([promise1, promise2, promise3]).then(function(values) {\n console.log(values);\n });\n\n/**\n*\n* output for the above code:\n*\n* Array [ Object { status: \"fulfilled\", value: 'resolved value' }, \n* Object { status: \"fulfilled\", value: 23 }, \n* Object { status: \"rejected\", reason: \"i will be rejected\" }\n* ]\n*\n*/Promise.race accepts an array as a parameter and returns the value of the first settled promise. The settled promise may either be resolved or rejected. If it is rejected, it is rejected with the reason from the first promise that was rejected.
const promiseMeApple = new Promise(function(resolve, reject) {\n setTimeout(resolve, 100, `🍎`);\n });\n\n const promiseMeGrapes = new Promise(function(resolve, reject) {\n setTimeout(resolve, 300, `🍇`);\n });\n\n Promise.race([promiseMeApple, promiseMeGrapes]).then(function(value) {\n //resolved value \n console.log(value);\n });\n // expected output: \"🍎\"Promise.resolve accepts a value to be returned by the new Promise as a parameter and return the new Promise with the resolved value.
let melonPromise = Promise.resolve(`🍉`);\n\n /** will console log : [object Promise] */\n console.log(melonPromise);\n\n /**\n * if u want to console the value of promise then use a callback\n *\n * This will print 🍉 as output\n */\n melonPromise.then(val => console.log(val)); Promise.reject accepts the reason for the promise to be rejected as a parameter and return a rejected promise with the reason.
let tomatoPromise = Promise.reject(`I don't like Tomatos 🍅 `);\n\n /** will console log : Promise {<rejected>: \"I don't like Tomatos 🍅 \"} */\n console.log(tomatoPromise);\n\n /**\n * if u want to console the value of promise then use a callback\n *\n * This will print \n *\n * : Uncaught (in promise) I don't like Tomatos 🍅 \n *\n * as output\n */\n tomatoPromise.then(val => console.log(val)); The main advantage of promises is performing tasks concurrently. With promises we can perform tasks concurrently which will reduce the time significantly.
\nLet's consider making an API call using async await .
async function performingTwoApiCalls (){\n const burgerData = await fetch('/get-api-call-for-burget-data');\n const pizzaData = await fetch('/get-api-call-for-pizza-data');\n\n /**\n * \n * some processing with the above data\n * \n */\n const combineBurgerAndPizzaData = [...burgerData, ...pizzaData];\n }If we look at the above example the second API call has to wait for the first API call to finish. A better way of doing this using Promises is
function performingTwoApiCalls (){\n const burgerPromise = Promise.resolve(fetch('/get-api-call-for-burget-data'));\n const pizzaPromise = Promise.resolve(fetch('/get-api-call-for-pizza-data'));\n\n Promise.all([ burgerPromise , pizzaPromise ])\n .then((val)=>{\n const burgerData = val[0];\n const pizzaData = val[1];\n\n const combineBurgerAndPizzaData = [...burgerData, ...pizzaData];\n })\n\n }In the above example, the two API calls are performed asynchronously using the Promise.all method and the resolved values are extracted for further processing.