Beginner's Guide to Angular: HTTP

Angular HTTP is all about using the right techniques for building a single page application that creates HTTP Requests, and handles HTTP Response in a maintainable, and scalable manner. The @angular/common/http package comes with a client, interceptor and many more features for your Angular application.

Single page applications often need to scale. It is the framework, which needs to provide the right mix of tools and techniques for supporting this. Angular comes with many in-built tools to scale gracefully. Today, you'll learn how to set up a basic architecture for HTTP requests in your app, and how to use interceptors to keep your app scalable. 

Big or small, any Angular app will  have a flow of HTTP requests. You'll be sending and receiving HTTP requests.  How would you apply rules and change the way your request workflow happens? Interceptors are Angular Services used to achieve this. As suggested by its name, you can intercept any request sent, or response received. You will be able to add/modify values of the request. 

But before you venture into HTTP interceptors, you need to be aware of the basics of HTTP in Angular. 

Skeleton of the Project

Before we get started, I would like to walk you through the overall project structure. You can find the completed project live in this Github repository.

-src
--app
----child
------child.component.ts
----parent
------parent.component.ts
------parent.service.ts
----utility
------header.interceptor.ts
------response.interceptor.ts
------error.interceptor.ts
----app-routing.module.ts
----app.component.css
----app.component.ts
----app.module.ts
--assets

1. Preparing Your Project for HTTP

HttpClient is a built-in service class in the Angular package: @angular/common/http. When you want to communicate over a HTTP protocol in Angular, you may use fetch, or XMLHttpRequest. Either way, the communication happens through HttpClient. This service class comes with many interesting signatures, and return types. 

Interesting features of the HttpClient are:

• perform GET, POST, PUT and DELETE requests


• streamlines all your error handling strategies


• intercept any HTTP request sent, or response received 


• create typed request or response objects


• introduce RxJS observables

Step 1: Importing HttpClient in app.module.ts

In order to use HttpClient, you must import the HttpClientModule in your app.module.ts file. And this should be a part of the imports array in your NgModule. 

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

@NgModule({
  imports: [BrowserModule, HttpClientModule],
  .
  .
  providers: []
})
export class AppModule { }

With the above declaration, you are good to use HttpClient in your components. To access the HttpClient in a component, you need to create a service. And, it has to be an Injectable service. For our purpose, we'll create a service which can be injected at root level. 

Step 2: Create an Injectable Service

Any injectable service, will have the following skeleton. In our sample project, you will find an injectable service in the file parent.service.ts. It provides all the APIs required by parent.component.ts.

import { HttpClient } from  '@angular/common/http';
import { Injectable } from  '@angular/core';

@Injectable({
    providedIn:  'root'
})

export class HttpService {
    constructor(private https: HttpClient) { }
}

Now, let's improve the above skeleton and make it fetch data from an API. If you are new to HTTP, we have a great post to help you learn the basics. 

import { HttpClient, HttpHeaders } from  '@angular/common/http';
import { Injectable } from  '@angular/core';
import {HttpParams} from "@angular/common/http";

@Injectable({
    providedIn:  'root'
})

export class ParentHttpService {

    private url = 'https://reqres.in/api/users';

    constructor(private http: HttpClient) { }

    getUsers() {
        return this.http.get(this.url);
    }

    // ...
}

Step 3: Consuming the Injectable Services

In our parent.service.ts file, you will find many getter API calls. These APIs are called from the parent.component.ts. Let's take a quick look at parent.component.ts, which is used for calling the methods in parent.service.ts.

What we want to achieve here is an injection of the service created for fetching users.

1. We subscribe to the method in the service.


2. The moment we run this method, you will be executing the GET request, and receiving the response/error object. 

In our example, we have three different buttons, each pointing to a different method in the injectable service. 

import { Component } from '@angular/core';
import { ParentHttpService } from './parent.service';

@Component({
  selector: 'parent',
  template: `
    <div>
      <h3>Parent Page</h3>
      <div>Get All Users <button (click)="getAllUsers()">Get All Users</button></div>
      <div>Get users in page 2 <button (click)="getUserInPageTwo()">Get Items on Page 2</button></div>
      <div>Get users in page 2 with custom Header <button (click)="getUsersOnAPageWithHeaders()">Get users in page 2 with custom Header</button></div>
      <div>Users:</div>
      <div>{{users}}</div>
    </div>
  `,
})
export class ParentComponent {

  users : any;

  constructor(private httpService: ParentHttpService) { }

  ngOnInit() {}

  getAllUsers = () => {
      this.httpService.getUsers().subscribe(
        (response) => { this.users = JSON.stringify(response); },
        (error) => { console.log(error); });
      }
  getUserInPageTwo = () => {
    this.httpService.getUsersOnAPage(2).subscribe(
      (response) => { this.users = JSON.stringify(response); },
      (error) => { console.log(error); });
    }
  getUsersOnAPageWithHeaders = () => {
    this.httpService.getUsersOnAPageWithHeaders(2).subscribe(
      (response) => { this.users = JSON.stringify(response); },
      (error) => { console.log(error); });
    }
    
}

The above component, appears as below. In the screenshot, I have clicked on the Get All Users button. And, the results have appeared successfully. 

Step 4: Configuring an HttpInterceptor

As mentioned before, you can add or modify values of any request. In an application, you may have multiple interceptors. This is why, it is important for you to register the interceptor as a provider in app.module.ts. If the interceptor is not registered here, it will not be able to intercept requests we make using the HttpClient service. 

One of the interceptors in our project can be found in utility/header.interceptor.ts. And, we have to import it into app.module.ts. 

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ParentHttpService } from './parent/parent.service';
import { HeaderInterceptor } from './utility/header.interceptor';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule
  ],
  providers: [ { provide: HTTP_INTERCEPTORS, useClass: HeaderInterceptor, multi: true }, ParentHttpService],
  bootstrap: [AppComponent]
})
export class AppModule { }

The syntax for adding interceptors in your @NgModule configuration is:

providers: [{ provide: HTTP_INTERCEPTORS, useClass: <name of interceptor>, multi: true }]

Step 5: Building the HttpInterceptor

In order to create an interceptor, the HttpInterceptor interface available in @angular/common/http has to be implemented. Every time your Angular application wants to make a request or receive a response through the HTTP protocol using HttpClient Service, the interceptor's intercept method will be called. 

The intercept method, has the following anatomy:

• input: accepts a reference to the httpRequest object


• purpose: inspects and modifies the httpRequest object as required


• output: calls next.handle with the modified httpRequest
  

Step 6: Intercepting the Header

As we learn about intercepting, let's add a header to all our API requests. Here, we are adding a new header called ANGULAR_TUTS_INTERCEPTOR to our get request. As mentioned, we can have multiple interceptors in the code. Don't forget to name the interceptor correctly, so that you can identify and maintain code better.

//app.interceptor.ts
import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpEvent, HttpResponse, HttpRequest, HttpHandler, HttpErrorResponse } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class HeaderInterceptor implements HttpInterceptor {
  intercept(httpRequest: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { 
    console.log("Inside Intercept");     
    const ANGULAR_TUTS_INTERCEPTOR = '123456';
    return next.handle(httpRequest.clone({ setHeaders: { ANGULAR_TUTS_INTERCEPTOR } }));
  }
}

Here is a screenshot of the header being included in our GET request. 

Step 7: Intercepting the Response Body

Apart from intercepting the header of a request, we are allowed to modify the response body as well. The code for intercepting the response body can be found in response.interceptor.ts. Here, we consume the HttpResponse and append a new parameter called projectCode into the body. When the response is printed in our component, you will see projectCode in the output. 

With the new ResponseInterceptor, our app.module.ts appears as below:

providers: [ 
    { provide: HTTP_INTERCEPTORS, useClass: ResponseInterceptor, multi: true }, 
    { provide: HTTP_INTERCEPTORS, useClass: HeaderInterceptor, multi: true }
    ParentHttpService
]

//response.interceptor.ts
import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpEvent, HttpResponse, HttpRequest, HttpHandler } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators'

@Injectable()
export class ResponseInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(req).pipe(
      map((event: HttpEvent<any>) => {
            if (event instanceof HttpResponse) {
                event = event.clone({ body: this.handleResponse(event) })
            }
            return event;
        })
    )
  }
  private handleResponse(event: any): any {
      //  override http response body here
      const body = { ...event.body, "projectCode": "angular_tuts_http" };
      return body;
  }  
}

In this screenshot, you will be able to see the response interceptor in action. We have highlighted projectCode to showcase the newly added parameter to the response.

Step 8: Error Handling

Interceptors help us handle errors better. An API doesn't always return the expected result. Sometimes, when the server is down, or if the request does not contain the right body, you are bound to get an error. This is why error handling is extremely important. In our error.interceptor.ts file, we have added a simple error handling logic. The API request will be repeated four times, until the final error is thrown to the component.

One of the most important aspects to be seen in this piece of code would be the use of RxJS. Later in this tutorial, we will see why RxJS is important. 

We need to improve app.module.ts with the new ErrorInterceptor. The file appears as below.

providers: [ 
    { provide: HTTP_INTERCEPTORS, useClass: ResponseInterceptor, multi: true }, 
    { provide: HTTP_INTERCEPTORS, useClass: HeaderInterceptor, multi: true }, 
    { provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true }, 
    ParentHttpService
]

import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { of, throwError } from 'rxjs';
import { concatMap, delay, retryWhen } from 'rxjs/operators';

@Injectable()
export class ErrorInterceptor implements HttpInterceptor {
    retryCount = 3;
    retryWaitTime = 1000;
    intercept(req: HttpRequest <any>, next: HttpHandler) {
        return next.handle(req).pipe(
            retryWhen(error =>
                error.pipe(
                    concatMap((error, count) => {
                        if (count <= this.retryCount && error.status == 404) {
                            return of(error);
                        }
                        return throwError(error);
                    }),
                    delay(this.retryWaitTime)
                )
            )
        );
    }
}

Here is a screenshot that shows the behavior of error.interceptor.ts. As you can see, the same API request is made multiple times in the network tab. 

Tips and Tricks for Using @angular/common/http

HttpParams

HTTP Get can have multiple query string parameters. Here is a simple example:

https://reqres.in/api/users?page=2

In the above snippet, there is a query string parameter: page = 2. With the @angular/common/http package, you can add query string parameters quite easily. To achieve this, you have to import HttpParams from the package. HttpParams is immutable. All API methods linked to HttpParams will not result in any kind of object mutation. That is why,we have to chain the set method call—if you try any other way of setting the HttpParams, it would not work. Instead, you will receive an empty HttpParams object. 

//parent.service.ts
import {HttpParams} from "@angular/common/http";

//CHAINING
const params = new HttpParams()
        .set('page', pageNo)

return this.http.get(this.url, {params})
    
//DOES NOT WORK
params.set('page', 'pageNo"')

What would you do if the URL comprises of existing query string parameters? In this case, you can make use of fromString. fromString is a part of the HttpParams, and here is how you can use it:

const params = new HttpParams({
  fromString: 'page=2'
});

HttpHeaders

Next, let's understand how to read and set HTTP headers. Once again, if you are new to HTTP, you are highly encouraged to read our post about HTTP. 

HTTP headers make a big difference in any HTTP request or response. Some headers are automatically added to the request. And, some can be custom-added into the request. To achieve this, you need to make use of the HttpHeaders class from @angular/common/http. Just like HttpParams, HttpHeaders is also immutable. 

const headers = new HttpHeaders()
.set("Content-Type", "application/json");
const params = new HttpParams()
.set('page', pageNo)

return this.http.get(this.url, {headers, params})

RxJS

The role of RxJS is to ensure that only one HTTP request is made per subscription. Many a time, duplicate requests could be raised in your code. This will affect performance, and can even terminate your application. When you want data to be queried just once from the back-end, you need to make use of RxJS.

Also, when HTTP Requests need to be made in parallel, and the results have to be combined, we can make use of forkJoin from the RxJS library. 

If you want your HTTP Requests to be executed in a sequence, and the result of the first request has to be used to construct the second request, you can use switchMap. These are just two of the widely used use cases of RxJS. 

Another important aspect of RxJS would be its operators. This library offers operators like map, and filter which can be used along with next.handle.

Wrapping Up

We have come to the end of this tutorial on Angular HTTP. Making requests, and waiting for response is an inevitable step in any single page application. It is important to build a scalable application that is easy to maintain. Leverage the @angular/common/http library along with RxJS to build your client's HTTP workflow.