5

Bottom line I want multiple lightning components on a single page to load asynchronously, and it appears they are not, described in detail below

Ok so heres the situation, I have a page that has multiple lightning components, each of which makes a separate http callout to an api , each getting different data, displayed in graphs or tables for a dashboard look. The http callout class is reused by all of the lightning components.

I was testing the speed of the page load, and it seemed slow, and i noticed all of the lightning components were loading their data at once, which points to synchronous rather than asynchronous. Some queries the lightning controllers execute to the http callout a faster than others, so I would like the faster queries to render and not wait for the entire page to load

I also expected each lightning controller to make its own call , it appears in the network tab in chrome tools that all of the lightning components are lumped into one distinct call for 5 separate components, the response for all components are aggregated in the one network call response

/aura?r=37&ax_dv_httpcallout.getCalloutResponseContents=6&BaseListView.getRecordLayoutComponent=2

Here is an example of the lightning component, the only difference is the iteration code field values or display

<aura:component controller="ax_dv_httpcallout" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >

<aura:attribute name="response" type="Map"/>
<aura:attribute name="recordId" type="Id" />

<aura:handler name="init" value="{!this}" action="{!c.getResponse}"/>
            <aura:iteration items="{!v.response.data}" var="data">
                <tr scope="row"> 
                    <td>{!data.stage_desc}</td>       
                    <td>{!data.proposal_amount}</td>
                </tr>
            </aura:iteration>
</aura:component>

Heres an example of my lightning component js controllers, for my multiple components, theyre exactly the same except for a param passed for which method to use

Component js

({

    getResponse : function(component) {
        // call webservice class, using parameters to get results
        var action = component.get("c.getCalloutResponseContents");

        action.setParams({
            recordId: component.get("v.recordId")
          , methodURL: "url_part_for_method" //different for each component
        });

        action.setCallback(this, function(response) { 
              var state = response.getState();
           if (state === "SUCCESS") {
               var returnValue =response.getReturnValue();
                component.set("v.response", returnValue );
               console.log(returnValue);
           }

        });

        $A.enqueueAction(action);
    }
})

and my single http callout class is generic, if it needs to be posted let me know

am i running into some weirdness as far as the variable names? or that I'm using the same callout class? or that ive specified that the components are global?

any information or discussion is welcome

  • Can you edit your question to include the images text as text instead of as an image? It's pretty small, and hard to read. – battery.cord Aug 2 '17 at 14:36
  • @battery.cord done – Jay Rizzi Aug 2 '17 at 14:42
9

The calls themselves are asynchronous, but actions queued around the same time all go to the server at once, which are then processed in order, as outlined in posts like this one, and mentioned in Queueing of Server-Side Actions. You might want to set some of the actions as background actions to improve performance.

action.setBackground();

Foreground and Background Actions states the following note, though:

Don’t rely on each background action being sent in its own request as that behavior isn’t guaranteed and it can lead to performance issues. Remember that the motivation for background actions is to isolate long-running requests into a separate request to avoid slowing the response for foreground actions.

So, for the API calls you expect to take longer, move them to background actions to allow the smaller components to load faster.

  • wow awesome, how in the world would I have found this without you. Thanks – Jay Rizzi Aug 3 '17 at 14:15
  • @JayRizzi You're welcome! I actually just recently learned this myself. – sfdcfox Aug 3 '17 at 14:18
  • The link 'Queueing of Server-Side Actions' appears to be broken, can you please update this link? I would like to read it. – bpilling Apr 5 '18 at 1:22
  • @bpilling Thanks for letting me know that the link was broken. I've updated the link for you. – sfdcfox Apr 5 '18 at 3:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.