Javascript Promises Basic Info

javascript-promises

// JavaScript - Promises - Basic Information:

var p = new Promise((resolve, reject) => {
  setTimeout(() => {
    if (true) {
      resolve('success data');
    } else {
      reject('An error has occurred.');
    }
  }, 2000);
});

p.then((data) => {
  console.log(data);
});

p.catch((error) => {
  console.error(error);
});

The process of setting a value to the promise is called "resolving the promise".  
If we can not assign a value to a promise (failure condition), we reject the 
promise with a reason.  Resolving or rejecting a promise is called fulfilling 
the promise.

The callback that is specified as the first parameter for the .then method is 
invoked when the promise is resolved.  The callback function specified as the 
first parameter of the .catch method is invoked when the promise is rejected.

The .then method can take two parameters, which are both functions / callbacks.  
The first parameter is the success callback, and the second parameter is the 
failure callback.  However, this can make our code harder to read.  Therefore, 
we should only specify one parameter, the success callback, and we should use 
the .catch method to specify the failure callback.  We can specify multiple 
success callbacks, and multiple failure callbacks.

When the promise is resolved, the success callbacks are invoked.  When the 
promise rejected, the failure callbacks are invoked.

If we specify multiple success callbacks, only the first callback receive the 
data that was passed to the resolve method. If the first success callback return 
a value or object, that value or object will be passed to the second success 
callback as a parameter.

We can use the .then method multiple times, and the callbacks are called in the 
order specified.  Each callback receive the result of the previous callback.  
In other words, callbackA is specified before callbackB, callbackB will not be 
invoked until callbackA has finished.

If we do not wish to use the .catch method, we can specify a "failure" callback 
as the second parameter of the then method.

p.then((data) => console.log('success: ', data), (error) => console.error(error));

The above code is a bit hard to read, so we should write it as:

p.then(
  (data) => {
    console.log('success: ', data);
  },
  (error) => {
    console.error(error);
  }
);

As a best practice, we should always use the the .catch method instead of 
specifying the "failure" callback as the second parameter to the .then method.

When we resolve a promise, we can specify the data, which is passed to the 
callback of the .then method.  In other words, if the promise should resolve to 
5, we would resolve the promise with:

resolve(5)

and 5 is the value that is passed as parameter to the first then callback.

var promise = asyncFunction();

promise.then(function(value) {
  // do something with the value
});

return promise;

Saving the promise inside a variable is not always required, and we can often 
omit it:

return asyncFunction().then(function(value) {
  // do something with the value here
});
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License