JavaScript Promise

"I Promise a Result!"

"Producing code" is the code that requires some time

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

Promise is a JavaScript object that links generating code and consumption code

JavaScript Promise Object

JavaScript Promise objects contain production code and calls to consumption code:

Promise Syntax

let myPromise = new Promise(function(myResolve, myReject) {
// "Producing Code" (may take some time)
  myResolve(); // When success occurs
  myReject();  // When an error occurs
});
// "Consuming Code" (must wait for a fulfilled promise)
myPromise.then(
  function(value) { /* Code to handle success */ },
  function(error) { /* Code to handle error */ }
);

When executing code to obtain a result, it should call one of two callbacks:

Result Call
Success myResolve(result value)
Error Occurred myReject(error object)

Promise Object Properties

JavaScript Promise objects can be:

  • Pending
  • Fulfilled
  • Rejected

Promise objects support two properties:state and result.

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

myPromise.state myPromise.result
"Pending" undefined
"Fulfilled" Result Value
"Rejected" Error Object

You cannot access the Promise properties state and result.

You must use the Promise method to handle Promise.

How to Use Promise

The following is the method of using Promise:

myPromise.then(
  function(value) { /* code if successful */ },
  function(error) { /* code if some error */ }
);

Promise.then() has two parameters, one for the callback on success, and another for the callback on failure.

Both are optional, so you can add callbacks for success or failure.

Example

function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}
let myPromise = new Promise(function(myResolve, myReject) {
  let x = 0;
// Generating code (this may take some time)
  if (x == 0) {
    myResolve("OK");
  } else {
    myReject("Error");
  }
});
myPromise.then(
  function(value) {myDisplayer(value);},
  function(error) {myDisplayer(error);}
);

Try It Yourself

JavaScript Promise Example

To demonstrate the use of Promise, we will use the callback example from the previous chapter:

  • Waiting for timeout
  • Waiting for the file

Waiting for timeout

An example of using callback

setTimeout(function() { myFunction("I love You !!!"); }, 3000);
function myFunction(value) {
  document.getElementById("demo").innerHTML = value;
}

Try It Yourself

An example of using Promise

let myPromise = new Promise(function(myResolve, myReject) {
  setTimeout(function() { myResolve("I love You !!"); }, 3000);
});
myPromise.then(function(value) {
  document.getElementById("demo").innerHTML = value;
});

Try It Yourself

Waiting for the file

An example of using callback

function getFile(myCallback) {
  let req = new XMLHttpRequest();
  req.open('GET', "mycar.html");
  req.onload = function() {
    if (req.status == 200) {}}
      myCallback(req.responseText);
    } else {
      myCallback("Error: " + req.status);
    }
  }
  req.send();
}
getFile(myDisplayer);

Try It Yourself

An example of using Promise

let myPromise = new Promise(function(myResolve, myReject) {
  let req = new XMLHttpRequest();
  req.open('GET', "mycar.htm");
  req.onload = function() {
    if (req.status == 200) {}}
      myResolve(req.response);
    } else {
      myReject("File not Found");
    }
  };
  req.send();
});
myPromise.then(
  function(value) {myDisplayer(value);},
  function(error) {myDisplayer(error);}
);

Try It Yourself

Browser Support

ECMAScript 2015, also known as ES6, introduced JavaScript Promise objects.

The following table lists the first browser versions to fully support Promise objects:

Chrome IE Firefox Safari Opera
Chrome 33 Edge 12 Firefox 29 Safari 7.1 Opera 20
February 2014 July 2015 April 2014 September 2014 March 2014