JavaScript Promises vs Callback Functions in Lightning Components

As we all know that all server calls from lightning components are asynchronous in nature. If we call 2 different apex methods from lightning components, then there is no surety that which will return response first. In order to provide sequencing between these 2 calls, we have to write second method call in callback function of first apex call as mentioned below:

findDataUsingNormalCall : function(component, event, helper) {
  var actionName1= component.get("c.findMyAccounts");
  var params1={"numberOfRecords":2};
  actionName1.setParams(params1);
  actionName1.setCallback(this, function(response) {
    var state = response.getState();
    if (state === "SUCCESS") {
        var apexResponse1=response.getReturnValue();
        component.set("v.ltngAccList",apexResponse1);
       //Now perform second Call
        var actionName2= component.get("c.findMyPendingTasks");
        var params2={"numberOfRecords":2};
        actionName2.setParams(params2);
        actionName2.setCallback(this, function(response) {
           state = response.getState();
           if (state === "SUCCESS") {
              var apexResponse2=response.getReturnValue();
              component.set("v.ltngTaskList",apexResponse2);
           }else if(state === "ERROR"){
              var errors2 = response.getError();
              console.error(errors2);
           }
        });
        $A.enqueueAction(actionName2);
     }else if(state === "ERROR"){
        var errors1 = response.getError();
        console.error(errors1);
     }
  });
  $A.enqueueAction(actionName1);

Now if you have to perform multiple server side apex calls from lightning components in sequential order, code becomes very difficult to understand and read and difficult to maintain this kind of code.

Javascript Promises

Promise pattern is very common in javascript to handle asynchronous operations.  Prior to promises events and callback functions were used but they had limited functionalities and created unmanageable code.

Promise can have 3 states:

• Pending
• Fulfilled
• Rejected

Use below syntax to create promise:

var promise1 = new Promise($A.getCallback(function(resolve, reject){
     //perform logic like server call
     if (/* success */) {  
        resolve("result");
     }else {
        reject("error");
     }
}));

• Constructor takes only one argument as a function. 
• Callback function takes two arguments, resolve and reject
• Perform operations inside the callback function and if everything went well then call resolve.
• If desired operations do not go well then call reject.

In order to consume promise, use .then or .catch methods as shown below:

promise1 . 
    .then($A.getCallback(function(result){
             //handle success
 }), 
 $A.getCallback(function(error){
            //handle error
        })
     ) 
    .catch($A.getCallback(function () { 
        console.log('Some error has occured'); 
    }));

Remember:

1. then() method automatically invoked when promise is either resolved (fulfilled) or reject.
2. then() method takes 2 functions as parameters:
• If promise is resolved and a result is received, First function is executed.
• If promise is rejected and an error is received, Second function is executed(optional).
3. catch() method is invoked when a promise is either rejected or some error has occurred in execution. catch take 1 function as parameter. If you are using the second parameters for then function then use catch for error handling.

Calling multiple asynchronous functions and Chaining them using Promises

You can use below pattern in order to perform different asynchronous operation in synchronous manner.

new Promise($A.getCallback(function(resolve, reject){}))
    .then(
        // resolve handler
        $A.getCallback(function(result) {
   //when first call is successfull, then create new 
   //instance of promise to make another call
          return new Promise($A.getCallback(function(resolve,reject){}));
        }),
 // reject handler
        $A.getCallback(function(error) {
            console.log("Promise was rejected: ", error);
    //you can create another promise for error handling
        })
    )
    .then(
        // resolve handler
        $A.getCallback(function() {
            //perform logic when second call is successfull
        })
    );

I have created a sample lightning component which explain the functionality of callback function and promise pattern. Below are details about this component functionality:

• Component contains 2 button which invoke 2 different apex methods by using callback pattern and promise pattern.
• When user clicks on "Fetch 2 records using callback pattern" button, system fires 2 server calls to get account and task records in asynchronous manner. So records will get displayed on UI based on response from server. There will be no sequencing of these 2 method invocation.
• When user clicks on "Fetch 3 records using promise pattern", system first fire an asynchronous call to get account records and once account data is recieved, then it will fire another asynchronous call to get task records. This functionality uses promise pattern to fire 2 asynchronous call in synchronous manner. 

Below is code snippet:

Best Practices:

• Always use catch or reject handler.
• Always use $A.getCallback() when using promise pattern in lightning components. Even if you do not use this, then sometimes it will work but it will be very difficult to debug if something went wrong. Sometimes if you don't use it, then results may get delayed on UI and can cause performance issues. 

Hope this will help!!