How to use Promise in Angular?
This Article helps you to Understand, How to use Promise in Angular?
Imagine you wish to work with some data that was obtained from a distant server. Instead of waiting for the data to be fetched, we may establish a promise that takes care of the problem and lets the app continue doing other actions as this is an asynchronous operation (i.e., your code don't needs to wait for the server response before it can continue with its execution).
The promise will know what to do with data when it is fetched. This is similar to callbacks but promises have a better API and features.
How to create a Promise?
You first build a Promise instance and give the executor function two arguments: resolve and refuse. You place your asynchronous code in the function's body. Here, a straightforward timeout function settles the promise after a second.
You must call the resolve() function after your asynchronous code has successfully executed. This function accepts as an argument either nothing or a value that needs to be returned, if any. If something goes wrong, you should instead use the reject() method, which accepts values such as the error that happened.
You must invoke the then() method of the promise after making an instance of it and passing a callback function as a parameter. As soon as the promise is fulfilled, this function will be called. Another function that will be invoked when the promise is denied can be passed as the second parameter to the then() method.
The promise is resolved or rejected when the resolve and reject functions are called. The resolve function is called after the executor function has called some asynchronous code, which either resolves the promise or rejects it if an error occurred.
A Promise can be in one of the following states:
- pending: this is the initial state, neither fulfilled nor rejected.
- fulfilled: the operation completed successfully.
- rejected: the operation failed.
The Promise object has the following methods:
- Promise.all(): It wait for all promises to be resolved, or for any to be rejected
- Promise.allSettled(): It wait until all promises have settled (each may resolve, or reject).
- Promise.race(): It waits until any of the promises is resolved or rejected.
- Promise.reject(): It returns a new Promise object that is rejected with the given reason
- Promise.resolve(): It returns a new Promise object that is resolved with the given value.
Example 1: calling external API
Promises can be consumed by registering functions using .then and .catch methods.
then() method takes two functions as parameters and it is invoked when a promise is either resolved or rejected.
You can see that the first function is executed if promise is resolved and a result is received and the Second function is executed if the promise is rejected and an error is received. It is optional and there is a better way to handle error using .catch() method just as shown below.
Example 2: With Resolve and Reject
We also call the resolve() and reject() functions above after we have finished processing the callback from external API, so the calling function gets notified and can perform any post processing.