Using Promise In Lightning Component

Introduction 

In this blog, I am going to explain how to use Promise in the lightning component. Salesforce lightning components had improved performance by its asynchronous nature itself by managing the lifecycle. Promises are one of the ways to deal with asynchronous code in JavaScript without writing callbacks. A promise is commonly defined as a proxy for a value that will eventually become available. For example, if you use the promise API to make an asynchronous call to a web service, you will create a Promise object which represents the data that will be returned by the web service in future. The caveat is that the actual data isn’t available yet. It will become available when the request completes and a response comes back from the web service. In the meantime, the Promise object acts as a proxy to the actual data. Furthermore, you can attach callbacks to the Promise object, which will be called once the actual data is available.

How Promises Work

The promise is asynchronous so when Promise is executed it contains different status. When a promise is pending, it can transition to the fulfilled or rejected state. Once a promise is fulfilled or rejected, however, it will never transition to any other state, and its value or failure reason will not change. A promise can be in one of 3 states:

  • Pending – the promise’s outcome hasn’t yet been determined
  • Fulfilled – the asynchronous operation has completed
  • Rejected – the asynchronous operation failed.

Create a Promise

The Promise object is created using the new keyword and its constructor. This constructor takes as its argument a function, called the “executor function”. This function should take two functions as parameters. The first of these functions (resolve) is called when the asynchronous task completes successfully and returns the results of the task as a value. The second (reject) is called when the task fails and returns the reason for failure, which is typically an error object The promise syntax looks like as shown below.

To provide a function with promise, simply have it return a promise. The following serverSideCall function is returning the Promise object. Once the promise object returns the success response, it will invoke the resolve otherwise it will invoke reject.

Now all the functions get the promise object instance.

after creating the promise object instance you need to call the then() method. All promise instances get a then method which allows you to react to the promise.

 Or simply

Chaining Promises

When you need to coordinate or chain together multiple callbacks, promises can be useful. The generic pattern is:

Orchestrating promises

If you need to synchronize different promises, Promise.all() helps you define a list of promises, and execute something when they are all resolved.

Promise.race()

Use of Promise.race Instead of waiting for all promises to be resolved or rejected, Promise.race triggers as soon as any promise in the array is resolved or rejected

 

Handling Errors

What if an error occurs while performing an asynchronous operation?  In synchronous code, you can use try/catch, and rely on exception propagation to errors handle. The Promises API includes a catch() method to optionally catch unhandled errors. Always include a reject handler or a catch() method in your promise chain. Throwing an error in a promise doesn’t trigger window.onerror, which is where the framework configures its global error handler. If you don’t have a catch() method, keep an eye on your browser’s console during development for reports about uncaught errors in a promise. To show an error message in a catch() method, use $A.reportError().

 

Time to code 

Here is the complete code that will demonstrate different ways of promise usage

Apex Class

 

 

Lightning Component

controller

 

helper