Advanced HTTP Client Usage

Advanced usage of the Angular HTTP Client can significantly enhance the functionality and performance of your application. This guide covers advanced topics such as custom headers, request interception, response transformation, and handling different HTTP methods.

Setting Up HTTPClientModule

First, import the HttpClientModule into your app module:

// app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { AppComponent } from './app.component';
import { DataService } from './data.service';
import { HomeComponent } from './home/home.component';
import { CustomInterceptor } from './custom.interceptor';

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

Creating a Service

Next, create a service to manage HTTP requests using the Angular CLI command:

$ ng generate service data

This command generates a new service file named data.service.ts.

Custom Headers

In the service file, inject the HttpClient and create methods to perform HTTP requests with custom headers:

// data.service.ts
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  private apiUrl = 'https://jsonplaceholder.typicode.com/posts';

  constructor(private http: HttpClient) { }

  getPosts(): Observable {
    const headers = new HttpHeaders({ 'Custom-Header': 'CustomHeaderValue' });
    return this.http.get(this.apiUrl, { headers });
  }

  addPost(post: any): Observable {
    const headers = new HttpHeaders({ 'Custom-Header': 'CustomHeaderValue' });
    return this.http.post(this.apiUrl, post, { headers });
  }
}

Request Interception

Create an interceptor to manage HTTP requests using the Angular CLI command:

$ ng generate interceptor custom

This command generates a new interceptor file named custom.interceptor.ts.

Implementing the Interceptor

In the interceptor file, implement the HttpInterceptor interface and define the intercept method:

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

@Injectable()
export class CustomInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest, next: HttpHandler): Observable> {
    const clonedRequest = req.clone({
      headers: req.headers.set('Custom-Header', 'CustomHeaderValue')
    });
    return next.handle(clonedRequest);
  }
}

Response Transformation

Transform the response using the RxJS map operator in your service:

// data.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  private apiUrl = 'https://jsonplaceholder.typicode.com/posts';

  constructor(private http: HttpClient) { }

  getPosts(): Observable {
    return this.http.get(this.apiUrl).pipe(
      map(response => {
        // Transform the response as needed
        return response;
      })
    );
  }
}

Handling Different HTTP Methods

In the service file, create methods to handle different HTTP methods such as PUT and DELETE:

// data.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  private apiUrl = 'https://jsonplaceholder.typicode.com/posts';

  constructor(private http: HttpClient) { }

  getPosts(): Observable {
    return this.http.get(this.apiUrl);
  }

  addPost(post: any): Observable {
    return this.http.post(this.apiUrl, post);
  }

  updatePost(id: number, post: any): Observable {
    const url = `${this.apiUrl}/${id}`;
    return this.http.put(url, post);
  }

  deletePost(id: number): Observable {
    const url = `${this.apiUrl}/${id}`;
    return this.http.delete(url);
  }
}

Using the Service in a Component

Inject the service into your component's constructor and use it to perform HTTP requests:

// home.component.ts
import { Component, OnInit } from '@angular/core';
import { DataService } from '../data.service';

@Component({
  selector: 'app-home',
  template: `
    
Posts
    

      
{{ post.title }}
    
  `
})
export class HomeComponent implements OnInit {
  posts: any[] = [];

  constructor(private dataService: DataService) {}

  ngOnInit() {
    this.dataService.getPosts().subscribe(data => {
      this.posts = data;
    });
  }
}

Handling Errors

To handle errors in your HTTP requests, use the catchError operator from RxJS:

// data.service.ts
import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  private apiUrl = 'https://jsonplaceholder.typicode.com/posts';

  constructor(private http: HttpClient) { }

  getPosts(): Observable {
    return this.http.get(this.apiUrl).pipe(
      catchError(this.handleError)
    );
  }

  addPost(post: any): Observable {
    return this.http.post(this.apiUrl, post).pipe(
      catchError(this.handleError)
    );
  }

  updatePost(id: number, post: any): Observable {
    const url = `${this.apiUrl}/${id}`;
    return this.http.put(url, post).pipe(
      catchError(this.handleError)
    );
  }

  deletePost(id: number): Observable {
    const url = `${this.apiUrl}/${id}`;
    return this.http.delete(url).pipe(
      catchError(this.handleError)
    );
  }

  private handleError(error: HttpErrorResponse) {
    console.error('Server Error:', error);
    return throwError('Something went wrong with the request.');
  }
}

Key Points

Conclusion

Advanced usage of the Angular HTTP Client allows you to build robust and efficient applications. By setting up the HTTPClientModule, using custom headers, request interception, response transformation, and handling different HTTP methods, you can enhance your application's functionality and performance. Happy coding!