JavaScript: Promise
Tags: javascript, promise
Published: 2022-12-02 01:31:35

_"I Promise a Result!"_

_"Producing code"_ is <u>code that can take some time</u>

_"Consuming code"_ is <u>code that must wait for the result</u>

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

---

## Promise Syntax

```javascript
// "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

```javascript
/*
	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 )
		
	}
	
)
```

{% embed https://replit.com/@antelove19/NodeJS-promise#index.js %}

---

## Example promise return

```javascript
/*
	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 )
		
	}
	
)
```

{% embed https://replit.com/@antelove19/NodeJS-promise-10-return#index.js %}

---

## Example promise return resolve

```javascript
/*
	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 )
		
	}
	
)
```

{% embed https://replit.com/@antelove19/NodeJS-promise-11-return-resolve#index.js %}

---

## Waiting for a Timeout

{% embed https://replit.com/@antelove19/NodeJS-promise-20-settimeout %}

---

## Waiting for a file

{% embed https://replit.com/@antelove19/NodeJS-XMLHttpRequest-Promise#index.js %}

---

# Promise (developer.mozilla.org)

[The Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) object represents the eventual completion (or failure) of an asynchronous operation and its resulting value...