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
- Resolved (I have completed my promise)
- Rejected (I have failed to keep up with my promise)
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.
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.
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.
