JavaScript Promise

Profile picture for user arilio666

Javascript promise object contains both the earner code and calls to the eater code. Earner code is the code that can take some time.

Eater code is code that must wait for the result. A promise is an object that links both categories. Promises are advancements of callbacks in nodes. It is used to handle all asynchronous data operations.

Syntax:

let myPromise = new Promise(function(myResolve, myReject) {
// "Earner Code" (Takes Time)

  myResolve(); // when successful
  myReject();  // when error
});

// "Eater Code" (Must wait for a Promise)
myPromise.then(
  function(value) {if successful},
  function(error) {if some error}
);

Promise Properties:

There can be three states in the promise object: pending, fulfilled, and rejected.

  • When pending, the result is undefined.
  • When fulfilled, the result is a value.
  • When rejected, the result is an error object.

Example:

Let us see promise in action.

const promise = new Promise((good, bad) => {
    good('Eureka')
    //bad('Damn it failed!!')
})
.then(value => {
    console.log(value)
})
.catch(error => {
    console.log(error)
})
Eureka
  • Promise takes two arguments as a callback for success and failure.
  • In this case, good and bad.
  • In the then chain, when the condition is good, it goes to the "then" block and executes its body.
const promise = new Promise((good, bad) => {
    //good('Eureka')
    bad('Damn it failed!!')
})
.then(value => {
    console.log(value)
})
.catch(error => {
    console.log(error)
})
Damn it failed!!

Now for the case when it appears bad, it goes to the catch block and executes the failure.

Let us see with many numbers of 'then.'

const promise = new Promise((good, bad) => {
    good('Eureka')
    //bad('Damn it failed!!')
})
.then(value => {
    console.log(value)
    return 1;
})
.then(value => {
    console.log(value)
    return 2;
})
.then(value => {
    console.log(value)
    return 3;
})
.then(value => {
    console.log(value)
    return 4;
})
.catch(error => {
    console.log(error)
})
Eureka
1
2
3
  • The condition is good, which means it is fulfilled, so it returns the specified value and passes on till the fulfillment.

  

const promise = new Promise((good, bad) => {
    //good('Eureka')
    bad('Damn it failed!!')
})
.then(value => {
    console.log(value)
    return 1;
})
.then(value => {
    console.log(value)
    return 2;
})
.then(value => {
    console.log(value)
    return 3;
})
.then(value => {
    console.log(value)
    return 4;
})
.catch(error => {
    console.log(error)
})
Damn it failed!!
  • Notice when it was rejected and went directly to the catch block. Well, that's how a promise works.
  • Promise, as the name implies, will give its word meaning that a value will be returned at a later time.
  • We can consider it a proxy for a value that might not be returned.

Promises Chained:

  • The examples we saw are chained promises to 'then.'
  • This is done when there is a sequence of asynchronous tasks, one after the another which is needed to be performed.
  • Using the "then" handlers, we can chain like in the above example.
  • When the initial promise object resolves, the 'then' handler will pass on the value to the subsequent handlers.

Conclusion:

  • If you have worked with callbacks, this must look like a life savior with a clearer view of the semantics of promise.
  • As a node/javascript developer, promises will be dealt with almost everywhere. It is an asynchronous world.