Promise

• In real-world applications we have to invoke/call one function with the result of another function, simplyone function is dependent on another function's result.
• But we don’t know when the 1st function will complete so that we can call the 2nd function also even we didn’t know if the 1st function got stuck with some errors.
• We can overcome this with the help ofnested callback withnested try/catch but it will lead tocallback hell.
• Problem 1 - Don’t know whether the function execution was completed or not
• Problem 2 - Don’t know whether the function executed without errors or not
• Problem 3 - Code will look very messy and unstructured
• On the other hand, Promise also will be doing the same thing but in a more structured way and making the code more readable and easily accessible.

Promise overview

• A promise is an object that contains a status (promiseStatus) and value (promiseValue).

Promise Status

• Promise has three status

• ✅ fulfilled: The promise has been resolved. Everything went fine, no errors occurred within the promise 🥳

• ❌ rejected: The promise has been rejected. Or something went wrong…

• ⏳ pending: The promise has neither been resolved nor rejected (yet), the promise is still pending.

Promise Value

• The value of a promise, the value of [[PromiseValue]], is the value that we pass to either the resolved or rejected method as their argument.

Example 1

functionuploadDocument(){returnnewPromise((resolve)=>{console.log("Document uploaded");resolve("document.docx");});}functionconvertToPDF(filename){returnnewPromise((resolve)=>{console.log(`Converted${filename} to PDF`);resolve("document.pdf");});}functionextractData(pdfFile){returnnewPromise((resolve)=>{console.log(`Extracted data from${pdfFile}`);resolve("Extracted content");});}uploadDocument().then((filename)=>{returnconvertToPDF(filename).then((pdfFile)=>{returnextractText(pdfFile).then((result)=>{console.log(result);});});}).catch((error)=>console.error("Error:",error));

• .then(): Gets called after a promise isresolved.
• .catch(): Gets called after a promise isrejected.
• We can still simplify this with the help ofAsync/Await.

Async/Await

• In the above example, we are using the Promise constructor to create a Promise but in ES7, Async/Await was introduced which will return the result in Promise format by default.
• Async/Await both are only applicable to functions and the await keyword is only to be used if the function is async.
• So we don’t need to writenew Promise(() => {}), Promise.resolve, or Promise.reject all the time.

Example 2

asyncfunctionprocessDocument(){try{constfilename=awaituploadDocument();constpdfFile=awaitconvertToPDF(filename);constresult=awaitextractData(pdfFile);console.log(result);}catch(error){console.error("Error:",error);}}processDocument();

Key Differences

• Promise Chaining:
  • The.then() structure results in nested calls, which can become difficult to manage in larger workflows.
• async / await:
  • Makes the code more linear and easier to read while maintaining the same functionality.

Other methods in Promise

Promise.all

• Waits forall promises in an array to resolve orany one of them to reject.
• Returns a single promise that resolves with an array of results when all input promises are resolved.
• If any promise rejects, the entirePromise.all rejects.

constpromise1=Promise.resolve(10);constpromise2=Promise.resolve(20);Promise.all([promise1,promise2]).then((results)=>console.log(results))// Output: [10, 20].catch((error)=>console.error(error));

Promise.allSettled

• Waits forall promises to either resolve or reject.
• Returns an array of results containing the status and value/reason of each promise.

constpromise1=Promise.resolve(10);constpromise2=Promise.reject("Error!");Promise.allSettled([promise1,promise2]).then((results)=>console.log(results));/* Output:[  { status: 'fulfilled', value: 10 },  { status: 'rejected', reason: 'Error!' }]*/

Promise.race

• Resolves or rejects as soon as thefirst promise in the array settles (resolves or rejects).
• The returned promise adopts the state (fulfilled or rejected) of the first promise to settle.

constpromise1=newPromise((resolve)=>setTimeout(resolve,100,"First"));constpromise2=newPromise((resolve)=>setTimeout(resolve,50,"Second"));Promise.race([promise1,promise2]).then((result)=>console.log(result))// Output: Second.catch((error)=>console.error(error));

Promise.any

• Resolves as soon as thefirst promise resolves.
• If all promises reject, it rejects with anAggregateError containing all rejection reasons.

constpromise1=Promise.reject("Error 1");constpromise2=Promise.resolve("Success!");constpromise3=Promise.reject("Error 2");Promise.any([promise1,promise2,promise3]).then((result)=>console.log(result))// Output: Success!.catch((error)=>console.error(error));// Only if all promises reject

Promise.resolve

• Returns a promise that resolves with the given value.
• If the value is a promise, it returns that promise.

Promise.resolve("Hello").then((result)=>console.log(result));// Output: Hello

Promise.reject

• Returns a promise that is immediately rejected with the specified reason.

Promise.reject("Error occurred").catch((error)=>console.error(error));// Output: Error occurred

Note

Promise Chaining isn't a built-in type but involves chaining.then() calls for sequential asynchronous operations.

Promise.resolve(10).then((result)=>result*2).then((result)=>result+5).then((result)=>console.log(result));// Output: 25