The aura method discussed in the preceding section has return statements and is synchronous. Most often, when you are working with server-side code to fetch values using @AuraEnabled methods, it's asynchronous. If you use return statements, you will notice that aura methods run before the server returns the value; so, it's important to pass the function and use callback (https://developer.mozilla.org/en-US/docs/Glossary/Callback_function).

Let's demonstrate how callback works, with the help of the following example code.

Let's create a child component (we will assume it's a component API, which can be reused across various components). The controller code to fetch the contacts is as follows:

public with sharing class ContactController {

 @AuraEnabled
 public static list<Contact> getServerContacts(){
  return [Select Id, Name, Email, Phone From Contact ORDER BY CREATEDDATE DESC limit 10];
 }
}

The child component markup that calls the Apex controller code is as follows:

<!-- GetContacts.cmp -->
<aura:component controller="ContactController">
 <aura:method name="getContacts"
description="Sample method with server-side call">
  <aura:attribute name="callback" type="Function" />
 </aura:method>
</aura:component> 

Notice that the name getContacts function in the JavaScript controller has the same name as the name used in the aura:method component markup. The controller code is shown as follows, invoking the Apex controller method, getServerContacts:

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

  var action = cmp.get("c.getServerContacts");
  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);
 },
})

The child component is almost an API for a parent component to use this. Let's assume that the parent component is a button and invokes the child component controller in an asynchronous way.

The parent component markup is as follows:

<aura:component>
 <aura:attribute type="Contact[]" name="contactList"/>
 <c:GetContacts aura:id="child" />
 <Lightning:layout multipleRows="true" horizontalAlign="center" verticalAlign="center">
   <Lightning:layoutItem flexibility="auto" padding="horizontal-small" size="8">
   <aura:iteration items="{!v.contactList}" var="contact">
    <Lightning:card title="{!contact.Name}">
     <p class="slds-p-horizontal_small">
      {!contact.Email}
     </p>
    </Lightning:card>
   </aura:iteration>
   </Lightning:layoutItem>
 </Lightning:layout>
 <Lightning:button label="Get Contacts From Server"
  onclick="{!c.fetchContacts}"/>
</aura:component> 

The controller code is as follows:

({
 fetchContacts : function(component, event, helper) {
  var childCmp = component.find("child");
  // call the aura:method in the child component
  childCmp.getContacts(function(result) {
   console.log("callback for aura:method was executed");
   console.log("result: " + result);
   component.set("v.contactList",result);
  });
 }
})

The final component is as follows, fetching the contact with the email from the server: