JavaScript - Promises - What is a promise?

javascript-promises

// JavaScript - Promises - What is a promise?

While synchronous code is easier to follow and debug, async is generally better 
for performance and flexibility. Why "hold up the show" when you can trigger 
numerous requests at once and then handle them when each is ready?  Promises are 
becoming a big part of the JavaScript world, with many new APIs being 
implemented with the promise philosophy.

A Promise object represents a value that may not be available yet, but will be 
available at some point in the future. It allows us to write asynchronous code 
in a more synchronous fashion. For example, if we use the promise API to make 
an asynchronous call to a remote web service we will create a Promise object 
which represents the data that will be returned by the web service in future.  The 
caveat being that the actual data is not available yet.  It will become available when 
the request completes and a response comes back from the web service.  In the 
meantime, the Promise object acts like a proxy for the actual data.  We can attach 
callbacks to the Promise object which will be called once the actual data is available.

Promises give us a way to handle asynchronous processing in a more synchronous 
fashion.  They represent a value that we can handle at some point in the future.  
Promises give us guarantees about that future value, specifically:

1. No other registered handlers of that value can change it (the Promise is 
   immutable).
2. We are guaranteed to receive the value, regardless of when we register a handler 
  for it, even if it is already resolved, unless it is rejected, and in which case, if we 
  registered a failure callback, our failure callback is invoked.

function fetchRandomQuote() {
  var promise = new Promise(function(resolve, reject) {
    var request = new XMLHttpRequest();
    request.open('GET', 'http://api.icndb.com/jokes/random');
    request.onload = function() {
      if (request.status == 200) {
        resolve(request.response); // we got data here, so resolve the Promise
      } else {
        reject(Error(request.statusText)); // status is not 200 OK, so reject
      }
    };

    request.onerror = function() {
      reject(Error('Error fetching data.')); // error occurred, reject the  Promise
    };

    request.send(); //send the request
  });
  return promise;
}

var promise = fetchRandomQuote();
promise
  .then(function(data) {
    console.log('Quote: ' + data);
  })
  .catch(function(error) {
    console.log(error.getMessage());
  });

We start by instantiating a new Promise object and passing it a callback 
function. The callback takes two arguments, resolve and reject, which are 
both functions. All your asynchronous code goes inside that callback. If 
everything is successful, the promise is fulfilled by calling resolve(). In 
case of an error, reject() is called with an Error object.

In the above code, when a JSON response is received from the remote server, it 
is passed to the resolve() method. In case of any error, reject() is called with 
an Error object.
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License