DEV Community

Falah Al Fitri
Falah Al Fitri

Posted on • Edited on

2 1

JavaScript: Promise

"I Promise a Result!"

"Producing code" is code that can take some time

"Consuming code" is code that must wait for the result

A Promise is a JavaScript object that links producing code and consuming code


Promise Syntax

// "Producing Code" (May take some time)
let myPromise = new Promise( function( resolve, reject ) {  

    resolve() // when successful

    reject()  // when error

} )

// "Consuming Code" (Must wait for a fulfilled Promise)
myPromise.then(

    function( success ) { /* code if successful */ },

    function( error ) { /* code if some error */ }

)
Enter fullscreen mode Exit fullscreen mode

Promise Object Properties

A JavaScript Promise object can be:

  • Pending
  • Fulfilled
  • Rejected

The Promise object supports two properties: state and result.

While a Promise object is "pending" (working), the result is undefined.

When a Promise object is "fulfilled", the result is a value.

When a Promise object is "rejected", the result is an error object.


Example promise

/*
    https://www.w3schools.com/js/js_promise.asp
 */

/* 
    "Producing Code" (May take some time) 
 */

let myPromise = new Promise( function ( resolve, reject ) {

    let x = 0   

    if ( x == 0 ) {

        /* when successful */
        resolve( 'OK' ) 

    } else {

        /* when error */
        reject( 'Error' )

    }

} )

/* --- */

/* 
    "Consuming Code" (Must wait for a fulfilled Promise) 
 */

myPromise.then(

    function ( success ) { 

        /* code if successful */ 
        console.log( success )

    },

    function ( error ) { 

        /* code if some error */ 
        console.error( error )

    }

)
Enter fullscreen mode Exit fullscreen mode

Example promise return

/*
    https://www.w3schools.com/js/js_promise.asp
 */

/* 
    "Producing Code" (May take some time) 
 */

function myPromise() {

    return new Promise( function ( resolve, reject ) {

        let x = 0   

        if ( x == 0 ) {

            /* when successful */
            resolve( 'OK' ) 

        } else {

            /* when error */
            reject( 'Error' )

        }

    } )

}

/* --- */

/* 
    "Consuming Code" (Must wait for a fulfilled Promise) 
 */

myPromise().then(

    function ( success ) { 

        /* code if successful */ 
        console.log( success )

    },

    function ( error ) { 

        /* code if some error */ 
        console.error( error )

    }

)
Enter fullscreen mode Exit fullscreen mode

Example promise return resolve

/*
    https://www.w3schools.com/js/js_promise.asp
 */

/* 
    "Producing Code" (May take some time) 
 */

function myPromise() {

    let result
    let x = 0   

    if ( x == 0 ) {

        /* when successful */
        result = 'OK'

    } else {

        /* when error */
        result = 'Error'

    }

    /* --- */

    return Promise.resolve( result )

}

/* --- */

/* 
    "Consuming Code" (Must wait for a fulfilled Promise) 
 */

myPromise().then(

    function ( success ) { 

        /* code if successful */ 
        console.log( success )

    },

    function ( error ) { 

        /* code if some error */ 
        console.error( error )

    }

)
Enter fullscreen mode Exit fullscreen mode

Waiting for a Timeout


Waiting for a file


Promise (developer.mozilla.org)

The Promise object represents the eventual completion (or failure) of an asynchronous operation and its resulting value...

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

Top comments (0)

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay