Created
April 27, 2020 12:45
-
-
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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<aura:application extends="force:slds"> | |
<c:SK_PromiseAllDemo/> | |
</aura:application> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 ]; | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
({ | |
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'); | |
})); | |
} | |
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
({ | |
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