Thursday, 01 August 2019 18:23

SAPUI5 – Promises in UI

Written by https://sapyard.com/sapui5-promises-in-ui/
Rate this item
(0 votes)

Not only humans, but SAPUI5 also keep promises. Whenever I hear the word promise, I remember the “The Highwayman” tragic ballad by Alfred Noyes.

“Look for me by

moonlight,
Watch for me by moonlight,
I’ll come to thee by moonlight, though hell should bar the way.”

The above lines are one of the strongest promises I have ever read. The passionate lover dies while fulfilling the promise. But do not worry, our SAPUI5 Application will not die when it has to keep its promise. ?

This article on promise is motivated while helping a friend of mine who was struggling using traditional callbacks. Callbacks can get frustrating when used for asynchronous operations and make code more difficult to understand and refactor.

You guys might be wondering, what is this title Promises? What does that mean? What is its relevance in SAPUI5?

Hold on my friend. I Promise, I will explain the Promise concept in UI5 in details. ?

Well let’s keep this simple, You can say Promises are like making Promise to someone where you can keep up with the Promise or Fail to do so.

Here we have 2 simple terms

  1. Resolved (I have completed my promise)
  2. Rejected (I have failed to keep up with my promise)

Also Read: How to Consume Custom OData in SAPUI5 Application

Lets say you have a simple operation to do, a single operation. Below demonstrates how to create a promise.

Demo 1 – Promise for Simple Single Operation in SAPUI5

Step1:- Create a sample sapui5 project

Step2:- Create a button and write a function as shown below

We hardcoded the variable test as true, it would be in resolved case and write “Hey I was resolved”.

Now, lets reject the promise by changing test to boolean false.

Lets say if an error occurred, then the error function returns message. I have also provided comments for your better understanding.

Hope you have understood the single operation, now its time to play with real time asynchronous 3 executions.

Also TakeEnd to End Video Course on New Syntaxes in SAP ABAP 7.4+

Demo 2 – Multiple Promises in SAPUI5

Step3:- Create a 3 promises as shown below

Now you might need to perform some business operation when all of the three are resolved. In order to handle this asynchronous operation we use the promise.all function.

Handling Promise.all function.

In other words, the UI function Promise.all helps to trigger number of asynchronous calls and when all the calls are complete, we can write logic as per the business needs and perform the activity.

Now lets assume one of the function got error. As per new use case remember only single error result is displayed. Rest all errors and resolved will be ignored if occurred.

To come up with the combination of the resolved and the rejected responses use Promise.allSettled as shown below. As per new use case first one resolved and rest of them rejected.

Handling Promise.allSettled function.

Also CheckFirst Program in ABAP HANA

Demo 3 – Handling the First Response from many Promises

Step4:- The first response wins.

You have 3 asynchronous requests/calls and your business requirement is to perform the activity based on the first call to complete. It is like the rat race and the first one which resolves the quickest wins.

Promise 1 completes at 200 ms, Promise 2 rejects at 100ms and Promise 3 rejects with no delay. So the race winner is Promise 3!! Hurray.. Let’s check how we program it.

Handling Promise.race function.

Summary

Promise is an object representing the success or failure of an asynchronous operation. In other terms, Promise is a returned object to which we attach callbacks, instead of passing callbacks into a function.

How to create a Promise?

1
2
3
4
5
6
7
8
9
10
11
<code>varpromise=newPromise(function(resolve,reject){
//doasomething,possiblyasync,then
if(/*everythingturnedoutsuccessful*/){
resolve("Passed!");
}
else{
reject(Error("Failed"));
}
});</code>

The Promise constructor takes one argument and a callback with two parameters, viz resolve and reject.

How to use the above created Promise?

1
2
3
4
5
6
<code>promise.then(function(result){
console.log(result);//"Passed!"
},function(err){
console.log(err);//"Failed"
});</code>

then() accepts two arguments, a callback for happy path and another for the failure path. Both are optional and we can add only the failure or success if we want.

Chaining can be performed in Promises.

then() can be used in chain to perform multiple other checks and functions. We can start an operation when the previous operation succeeds.

Also TakeEnd to End Video Course on SAP ABAP Debugging

References for Promise API

Constructor

Static Methods

Instance Methods

You can learn more about UI5 Promises, Promises Details, JS Promises and other Promises in the respective embedded links.

Promises is a new concept for ABAP developers learning UI5. It has lots of advantage. If you have any issue or face any difficulty in implementing it, do put your questions in the comment section below.

I promise to reply to every query. ?

You may join our SAP Technical Telegram Group . You need to install Telegram App first and then click the link in your mobile device. You may also install it in your desktop.

Please SUBSCRIBE to SAPYard’s Youtube Channel for Free End to End SAP Video Course and Training.

Step by Step Tutorials on SAPUI5

Read 202 times

Leave a comment

Make sure you enter all the required information, indicated by an asterisk (*). HTML code is not allowed.