What is Promise in Angular Development?

Ankur Akvaliya

CO-CTO

Published On: November 18, 2022

JavaScript is a programming language created to add interactivity to web pages. However, in JavaScript coding, the developers find it quite challenging to deal with the callback functions. The reason is that they must deal with asynchronous events when users interact with a web page.

Such callback functions became a pain for many developers, especially when building complex and rich apps with JavaScript for modern browsers. To overcome such complexity, ES6 introduced Promises, a modern and powerful abstraction for writing asynchronous code in a better and easily maintainable way.

In this article, you’ll learn about what is Promise in Angular application and will come across the concept of JavaScript Promises introduced in ES6.

What is Promise in JavaScript?

A promise is a JavaScript or TypeScript object that may produce a value at some point in time. A promise may be in one of 4 possible states:

• fulfilled – The action relating to the promise succeeded
• rejected – The action relating to the promise failed just because an error occurs during promise implementation
• pending – It’s an initial state that hasn’t fulfilled or rejected yet
• settled – Has fulfilled or rejected

How To Create a Promise in JavaScript?

Let’s highlight a simple example of creating a promise in plain JavaScript.

var promise = new Promise((resolve, reject) => {
  resolve("Promise Resolved"); 
})

promise.then((success) => { 
  console.log(success);
})
.catch(function(error) => {
  console.log(error);
}); 
// Output: Promise Resolved

The developers from the leading AngularJS development company implements Promises by calling the then() and catch() methods.

• then() method: It takes two callback functions as parameters and is invoked when a promise is either resolved or rejected.
• catch() method: It takes one callback function and is invoked when an error occurs.

Now, let us understand the basic concept of “what is Promise in Angular?”

What is Promise in Angular?

When the AngularJS developers are dealing with asynchronous operations like an HTTP request, they are not sure of the exact time to get a response from the server. By default, Javascript is a programming language that is

• Synchronous;
• Blocking; and
• Single-threaded language.

In simple words, we can say that the Javascript engine can process only one code at a time in a single thread. So, when a thread is blocked, we can’t execute other code that is also blocked, making JS slow and unable to perform multiple operations.

On the other hand, the asynchronous operation is solely responsible for making code nonblocking. It means that it allows the developers to execute multiple codes at the same time.
In the Angular framework, the developers can quickly achieve asynchronous by utilising the following method.

• The Callback function
• The Promise from Javascript can be used in Angular.
• Observable using Rxjs library in Angular: Library for reactive programming using Observables.

You may also like to read: What is Angular?

Moreover, while dealing with an asynchronous operation, the developers can quickly move the code to the following line by allowing UI remains responsive. The user continues working on the application while asynchronous operations like HTTP requests are processed in the background.

Now the concept of Promise in Angular comes into the picture. The Promise in Javascript is nothing but a piece of task that is wrapped in asynchronous operation and notified whenever the asynchronous process is completed or failed at some point in the future.

Two possible outcomes occur when the developer runs the Promise: The Promise is completed or failed. With the help of the async and await keyword with Promise, it becomes easy for the developers to deal with easy to read, write, and we can also use “try and catch” for error handling with (async & await).

Planning To Develop a Robust Single-Page Application?

Albiorix is a leading AngularJS Development Company having core expertise in designing and building feature-rich applications for all your business needs.

Contact Us

Angular Promise Example

Its time to see how to use promises in Angular development First, we will create a simple Angular application using Angular CLI.

ng new angular-promise-example –routing=false –style=css

This command will create a new Angular application with no routing and CSS for stylesheet format. Next, we will set up HttpClient to send API requests to web servers to create or fetch data.

Fetching data is a standard asynchronous operation as you always have to wait for an amount of time to receive the requested data. In Angular development, you can use HttpClient for fetching data.

HttpClient uses RxJS Observables to handle asynchronous operations; let’s see how to use JavaScript/ES6 Promises instead.

In the app/app.module.ts file of your project, add the following changes:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpClientModule }  from '@angular/common/http';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';

@NgModule({
  imports:      [ BrowserModule, FormsModule, HttpClientModule ],
  declarations: [ AppComponent, HelloComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Next, open the src/app/app.component.ts file and add the following code to send a HTTP GET request and process the response using a Promise in Angular.

import { Component } from "@angular/core";
import { HttpClient } from "@angular/common/http";@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent {
title = "Angular Application and Promises Example";API_KEY = "e40d07f00b094602953cc3bf8537477e";

constructor(private httpClient: HttpClient) {}

ngOnInit() {
console.log("Angular Promises");
this.fetchDataAsPromise()
.then((data) => {
console.log(JSON.stringify(data));
})
.catch((error) => {
console.log("Promise rejected with " + JSON.stringify(error));
});
}

fetchDataAsPromise() {
return this.httpClient
.get(
`https://newsapi.org/v2/top-headlines?sources=techcrunch&apiKey=${this.API_KEY}`
)
.toPromise();
}
}

We import HttpClient and inject it via the component constructor and use it to send the HTTP request.

Next, we call the get() method to send the request and the toPromise() method to convert the returned RxJS Observable to a promise.

fetchDataAsPromise() {
return this.httpClient
.get(
`https://newsapi.org/v2/top-headlines?sources=techcrunch&apiKey=${this.API_KEY}`
)
.toPromise();
}

In the ngOnInit() life-cycle method, we send the actual request by calling the then() method of the promise as follows:

this.fetchDataAsPromise()
.then((data) => {
console.log(JSON.stringify(data));
})
.catch((error) => {
console.log("Promise rejected with " + JSON.stringify(error));
});

If the promise is resolved successfully we simply output the data in the console and in case of an error we display the error.

Related Post: Angular Promise Vs Observable

Conclusion

So, I hope you got a clear vision on what is Promise in Angular development is. In addition, we came across the concept of JavaScript Promises introduced in ES6. We have seen the implementation of JavaScript promises that can be specifically included in the application.

In addition, we came across the example of creating a promise in the Angular application. Still, if you have any query related to web application development, Angular is the best and leading option that help you build applications for all business verticals.