In modern asynchronous programming, promises play a crucial role in managing the complexity of handling asynchronous operations.
As developers, we frequently encounter scenarios where tasks take time to complete, such as fetching data from servers or making API calls. Promises provide a structured approach to dealing with these situations, making code more readable, maintainable, and efficient.
Promise States:
A promise can exist in one of three states: pending, fulfilled, or rejected.
Pending: This is the initial state when a promise is created. It represents the time between the promise creation and the point when it’s either fulfilled or rejected.
Fulfilled: A promise is said to be fulfilled when the asynchronous operation it represents is successfully completed. It means the promised result is available, and the promise transitions to this state with the resolved value.
Rejected: A promise is rejected if the asynchronous operation encounters an error. In this case, the promise transitions to the rejected state, providing the reason for the rejection, which is usually an error object.
How to Handle Promises
Understanding promises and knowing how to handle them is crucial when dealing with asynchronous operations in your applications and projects. Promises allow you to manage asynchronous calls effectively, ensuring your code remains interactive and responsive.
There are two primary methods for handling promises:
1. Async/Await
One of the notable features introduced in the updated JavaScript syntax ES6 (ECMAScript 2015) is Async/Await. This approach simplifies asynchronous code and makes it more readable.
How Async/Await works:
You create a function that makes an asynchronous task and using the async keyword before the function declaration. This signifies that the function will contain asynchronous code. Inside the function, you use the await keyword before the promise. This instructs the code to pause execution until the promise returns a result, ensuring that the subsequent lines of code within the function are not executed until the promise’s result is available.
Here’s an example:
The provided code utilizes an endpoint to fetch data through a function call. The function is marked with the async keyword, indicating that it’s an asynchronous function and can employ the await keyword within. Within the code block, the await method is used to make a call.
** 2. The .then()**
This method is commonly used with promises to define what should happen once the promise is resolved (successfully completed). It takes a function as an argument, which will be executed when the promise is resolved. This allows you to chain actions to be taken after the promise is fulfilled. Therefore, do not wait for the promise to be resolved or rejected before executing the other lines of code.
Here’s an example:
In this updated code block, our approach to handling promises has changed. Instead of using async/await, we’re utilizing the .then() syntax for promise handling. This method allows us to define a sequence of actions that should occur as the promises resolve.
Practical Difference between “Aync Await” and “.then”
Now let’s dive into the practical differences between the two method of handling promises
Let’s run this block of code:
When we run this code we noticed something interesting, and that’s the hierarchy of how our code is executed. If we check our console we get something like this :
We can clearly see that the “I came first” was executed first before the actual result from the API. Which brings us back to what we discussed earlier, when we say using the “.then” syntax we don’t wait for the promise, instead we give it a line of action to perform when it is returned which in our case we asked our code to console.log the response returned by our promise .
Now lets run this block of code:
Now let’s see what we have in our console
Great. Now the console logged data were printed in the proper order. Which confirms to our earlier discovery, that Async await will not run other block of code until it gets back a response from our promise either resolved or rejected.
So its a wrap. I hope we are able to understand how promises work in JavaScript and how to handle them correctly.
