Working with Promise in Angular
Promises function by offering a method for managing the outcome of an asynchronous operation after it has been completed.

JavaScript is synchronous by nature because it is single-threaded. Code in JavaScript therefore executes line by line. Consider a situation that requires waiting for something, like retrieving a file, web results, or another similar activity, then letting the application to wait until the previous operation is complete is inefficient and is regarded as a major point of failure in any such application. Using asynchronous behaviour, we can get around this situation. JavaScript offers three options to address such scenarios.
- Callback Functions
- Promise Objects
- Async Functions
Utilising callbacks presents a significant disadvantage when executing a sequence of asynchronous activities, particularly when each subsequent operation relies on data from its predecessor. Utilising callbacks in this situation results in nested callbacks, rendering our code exceedingly difficult to comprehend.
Promises in Angular
In Angular, asynchronous actions are managed with the $http and $resource services. An Angular Promise is a javascript object that returns a value upon successful execution of an async operation. throw an error if operation fails.
An Angular promise is a class-based object instantiated with the new keyword and its constructor method.
To define a promise in Angular, you need to give the Promise constructor a callback function, which is also called the executor function or executor code. Resolve and reject are the two standard arguments passed to the executor function.
Inside the executor function, an asynchronous action is defined; the resolve and reject handlers correspondingly handle either intended outcome or error should one arise.
Promise objects possess .then and .catch methods that manage fulfilled outcomes and any encountered problems. The results of asynchronous actions are obtained as data or error via the resolve and reject handlers within the promise constructor.
States of Promises
Pending: This state is considered to be the starting state, as it is neither fulfilled nor rejected.
Fulfilled: This indicates that the operation has been successfully finished.
Rejected: This indicates operation failure.
Settled - The action is either fulfilled or rejected
In Angular, a promise is considered settled if it is either fulfilled or rejected. It cannot be in a condition of pending.
Handlers
.then : executes immediately upon the fulfilment of the promise or after resolve is called
.then uses a callback mechanism to get the outcome upon resolve is called. Ie. .then(function). The callback method within '.then' accepts result as an argument. The result is the value provided as an input during the invocation of the resolve function. i.e. 'Resolve(value)'
.catch : '.catch' is executed immediately following the invocation of reject(error) by the executor. That is after the promise has been rejected
.finally : The 'finally' handler exits after the promise is fulfilled. Settled signifies that the promise has either been fulfilled or rejected. Whether the promise was kept or refused. Finally, is always going to run. It does not process a promise, but rather finalises everything once the prior processes are performed.