Promise in Angular

Promise in Angular

Reason why Both requires?

Because JavaScript is single-threaded, its code executes line by line. If an application needs to wait for something, like a file, web results, or another activity, it waiting until the previous operation is complete is inefficient and a major point of failure.

 

We can avoid this with asynchronous behaviour. There are three JavaScript options for such situations.
Function Callbacks
Promise Items
Asynchronous Functions

Why JS Function Callbacks fails -

Callbacks are disadvantageous when executing asynchronous activities, especially when each operation relies on data from the previous one. Callbacks in this case create layered callbacks, making our code confusing.

 

Angular promises

Asynchronous activities in Angular are managed by $http and $resource. When an async operation completes, an Angular Promise returns a value or throw error if operation fails. 

How Promise defines

• Angular promises are class-based objects instantiated with new keyword and its constructor method. Give the Promise constructor a callback function, also known as executor code, to define a promise in Angular. 
• Standard executor arguments are resolve and reject. An asynchronous operation is defined in the executor function, and the resolve and reject handlers handle intended outcome or error. 
• Promise objects have .then and.catch methods for successful and unsuccessful outcomes. So the promise constructor's resolve and reject handlers return asynchronous action outcomes as data or error.

 

States in Promises

• Pending: The initial state of a promise. The promise is neither fulfilled nor rejected. 
• Fulfilled: The state of a promise when the asynchronous operation is successful and the result is available. 
• Rejected: The state of a promise when the asynchronous operation fails and an error is thrown.

 

Promise 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. 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.

Promise in AngularThe Promise class in Angular implements promises so promises are inbuild. This class creates promises and handles asynchronous activities.

Using Promises in Angular

1. Create by Promise Constructor

const promise = new Promise((resolve, reject) => {
      // Perform asynchronous operation
      // If operation is successful, call resolve()
      // If operation fails, call reject()
});

Register Promise Handlers

Using the then() and catch() techniques, register functions/handlers to manage the outcome of the operation:

promise.then(result => {
    // Handle successful result
}).catch(error => {
    // Handle error
});

2. Create by using toPromise() method

In Angular, promises are frequently utilised alongside the HttpClient service to execute HTTP requests to a server. The HttpClient service returns an observable that may be transformed into a promise via the toPromise() method.

import { HttpClient } from '@angular/common/http';
constructor(private http: HttpClient) {}
 

getData(): Promise<any> {
    return this.http.get('/api/data').toPromise();
}

 

JavaScript uses promises for asynchronous actions like server fetching and animations.