DEV Community

Falah Al Fitri
Falah Al Fitri

Posted on • Edited on

JavaScript: Promise

#beginners #programming

"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)