Using JavaScript Promises in Lightning Components

SK_PromisePatternDemo.cmp

<aura:component controller="SK_PromisePatternDemoController">
    <aura:attribute name="ltngAccList" type="List"/>
    <aura:attribute name="ltngTaskList" type="List"/>
    <aura:attribute name="ltngClickedAction" type="String" default=""/>
    <aura:attribute name="ltngAccInfoString" type="String" default=""/>
    <aura:attribute name="ltngTaskInfoString" type="String" default=""/>
    
    <lightning:button label="Fetch 2 records using callback pattern" onclick="{!c.findDataUsingNormalCall}"/>
    <lightning:button label="Fetch 3 records using promise pattern" onclick="{!c.findDataUsingPromise}"/>
    <br/>
    
    <aura:if isTrue="{!v.ltngClickedAction=='NormalCall'}">
        {!v.ltngAccInfoString}
        <aura:if isTrue="{!!empty(v.ltngAccList)}">
            <div style="background-color:#E6E6FA;border-style: solid;margin:5px;">
                <table class="slds-table slds-table_fixed-layout slds-table_bordered slds-table_cell-buffer">  
                    <thead> 
                        <tr class="slds-text-title--caps"> 
                            <th scope="col">Name</th> 
                            <th scope="col">Type</th> 
                            <th scope="col">Industry</th>
                        </tr> 
                    </thead> 
                    <tbody> 
                        <aura:iteration items="{!v.ltngAccList}" var="item"> 
                            <tr class="slds-hint-parent"> 
                                <td scope="row"> {!item.Name}</td> 
                                <td > {!item.Type}</td> 
                                <td > {!item.Industry}</td>
                            </tr> 
                        </aura:iteration> 
                    </tbody> 
                </table>
            </div>
        </aura:if>
        <br/>
        {!v.ltngTaskInfoString}
        <aura:if isTrue="{!!empty(v.ltngTaskList)}">
            <div style="background-color:#E6E6FA;border-style: solid;margin:5px;">
                <table class="slds-table slds-table_fixed-layout slds-table_bordered slds-table_cell-buffer">  
                    <thead> 
                        <tr class="slds-text-title--caps"> 
                            <th scope="col">Subject</th> 
                            <th scope="col">Status</th> 
                            <th scope="col">Description</th>
                        </tr> 
                    </thead> 
                    <tbody> 
                        <aura:iteration items="{!v.ltngTaskList}" var="item"> 
                            <tr class="slds-hint-parent"> 
                                <td scope="row"> {!item.Subject}</td> 
                                <td > {!item.Status}</td> 
                                <td > {!item.Description}</td>
                            </tr> 
                        </aura:iteration> 
                    </tbody> 
                </table>
            </div>
        </aura:if>
        
    </aura:if>
    
    
    <br/>
    <aura:if isTrue="{!v.ltngClickedAction=='PromiseCall'}">
        {!v.ltngAccInfoString}
    	<aura:if isTrue="{!!empty(v.ltngAccList)}">
            <div style="background-color:#E6E6FA;border-style: solid;margin:5px;">
                <table class="slds-table slds-table_fixed-layout slds-table_bordered slds-table_cell-buffer">  
                    <thead> 
                        <tr class="slds-text-title--caps"> 
                            <th scope="col">Name</th> 
                            <th scope="col">Type</th> 
                            <th scope="col">Industry</th>
                        </tr> 
                    </thead> 
                    <tbody> 
                        <aura:iteration items="{!v.ltngAccList}" var="item"> 
                            <tr class="slds-hint-parent"> 
                                <td scope="row"> {!item.Name}</td> 
                                <td > {!item.Type}</td> 
                                <td > {!item.Industry}</td>
                            </tr> 
                        </aura:iteration> 
                    </tbody> 
                </table>
            </div>
        </aura:if>
        <br/>
        {!v.ltngTaskInfoString}
        <aura:if isTrue="{!!empty(v.ltngTaskList)}">
            <div style="background-color:#E6E6FA;border-style: solid;margin:5px;">
                <table class="slds-table slds-table_fixed-layout slds-table_bordered slds-table_cell-buffer">  
                    <thead> 
                        <tr class="slds-text-title--caps"> 
                            <th scope="col">Subject</th> 
                            <th scope="col">Status</th> 
                            <th scope="col">Description</th>
                        </tr> 
                    </thead> 
                    <tbody> 
                        <aura:iteration items="{!v.ltngTaskList}" var="item"> 
                            <tr class="slds-hint-parent"> 
                                <td scope="row"> {!item.Subject}</td> 
                                <td > {!item.Status}</td> 
                                <td > {!item.Description}</td>
                            </tr> 
                        </aura:iteration> 
                    </tbody> 
                </table>
            </div>
        </aura:if>
    </aura:if>
    
    
</aura:component>

SK_PromisePatternDemoApp.app

<aura:application extends="force:slds">
    <c:SK_PromisePatternDemo/>
</aura:application>

SK_PromisePatternDemoController.cls

public class SK_PromisePatternDemoController {
	@AuraEnabled
    public static List<Account> findMyAccounts(integer numberOfRecords){
        return [select id,Name,Type,Industry from Account where createdById=:UserInfo.getUserId() order by LastModifieddate DESC Limit :numberOfRecords];
    } 
    @AuraEnabled
    public static List<Task> findMyPendingTasks(integer numberOfRecords){
        return [select id,Description,Status,Subject from Task where OwnerId=:UserInfo.getUserId() order by LastModifieddate DESC Limit :numberOfRecords ];
    }
}

SK_PromisePatternDemoController.js

({
    findDataUsingNormalCall : function(component, event, helper) {
        component.set("v.ltngClickedAction","NormalCall");
        component.set("v.ltngAccInfoString","");
        component.set("v.ltngTaskInfoString","");
        var accList=component.set("v.ltngAccList",[]);
        var accList=component.set("v.ltngTaskList",[]);
        //find account list
        component.set("v.ltngAccInfoString","Waiting for apex response from Server to get account records");
        var actionName= component.get("c.findMyAccounts");
        var params={"numberOfRecords":2};
        actionName.setParams(params);
        actionName.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                var apexResponse=response.getReturnValue();
                //set response to attribute value
                console.log('***'+JSON.stringify(apexResponse));
                component.set("v.ltngAccInfoString","Response recieved from Server for Account records.");
                component.set("v.ltngAccList",apexResponse);
            }else if(state === "ERROR"){
                var errors = response.getError();
                console.error(errors);
                alert('Problem with connection. Contact your system administrator.');
            }
        });
        $A.enqueueAction(actionName);
        
        
        //find task list
        component.set("v.ltngTaskInfoString","Waiting for apex response from Server to get task records");
        var actionName= component.get("c.findMyPendingTasks");
        var params={"numberOfRecords":2};
        actionName.setParams(params);
        actionName.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                var apexResponse=response.getReturnValue();
                //set response to attribute value
                console.log('***'+JSON.stringify(apexResponse));
                component.set("v.ltngTaskInfoString","Response recieved from Server for Task records.");
                component.set("v.ltngTaskList",apexResponse);
            }else if(state === "ERROR"){
                var errors = response.getError();
                console.error(errors);
                alert('Problem with connection. Contact your system administrator.');
            }
        });
        $A.enqueueAction(actionName);
    },
    findDataUsingPromise : function (component,event,helper){
        console.log('****inside findDataUsingPromise');
        component.set("v.ltngAccInfoString","");
        component.set("v.ltngTaskInfoString","");
        component.set("v.ltngClickedAction","PromiseCall");
        var accList=component.set("v.ltngAccList",[]);
        var accList=component.set("v.ltngTaskList",[]);
        
        component.set("v.ltngAccInfoString","Waiting for response from Server to get Account Records.");
        var params={"numberOfRecords":3};
        var accountDataPromise = helper.ServerCallUsingPromise(component,'c.findMyAccounts',params);
        accountDataPromise
        .then(
            $A.getCallback(function(result){
                 // Set Account Attribute
                console.log('***inside success for first promise call');
                console.log('***'+JSON.stringify(result));
                component.set("v.ltngAccInfoString","Response recieved from Server for Account Records.");
                component.set("v.ltngAccList", result);
                console.log('***calling pending task using second promise');
                var params={"numberOfRecords":3};
                component.set("v.ltngTaskInfoString","Waiting for response from Server to get Task Records.");
                return helper.ServerCallUsingPromise(component,'c.findMyPendingTasks',params);
            }),
            $A.getCallback(function(error){
                alert('An error occurred getting the account : ' + error.message);
            })
        )
        .then(
            $A.getCallback(function(result){
                console.log('***inside success for second promise call');
                console.log('***'+JSON.stringify(result));
                component.set("v.ltngTaskInfoString","Response recieved from Server for task records.");
                component.set("v.ltngTaskList", result); // Set task Attribute
            }),
            $A.getCallback(function(error){
                // Something went wrong
                alert('An error occurred while getting the task : ' + error.message);
            })
        );
    } 
    
})

SK_PromisePatternDemoHelper.js

({
    callToServer : function(component, method, callback, params) {
        var action = component.get(method);
        if(params){
            action.setParams(params);
        }
        console.log('****param to controller:'+JSON.stringify(params));
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                callback.call(this,response.getReturnValue());
            }else if(state === "ERROR"){
                var errors = response.getError();
                console.error(errors);
                alert('Problem with connection.'+errors);
            }
        });
        $A.enqueueAction(action);
    },
    ServerCallUsingPromise : function( component,method, params ) {
        var promiseInstance = new Promise( $A.getCallback( function( resolve , reject ) { 
            var action = component.get(method);
            if(params){
                action.setParams(params);
            }
            console.log('****param to controller:'+JSON.stringify(params));
            action.setCallback(this, function(response) {
                var state = response.getState();
                if (state === "SUCCESS") {
                    resolve(response.getReturnValue());
                }else if(state === "ERROR"){
                    var errors = response.getError();
                    console.error(errors);
                    reject(response.getError() );
                }
            });
            $A.enqueueAction(action);
        }));            
        return promiseInstance;
    }
})