JavaScript: Promise
Falah Al Fitri
Posted on December 2, 2022
"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 */ }
)
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 )
}
)
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 )
}
)
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 )
}
)
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...
Posted on December 2, 2022
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
November 27, 2024
November 6, 2024