Return Result for Asynchronous Code

aura:method executes synchronously. Use the return statement to return a value from synchronous JavaScript code. JavaScript code that calls a server-side action is asynchronous. Asynchronous code can continue to execute after it returns. You can’t use the return statement to return the result of an asynchronous call because the aura:method returns before the asynchronous code completes. For asynchronous code, use a callback instead of a return statement.

Step 1: Define aura:method in Markup

Let’s look at an echo aura:method that uses a callback. We’ll use the c:auraMethodCallerWrapper.app and components outlined in Calling Component Methods. Here’s the echo aura:method in the c:auraMethod component.

<!-- c:auraMethod -->
<aura:component controller="SimpleServerSideController">
    <aura:method name="echo"
      description="Sample method with server-side call">
        <aura:attribute name="callback" type="Function" />
    </aura:method>
    
    <p>This component has an aura:method definition.</p>
</aura:component>

The echo aura:method has an aura:attribute with a name of callback. This attribute enables you to set a callback that’s invoked by the aura:method after execution of the server-side action in SimpleServerSideController.

Step 2: Implement aura:method Logic in Controller

The echo aura:method invokes echo() in auraMethodController.js. Let’s look at the source.

/* auraMethodController.js */
({
    echo : function(cmp, event) {
        var params = event.getParam('arguments');
        var callback;
        if (params) {
            callback = params.callback;
        }

        var action = cmp.get("c.serverEcho");
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                console.log("From server: " + response.getReturnValue());
                // return doesn't work for async server action call
                //return response.getReturnValue();
                // call the callback passed into aura:method
                if (callback) callback(response.getReturnValue());
            }
            else if (state === "INCOMPLETE") {
                // do something
            }
            else if (state === "ERROR") {
                var errors = response.getError();
                if (errors) {
                    if (errors[0] && errors[0].message) {
                        console.log("Error message: " +
                          errors[0].message);
                    }
                } else {
                    console.log("Unknown error");
                }
            }
        });
        $A.enqueueAction(action);
    },
})

echo() calls the serverEcho() server-side controller action, which we’ll create next.

You can’t return the result with a return statement. The aura:method returns before the asynchronous server-side action call completes. Instead, we invoke the callback passed into the aura:method and set the result as a parameter in the callback.

Note

Step 3: Create Apex Server-Side Controller

The echo aura:method calls a server-side controller action called serverEcho. Here’s the source for the server-side controller.

public with sharing class SimpleServerSideController {
    @AuraEnabled
    public static String serverEcho() {
        return ('Hello from the server');
    }
}

The serverEcho() method returns a String.

Step 4: Call aura:method from Parent Controller

Here’s the controller for c:auraMethodCaller. It calls the echo aura:method in its child component, c:auraMethod.

/* auraMethodCallerController.js */
({    
    callAuraMethodServerTrip : function(component, event, helper) {
        var childCmp = component.find("child");
        // call the aura:method in the child component
        childCmp.echo(function(result) {
            console.log("callback for aura:method was executed");
            console.log("result: " + result);
        });
    },
})

callAuraMethodServerTrip() finds the child component, c:auraMethod, and calls its echo aura:method. echo() passes a callback function into the aura:method.

The callback configured in auraMethodCallerController.js logs the result.

function(result) {
    console.log("callback for aura:method was executed");
    console.log("result: " + result);
}

Step 5: Add Button to Initiate Call to aura:method

The c:auraMethodCaller markup contains a lightning:button that invokes callAuraMethodServerTrip() in auraMethodCallerController.js. We use this button to initiate the call to the aura:method in the child component.

Here’s the markup for c:auraMethodCaller.

<!-- c:auraMethodCaller.cmp -->
<aura:component >
    <p>Parent component calls aura:method in child component</p>
    <c:auraMethod aura:id="child" />
    
    <lightning:button label="Call aura:method (server trip) in child component"
        onclick="{! c.callAuraMethodServerTrip}" />
</aura:component>