Component attribute set by one method coming as null in second method

Question

I am calling two functions in my lightning bundle init in the following order

helper.fetchAccountRequestAddressDetailsHelper(component, event, helper);
console.log('before fetch'+component.get("v.accountRequestSubmitted"));

Code for the helper methods

fetchAccountRequestAddressDetailsHelper : function(component, event, helper) {

    var action = component.get("c.getAccountRequestAddressDetails");
    action.setParams({
        accountRequestId : component.get("v.recordId")
    });
    action.setCallback(this, function(response){
        var state = response.getState();
        if (state === "SUCCESS") {
            component.set("v.c", response.getReturnValue());                
        }
    });
    $A.enqueueAction(action);
},

    fetchAccountRequestAddressDetailsFromAPIsHelper : function(component, event, helper) {

    var action = component.get("c.getAccountRequestAddressDetailsfromAPI");
    console.log('^^^^^12'+component.get("v.accountRequestSubmitted"));
    action.setParams({
        accountRequest : component.get("v.accountRequestSubmitted")
    });
    action.setCallback(this, function(response){
        var state = response.getState();
        if (state === "SUCCESS") {
            var accountRequest = response.getReturnValue(); 
            console.log('&&&&&&'+response.getReturnValue());
            component.set("v.accountRequestVerified", response.getReturnValue());                
        }
    });
    $A.enqueueAction(action);
},

Here what is happening is that accountRequestSubmitted an attribute of the component is set in the first method. However, when I try to access it in my second method console.log('^^^^^12'+component.get("v.accountRequestSubmitted")); it is coming up as null. Am I making a mistake in here?

Answer 1

server-calls in lightning are performing asynchronouly.

$A.enqueueAction(action) adds the server-side controller action to the queue of actions to be executed. All actions that are enqueued will run at the end of the event loop. Rather than sending a separate request for each individual action, the framework processes the event chain and batches the actions in the queue into one request. The actions are asynchronous and have callbacks.

so if you want to do something after receive value it should be:

fetchAccountRequestAddressDetailsHelper : function(component, event, helper) {
    var cntrl = this;
    var action = component.get("c.getAccountRequestAddressDetails");
    action.setParams({
        accountRequestId : component.get("v.recordId")
    });
    action.setCallback(this, function(response){
        var state = response.getState();
        if (state === "SUCCESS") {
            component.set("v.c", response.getReturnValue());
            cntrl.fetchAccountRequestAddressDetailsFromAPIsHelper(component, event, helper);            
        }
    });
    $A.enqueueAction(action);
}

That means, that your callback function will execute later, when component will receive response from server controller.

by the way it is preferred to move logic to helper