DEV Community

Falah Al Fitri
Falah Al Fitri

Posted on • Edited on

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...

Top comments (0)