Saturday, April 11, 2020

JavaScript Promises vs Callback Functions in Lightning Components

As we all know that all server calls from lightning components are asynchronous in nature. If we call 2 different apex methods from lightning components, then there is no surety that which will return response first. In order to provide sequencing between these 2 calls, we have to write second method call in callback function of first apex call as mentioned below:

findDataUsingNormalCall : function(component, event, helper) {
  var actionName1= component.get("c.findMyAccounts");
  var params1={"numberOfRecords":2};
  actionName1.setParams(params1);
  actionName1.setCallback(this, function(response) {
    var state = response.getState();
    if (state === "SUCCESS") {
        var apexResponse1=response.getReturnValue();
        component.set("v.ltngAccList",apexResponse1);
       //Now perform second Call
        var actionName2= component.get("c.findMyPendingTasks");
        var params2={"numberOfRecords":2};
        actionName2.setParams(params2);
        actionName2.setCallback(this, function(response) {
           state = response.getState();
           if (state === "SUCCESS") {
              var apexResponse2=response.getReturnValue();
              component.set("v.ltngTaskList",apexResponse2);
           }else if(state === "ERROR"){
              var errors2 = response.getError();
              console.error(errors2);
           }
        });
        $A.enqueueAction(actionName2);
     }else if(state === "ERROR"){
        var errors1 = response.getError();
        console.error(errors1);
     }
  });
  $A.enqueueAction(actionName1);

Now if you have to perform multiple server side apex calls from lightning components in sequential order, code becomes very difficult to understand and read and difficult to maintain this kind of code.

Javascript Promises

Promise pattern is very common in javascript to handle asynchronous operations.  Prior to promises events and callback functions were used but they had limited functionalities and created unmanageable code.

Promise can have 3 states:
  • Pending
  • Fulfilled
  • Rejected
Use below syntax to create promise:

var promise1 = new Promise($A.getCallback(function(resolve, reject){
     //perform logic like server call
     if (/* success */) {  
        resolve("result");
     }else {
        reject("error");
     }
}));
  • Constructor takes only one argument as a function. 
  • Callback function takes two arguments, resolve and reject
  • Perform operations inside the callback function and if everything went well then call resolve.
  • If desired operations do not go well then call reject.
In order to consume promise, use .then or .catch methods as shown below:

promise1 . 
    .then($A.getCallback(function(result){
             //handle success
 }), 
 $A.getCallback(function(error){
            //handle error
        })
     ) 
    .catch($A.getCallback(function () { 
        console.log('Some error has occured'); 
    }));

Remember:
  1. then() method automatically invoked when promise is either resolved (fulfilled) or reject.
  2. then() method takes 2 functions as parameters:
    • If promise is resolved and a result is received, First function is executed.
    • If promise is rejected and an error is received, Second function is executed(optional).
  3. catch() method is invoked when a promise is either rejected or some error has occurred in execution. catch take 1 function as parameter. If you are using the second parameters for then function then use catch for error handling.
Calling multiple asynchronous functions and Chaining them using Promises

You can use below pattern in order to perform different asynchronous operation in synchronous manner.

new Promise($A.getCallback(function(resolve, reject){}))
    .then(
        // resolve handler
        $A.getCallback(function(result) {
   //when first call is successfull, then create new 
   //instance of promise to make another call
          return new Promise($A.getCallback(function(resolve,reject){}));
        }),
 // reject handler
        $A.getCallback(function(error) {
            console.log("Promise was rejected: ", error);
    //you can create another promise for error handling
        })
    )
    .then(
        // resolve handler
        $A.getCallback(function() {
            //perform logic when second call is successfull
        })
    );
I have created a sample lightning component which explain the functionality of callback function and promise pattern. Below are details about this component functionality:
  • Component contains 2 button which invoke 2 different apex methods by using callback pattern and promise pattern.
  • When user clicks on "Fetch 2 records using callback pattern" button, system fires 2 server calls to get account and task records in asynchronous manner. So records will get displayed on UI based on response from server. There will be no sequencing of these 2 method invocation.
  • When user clicks on "Fetch 3 records using promise pattern", system first fire an asynchronous call to get account records and once account data is recieved, then it will fire another asynchronous call to get task records. This functionality uses promise pattern to fire 2 asynchronous call in synchronous manner. 


Below is code snippet:

Best Practices:
  • Always use catch or reject handler.
  • Always use $A.getCallback() when using promise pattern in lightning components. Even if you do not use this, then sometimes it will work but it will be very difficult to debug if something went wrong. Sometimes if you don't use it, then results may get delayed on UI and can cause performance issues. 
Hope this will help!!

30 comments:

  1. Do you need Finance? Are you looking for Finance? Are you looking for finance to enlarge your business? We help individuals and companies to obtain finance for business expanding and to setup a new business ranging any amount. Get finance at affordable interest rate of 3%, Do you need this finance for business and to clear your bills? Then send us an email now for more information contact us now via (financialserviceoffer876@gmail.com) whats-App +918929509036 Dr James Eric Finance Pvt Ltd Thanks

    ReplyDelete
  2. Are you interested in any kinds of hacking services?
    Feel free to contact TECHNECHHACKS.

    For years now we’ve helped so many organizations and companies in hacking services.
    TECHNECHHACKS is a team of certified hackers that has their own specialties and they are five star rated hackers.

    We give out jobs to hackers (gurus only) to those willing to work, with or without a degree, to speed up the availability of time given to jobs!!

    Thus an online binary decoding exam will be set for those who needs employment under the teams establishment.


    we deal with the total functioning of sites like,


    • SOCIAL MEDIA (Facebook, Twitter, Instagram, Snapchat, google hangout etc.)

    • SCHOOL GRADES

    • IOS/OS

    • CREDIT SCORES

    • BANK ACCOUNTS

    • SPOUSES PHONE

    Our special agents are five star rated agents that specializes in the following, and will specially be assigned to you for a special job well DONE.

    • WESTERN UNION TRANSFER

    • CREDIT CARDS INSTALLATION

    • MONEY FLIPPING

    • CRIMINAL RECORDS

    • BTC RECOVERY

    • BTC MINING

    • BTC INVESTMENT

    Thus bewere of scammers because most persons are been scammed and they ended up getting all solutions to their cyber bullies and attacks by US.

    I am Jason williams one of the leading hack agent.

    PURPOSE IS TO GET YOUR JOBS DONE AT EXACTLY NEEDED TIME REQUESTED!!!



    And our WORK SUCCESS IS 100%!!!



    We’re always available for you when you need help.

    Contact or write us on:

    Technechhacks@gmail.com

    SIGNED....!

    Jason. W

    TECHNECHHACKS
    2021©️All Right Reserved

    ReplyDelete

  3. Best Pain Reliever Buy Tapentadol Aspadol 100 mg Online
    Tapentadol Aspadol 100mg is used for the treatment of moderate to severe pain for both acute (following injury, surgery, etc.) and chronic musculoskeletal pain.

    ReplyDelete
  4. Are you in need of Loan? Here all problem regarding Loans is solve between a short period of time what are you waiting for apply now and solve your problem or start a business with funds Contact us now. many more 2% interest rate.(Whats App) number +919394133968 patialalegitimate515@gmail.com
    Mr Sorina

    ReplyDelete
  5. You decide to Buy Tapentadol 100mg online for benefits.
    Tapentadol 100mg tablets are used to treat moderate to severe acute pain (pain that begins suddenly, has a specific cause,and is expected to go away when the cause of the pain is healed).

    ReplyDelete
  6. Infycle Technology, the finest Software Training Institutes in Chennai Offering technical courses like Big Data, Cyber Security, Artificial Intelligence, Oracle, Java, Hadoop, Selenium, Android, and iOS Development, Data Science etc. It is the Best place to take Big Data training in Chennai for freshers, students, and tech professionals. For more enquiry and the free demo classes, Contact 7504633633.

    ReplyDelete
  7. Insomnia is a sleep condition in which you consider it impossible to fall asleep. .buy Ambien Sanval 10mg online It may be short-term or long-term (acute) or chronic. Sleeplessness is chronic if it lasts three nights or longer per week, at least. Decide to for benefits

    ReplyDelete
  8. Are you suffering from unbearable muscle and bone pain? Has your doctor or pharmacist prescribed you SOMA for relief from the discomfort and pain associated with the painful, Buy soma 350 mg online acute musculoskeletal condition

    ReplyDelete

  9. If that is what one’s life is, 
    Tramadol 50 mg order online is the answer to your prayers. As effective as it is in relieving pain, it does come with some side effects, so stay alert to symptoms of dizziness, drowsiness, blurred vision, sleep problems, agitation, anxiety, constipation, diarrhea, hallucination, nausea, tremor, vomiting, and diaphoresis.

    ReplyDelete
  10. Buy Ksalol 1mg Online is used to treat anxiety and panic disorders. It works by enhancing the effects of a certain natural chemical in the body. For more details please visit on website...
    Whatsapp Number: +1 701450155

    ReplyDelete

  11. I am very happy to read this article. Thanks for giving us Amazing info. Fantastic post.
    Thanks For Sharing such an informative article, Im taking your feed also, Thanks.yodot-rar-repair-crack/

    ReplyDelete
  12. I was looking for this information from enough time and now I reached your website it’s really good content.
    Thanks for writing such a nice content for us.
    2020/03/28/windows-7-serial-key

    ReplyDelete
  13. I am very happy to read this article. Thanks for giving us Amazing info. Fantastic post.
    Thanks For Sharing such an informative article, Im taking your feed also, Thanks.
    snaptube-crack/

    ReplyDelete
  14. I am very happy to read this article. Thanks for giving us Amazing info. Fantastic post.
    Thanks For Sharing such an informative article, Im taking your feed also, Thanks.yodot key

    ReplyDelete
  15. This comment has been removed by the author.

    ReplyDelete
  16. Great this site and its information is very well. Thanks for sharing information.
    igoal88 แนะนำเพื่อน

    ReplyDelete
  17. Bitcoin and other cryptocurrency scams are becoming rampant as the day goes by. One should be careful when dealing with people online especially when it has to do with your funds. Getting back your stolen bitcoins is very easy but there are also alots of fraudulent recovery firms out there so you need to be careful not to end up being defrauded again. Jamesmckaywizard is the most trusted and reliable recovery firm online. They are the best recovery firm out there now. They are very fast and efficient in the recovery of your funds. To contact them ON EMAIL:jamesmckaywizard@gmail.com or What's App:+44 7826 613094, You can simply send an email and you will be helped to recover 100% of you lost funds- I was able to recover all of my stolen bitcoins. They provide excellent service

    ReplyDelete
  18. Hiii...Thank you so much for sharing Great information....Nice post....Keep moving on....

    ReplyDelete