Our Global Presence
Canada
57 Sherway St,
Stoney Creek, ON
L8J 0J3
India
606, Suvas Scala,
S P Ring Road, Nikol,
Ahmedabad 380049
USA
1131 Baycrest Drive,
Wesley Chapel,
FL 33544
In the current age of JavaScript, Promises are the default way to handle asynchronous behavior in JavaScript. But how do they work? Why should you understand them very well?
When we make you a promise, you take our word that we will fulfill that promise.
But we don’t tell you when that promise will be fulfilled, so life goes on…
There are two possible scenarios: fulfillment or rejection.
One day, we fulfill that promise. It makes you so happy that you post about it on Twitter!
One day, we tell you that we can’t fulfill the promise.
You make a sad post on Twitter about how we didn’t do what we had promised.
Both scenarios cause an action. The first is a positive one, and the next is a negative one.
Keep this scenario in mind while going through how JavaScript Promises work.
JavaScript is synchronous. It runs from top to bottom. Every line of code below will wait for the execution of the code above it.
But when you want to get data from an API, you don’t know how fast you will get the data back. Rather, you don’t know if you will get the data or an error yet. Errors happen all the time, and those things can’t be planned. But we can be prepared for it.
So when you’re waiting to get a result from the API, your code is blocking the browser. It will freeze the browser. Neither we nor our users are happy about that at all!
Perfect situation for a Promise!
Now that we know that you should use a Promise when you make Ajax requests, we can dive into using Promises. First, we will show you how to define a function that returns a Promise. Then, we will dive into how you can use a function that returns a Promise.
Below is an example of a function that returns a Promise:
function doSomething(value) { return new Promise((resolve, reject) => { // Fake a API call setTimeout(() => { if(value) { resolve(value) } else { reject('The Value Was Not Truthy') } }, 5000) }); }
The function returns a Promise. This Promise can be resolved or rejected.
Like a real-life promise, a Promise can be fulfilled or rejected.
According to MDN Web Docs, a JavaScript Promise can have one of three states:
"- pending: initial state, neither fulfilled nor rejected. - fulfilled: meaning that the operation was completed successfully. - rejected: meaning that the operation failed."
The pending state is the initial state. This means that we have this state as soon we call the doSomething() function, so we don’t know yet if the Promise is rejected or resolved.
In the example, if the value is truthy, the Promise will be resolved. In this case, we pass the variable value in it to use it when we would call this function.
We can define our conditions to decide when to resolve our Promise.
In the example, if the value is falsy, the Promise will be rejected. In this case, we pass an error message. It’s just a string here, but when you make an Ajax request, you pass the server’s error.
Now that we know how to define a Promise, we can dive into how to use a function that returns a Promise:
// Classic Promise doSomething().then((result) => { // Do something with the result }).catch((error) => { console.error('Error message: ', error) }) // Use a returned `Promise` with Async/Await (async () => { let data = null try { data = await doSomething() // Do something with the result } catch(error) { console.error('Error message: ', error) } })();
You can recognize a function that returns a Promise by the .then() method or an await keyword. The catch will be called if there is an error in your Promise. So making error handling for a Promise is pretty straightforward.
Promises are used in a lot of JavaScript libraries and frameworks as well. But the simplest web API is the Fetch API, which you should use for making Ajax requests.
For more information and to develop your web app using front-end technology, Hire Front-End Developer from us as we give you a high-quality solution by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft“. To develop your custom website using JS, please visit our technology page.
Content Source:
57 Sherway St,
Stoney Creek, ON
L8J 0J3
606, Suvas Scala,
S P Ring Road, Nikol,
Ahmedabad 380049
1131 Baycrest Drive,
Wesley Chapel,
FL 33544
57 Sherway St,
Stoney Creek, ON
L8J 0J3
606, Suvas Scala,
S P Ring Road, Nikol,
Ahmedabad 380049
1131 Baycrest Drive,
Wesley Chapel,
FL 33544
© 2024 — HK Infosoft. All Rights Reserved.
© 2024 — HK Infosoft. All Rights Reserved.
T&C | Privacy Policy | Sitemap