Scroll Top

Using Promises In Ext JS 6

Getting your Trinity Audio player ready...

Ext

Overview

Are you fed up with using traditional callback-based approaches in asynchronous operations? Are you finding it difficult to handle the errors during the callback process? Are you seeing duplicate callback calls? Well, I have some good news for you!

We have a simpler and alternative way for it and we call it Promise. Sencha introduced Promises in Ext JS 6, it makes our code more modular and simpler as compared to callbacks.

In this article, I am going to talk about following:

  1. What is a Promise ?
  2. Why to Use Promise ?
  3. How to create Promises in Ext JS?
  4. Deep dive into Promises
  5. Sample Example
  6. Advantages of Promises
  7. Summary

What is a Promise ?

A Promise represents the result of a task or an operation, which may or may not have completed. It is used for asynchronous computations.  Promise is natively introduced in the ECMAScript-6. However, even before  that there were few JS libraries had their own implementations of it.

At any stage, a Promise will be in one of these  4 states:

  • Pending: Initial state, not fulfilled or rejected.
  • Fulfilled: operation completed successfully.
  • Rejected: operation failed.
  • Settled : It has been fulfilled or rejected already.

The following diagram depicts the state transition of a promise:

promises

In the above diagram, we can see, a pending promise can become either fulfilled with a value, or rejected with a reason (error). When either of these happens, the associated handlers queued up by a promise’s then method are called. If the promise has already been fulfilled or rejected when a corresponding handler is attached, the handler will be called, so there is no race condition between an asynchronous operation completing and its handlers being attached.

As the then() and catch() methods return promises, they can be chained.

A promise is said to be settled if it is either fulfilled or rejected, but not pending.

Why to use Promises?

Promises provide a simpler alternative way for executing, composing, and managing async operations when compared to callbacks. Promises provide us a great way of handling asynchronous errors using approaches that are similar to synchronous try/catch.

Asynchronous calls in Ext JS and Sencha Touch can be done in a number of ways, with Store  and Ext.Ajax probably being the most common. These have a variety of options for specifying callbacks. For example, Store.load() expects a callback option to be passed. However Ext.Ajax.request typically has success and failure callback functions to be passed.

The point is that regardless of how an asynchronous call is performed, the code that invokes this logic should not be concerned with how it is being done. External code should not be burdened with having to pass either success,failure or callback options. Using a Promise creates a consistent API for your asynchronous logic. If external code always knows a Promise will be returned, it can always work with the asynchronous logic in a similar way.

How to create Promises in Ext JS?

  1. By Instantiating Ext.Promise


Here, we have created a promise by instantiating Ext.Promise, which will take a callback with resolve and reject arguments. Resolve will fulfill the promise and reject will fail the promise. After that we can attach our callbacks to promise through the then() method, which will take three callbacks called success, fail and progress callbacks. The success callback will be called when promise is fulfilled, fail callback will be called when promise has failed and the progress will be called for progress updates. The then() will return a promise for promise chaining. We will discuss promise chaining in more detail at a later stage.

2. By Instantiating Ext.Deferred

Deep dive into Promises

1. The Promise Done()

The done() terminates the promise chain and throws un-handled rejections i.e. if have not caught any generated failure then it will ensure that these rejection errors will be thrown.


2. The Promise Always()

The always() will be invoked whether a promise succeeds/fails. This is like “finally” block in try… catch… finally.


3. Promise Chaining

Chaining promises can make asynchronous code flow synchronously. Promise chaining through then() will provide sequencing.

For example, consider the following sum method which delivers a result using a promise.


Imagine you need to invoke the sum method four times, and each time you invoke sum, you need to pass the result from the previous call into the next call (this would simulate HTTP APIs where you need to make multiple requests, all dependent on one another, to fetch all of data required for a page).

With promises, the series of method calls could look like the following.


The above code also verifies that the final result is 5, because compute will add 1 to the result on each invocation. The code works because each call to the then method of a promise will result in a new promise.

We saw that we can add multiple then() statement to promise and it will create a chaining process where the return of one then() will be the input for the other then() block; and it will help us for transforming data in each step.We can add multiple then() method’s and each then() will return a promise with the transformed value and the execution of then() will go sequentially.

4. The Promise All()

The Ext.Promise.all(promisesOrValues ) method returns a promise that resolves when all of the promises in the promisesOrValues argument have resolved,or rejects with the reason of the first passed promise that rejects.


The Ext.Promise.all() will execute all the augmented promises parallelly and the resulting promise will be executed on the resolve/reject of all the promises.

If all the promises are resolved then it will invoke the resolve/success callback and if any one of these promises is rejected then it will invoke the reject callback of the resulting promise.

5. Error Handling in Promise

  • The then() method of promise is taking two arguments. One is success callback and other is the reject callback. One way is by using the reject callback we can capture the generated errors. 

  • the otherwise() method can be used for error handling. It accepts reject callback and returns a new promise of the the transformed value. i.e., a Promise that is resolved with the original resolved value, or resolved with the callback return value or rejected with any error thrown by the callback.

the otherwise() is not a special, it adds sugar to then(undefined, function(){ … });

Sample Example

Let’s take an example of the list of all the achievements of an employee for the year’s 2013, 2014, 2015 and from the service, we can read achievements for a year. Let’s code it from the scratch.

Here, the callback makes the business logic less readable if we have a complex requirement. The Promise representation will make the code simpler to manage and maintain. Let’s code it by using promise.

Promise implementation simplifies the code and makes the code more modular. Let’s make it more simpler by using Ext.Promise.all();

Advantages of Promises

  1. Promises are a replacement for callbacks to help us to deal with multiple asynchronous operations.
  2. Promise will make our code more modular as compared to callbacks.
  3. One of the biggest (and subtlest) ways promises gain their composability is by the uniform handling of return values and uncaught exceptions.

Summary

In this article, we talked about how to use a Promises in Ext JS and looked into the details of Promises. We can say, Promises are a great alternate for callbacks when  we are working with async operations. Also, Promises being composable, it allows you to think in terms of simple, if-then-when kind of logic and the code becomes far more readable and maintainable. With a lot of functionalities being moved to front-end, the exception handling must be rock solid and Promises provide us a great way of handling the same. I have started leveraging this. What about you?

References

Related Posts

Leave a comment

Privacy Preferences
When you visit our website, it may store information through your browser from specific services, usually in form of cookies. Here you can change your privacy preferences. Please note that blocking some types of cookies may impact your experience on our website and the services we offer.