This weekend I went by train to Cochem in Germany and it took me 5 hours to go and 5 hours to come back. In between the connections, I had the idea to write a blog post about promises chaining. This concept is being really helpful in my latest projects.

If you have the opportunity, go visit Cochem!

Have you ever come to a situation where you had to call Apex methods or some standard LWC Javascript APIs multiple times to fulfill the actions that you need? So this blog post is for you.

Today I am going to talk about how to use promise chains in Lightning Web Components by giving a simple example (for a blog post sake) but this approach can be used in a variety of scenarios.

First of all, do you know what is a Javascript promise? Here is a quote from the MDN web docs and also the link to the source. So if you have doubts, take some minutes to read the MDN article.

A is a proxy for a value not necessarily known when the promise is created. It allows you to associate handlers with an asynchronous action's eventual success value or failure reason. This lets asynchronous methods return values like synchronous methods: instead of immediately returning the final value, the asynchronous method returns a promise to supply the value at some point in the future.

The example that I am going to use creates one account record using the standard createRecord function and then gets the account id and send it to an Apex method, which in theory would integrate this account to an external system. Keep in mind that you can achieve the account creation part using different (and better) approaches, but the focus of this post is to explain the promise chain, so that’s why I am creating the record in this way.

First of all, let’s define the HTML file. The code is simple. We have an input field that will get the account name and a button that will call the handleCreate function.

And the Javascript file below. This first version contains only the account creation part. I will explain how it works and then we will add the rest of the code next.

The handleChange and checkFieldsValidity are accessory functions that (1) will store the account name in the accountName variable and (2) check the lightning input validity. I know, we have only one field in our case, but this can be useful if you have more input fields in yours 😉.

Now check the handleCreate function. Besides calling the checkFieldsValidity to know if the input field state is valid, it prepares the parameters required to call the createRecord function and get the result using the .then() statement and catches any error using the .catch().

Now, what if we want to call an Apex method to integrate this account to an external system right away? Let’s create the Apex class and method:

You thought I was going to call a real API, right? As this is just an example, I am just holding the execution for 5 seconds (let’s hope that your real API does not take that long to be executed! 😅) and returning a string back to the LWC.

Going back to the LWC, let’s import the Apex method:

And change the handleCreate function to also call the newly imported integrateAccount function when the account is created. The lines in bold are the ones that were added:

Notice that we are returning the integrateAccount function call. But why? When you import and call an imperative Apex method (you can check what it is here), it returns another promise. Returning this promise in the first .then() block allows us to add another .then() block, that will handle the result that is returned by the Apex method. And you can do it as many times as you need. Let’s suppose that with the result of the API (made by the Apex method) you want to create another record or run any other logic. You will end up with a code like this:

The .catch() will always be called whenever any of the .then() blocks get an error. So you can handle your errors there like showing feedback messages to the user.

To finish this post, let’s talk about the last (but not least important) thing from the promise chaining subject: the .finallly() block. To do so, add a lightning-spinner to your HTML file. The spinner will give a feedback to the user while the creation/integration transactions are still running. Like this:

Add the isLoading variable to the js file:

And then the this.isLoading = true; before the chain and the .finally() block at the very end of the promise chain:

The .finally() block will always run at the end of the promise chain, even if you get an error in one of the calls, so you can use it to run things that are common to both success or failure scenarios.

I hope this blog post helps you when facing a situation like this in your personal or work projects. If you have any questions or something to add to it, just leave a comment and I will be happy to reply.

Lead Salesforce Developer, Lightning Champion, 21x Salesforce Certified.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store