Promise JavaScript

Promise JavaScript

Introduction to promises

A promise is an object that may produce a single value some time in the future: either a resolved value or a reason that it’s not decided (e.g., a network error occurred). A promise may be in one of 3 possible states: fulfilled, rejected, or pending. Promise users can attach callbacks to handle the fulfilled value or the reason for rejection.

The need for promises

Callbacks are not trustworthy. Suppose we have a set timeout event and in that event, we are making an API call. The timeout is 5000msec. Due to JavaScript's inherent nature, it will execute the statements below it and will not wait for the timeout. But suppose the statements written below are such that they take more than 5000msec to get executed. Then even though the timer has expired still JavaScript engine would be able to execute the statements written inside the set timeout even after the timer has expired. The solution to this is to promise

Why the name promise

It is like a pinky promise that one makes assuring that no matter what happens task will be executed.

Promise and states

When we are writing a promise we say that the promise has been executed if the return value is either fulfilled or rejected. When we create a promise the state assigned to it is the pending state.

How does it overcome callback

According to the promise even if the task is not fulfilled still, we say that the promise has been executed

Detail about promises

What things to include while creating a promise

  • Create a promise
  • Return the state of the promise
  • Writing callback function when the return value from the promise is fulfilled and also writing a callback function when the return value is rejected
  • calling those callback functions on the specific state of the promise

How to create a promise

syntax:
const my_promise = new Promise((resolve, reject) => { setTimeout(() => { resolve("foo"); }, 300); });

we use the promise constructor to create a promise inside the promise constructor, we pass an arrow function which takes in two functions resolve and reject when we call the resolve function the status of the promise changes from pending to fulfilled and hence promise executed when we call the reject function the status of the promise changes from pending to rejected and hence the promise is executed

Changing the state of promise

for changing the state we can call resolve() .When we do this the state of the promise changes from pending to fulfilled Along similar lines when we call reject().When we do this the state of the promise changes from pending to not fulfilled.

Calling the callback

we use promise.then() and pass the function to be called as a parameter (return value of promise is fulfilled) note: when the state of the promise changes from pending to fulfilled the function passed as a parameter inside then is executed automatically

we use promise.catch() and pass the function to be called as a parameter ( return value of promise is not fulfilled)

note: when the state of the promise changes from pending to not fulfilled the function passed as a parameter inside catch is executed automatically

promise.finally() es6 in newer version

The finally() method is always executed whether the promise is fulfilled or rejected (not fulfilled). In other words, the finally() method is executed when the promise is settled.