Skip to content

Instantly share code, notes, and snippets.

@Sunil02kumar
Created April 27, 2020 12:45
Show Gist options
  • Save Sunil02kumar/53aed3710d13c01c7af0fb616ff2f6b1 to your computer and use it in GitHub Desktop.
Save Sunil02kumar/53aed3710d13c01c7af0fb616ff2f6b1 to your computer and use it in GitHub Desktop.
Javascript Promise.all : Way to perform action when Multiple Parallel enqueued Actions are Completed
<aura:component controller="SK_PromiseAllDemoController">
<aura:attribute name="ltngAccList" type="List"/>
<aura:attribute name="ltngTaskList" type="List"/>
<aura:attribute name="ltngOperationInfoString" type="String" default=""/>
<div style="text-align: center;background-color:#E6E6FA;border-style: solid;margin:10px;">
<lightning:button label="Fetch Accounts/Task records parallelly" onclick="{!c.findDataUsingPromise}"/>
</div>
<aura:if isTrue="{!v.ltngOperationInfoString=='DONE'}">
<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/>
<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:if isTrue="{!v.ltngOperationInfoString=='WAITING'}">
<div style="background-color:#E6E6FA;border-style: solid;margin:5px;">
<b>Waiting for response for both server calls to get Account Information and Task Information</b>
</div>
</aura:if>
</aura:component>
<aura:application extends="force:slds">
<c:SK_PromiseAllDemo/>
</aura:application>
public class SK_PromiseAllDemoController {
@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 ];
}
}
({
findDataUsingPromise : function (component,event,helper){
console.log('****inside findDataUsingPromise');
component.set("v.ltngOperationInfoString","WAITING");
var accList=component.set("v.ltngAccList",[]);
var accList=component.set("v.ltngTaskList",[]);
var params={"numberOfRecords":3};
var promise1 = helper.ServerCallUsingPromise(component,'c.findMyAccounts',params);
var promise2 = helper.ServerCallUsingPromise(component,'c.findMyPendingTasks',params);
//create array of promise
var promiseArray =[promise1, promise2];
var combinedPromise = Promise.all(promiseArray);
combinedPromise
.then($A.getCallback(function(results){
//handle success
var accResults = results[0]; //Results from Promise 1
var taskResults = results[1]; //Results from Promise 2
component.set("v.ltngAccList", accResults);
component.set("v.ltngTaskList", taskResults);
component.set("v.ltngOperationInfoString","DONE");
}))
.catch($A.getCallback(function () {
console.log('Some error has occured');
}));
}
})
({
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;
}
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment