Angular Http Request – 12

by

Pada modul ini kita akan bahas interceptor, sesuai namanya, berfungsi untuk Intercepts dan handles HttpRequest atau HttpResponse.

Penggunaan interceptor akan terasa bermanfaat ketika Anda ingin menambahkan property tertentu pada setiap request atau response. Hal ini umum digunakan ketika aplikasi menggunakan authenticator.

Intercept Request

Kita akan menggunakan skenario authentication, namun kita belum mengimplementasikannya secara real, karena akan kita bahas pada modul terpisah.

Buat file baru auth-iterceptor.service.ts

import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from "@angular/common/http";
import { Observable } from "rxjs";

export class AuthInterceptorService implements HttpInterceptor{
    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        console.log('request dalam proses intercept...');
        return next.handle(req);
    }
}

Kemudian lakukan registrasi pada app.module.ts

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

import { AppComponent } from './app.component';
import { AuthInterceptorService } from './auth-interceptor.service';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, FormsModule, HttpClientModule],
  //registrasi inteceptors
  providers: [{provide: HTTP_INTERCEPTORS, useClass: AuthInterceptorService, multi: true}],
  bootstrap: [AppComponent]
})
export class AppModule {}

Setelah setup diatas selesai, maka setiap request yang dilakukan akan melalui interceptors.

Modifikasi Request

Setelah berhasil kita intercept, selanjutnya dapat dilakukan modifikasi dari object request.

Hal yang harus diperhatikan object request adalah imutable, jadi harus dilakukan proses clone.

Untuk kebutuhan demo, kita akan tambahkan header auth.

import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from "@angular/common/http";
import { Observable } from "rxjs";

export class AuthInterceptorService implements HttpInterceptor{
    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        console.log('request dalam proses intercept...');
        const modReq = req.clone({headers: req.headers.append('Auth', 'abc')});
        return next.handle(modReq);
    }
}

Jika kita periksa isi request header, property auth sudah berhasil kita tambahkan.

Intercept Response dan Multiple Interceptor

Pada bagian ini kita akan bahas membuat multiple interceptor sekaligus melakukan intercept reseponse.

Buat file baru untuk inteceptor baru. Beri nama logging-intercept.service.ts. Logging interceptor berfungsi untuk menampilkan log.

Perhatikan bagian perintah pipe(). Disana kita sedang melakukan intercepting pada response. Digunakan juga operator tap agar tidak mengubah isi dan format response yang akan digunakan oleh component lain.

import { HttpEvent, HttpEventType, HttpHandler, HttpInterceptor, HttpRequest } from "@angular/common/http";
import { Observable } from "rxjs";
import { tap } from "rxjs/operators";

export class LoggingInterceptorService implements HttpInterceptor{
    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        console.log('outgoing request..');
        console.log(req.url);
        console.log(req.headers);
        return next.handle(req).pipe(tap(event=>{
            if (event.type === HttpEventType.Response){
                console.log('Incoming response...');
                console.log(event.body);
            }
        }));
    }
}

Berikutnya kita buka file auth-interceptor.service.ts, lalu modifikasi dengan menghapus bagian logging agar tidak tumpang tindih dengan interceptor logging diatas.

import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from "@angular/common/http";
import { Observable } from "rxjs";

export class AuthInterceptorService implements HttpInterceptor{
    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        const modReq = req.clone({headers: req.headers.append('Auth', 'abc')});
        return next.handle(modReq);
    }
}

Kemudian buka app.module.ts, registrasikan interceptor logging.

Yang perlu diperhatikan adalah order dari registrasi, yang pertama diregistrasikan adalah yang pertama dijalankan.

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

import { AppComponent } from './app.component';
import { AuthInterceptorService } from './auth-interceptor.service';
import { LoggingInterceptorService } from './logging-interceptor.service'

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, FormsModule, HttpClientModule],
  //registrasi inteceptors
  providers: [
    {provide: HTTP_INTERCEPTORS, useClass: AuthInterceptorService, multi: true},
    {provide: HTTP_INTERCEPTORS, useClass: LoggingInterceptorService, multi: true}
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Dapat dilihat pada console, logging untuk request dan response berjalan dengan baik, demikia juga dengan penambahan auth pada header request.

Sampai disini pembahasan http request sudah selesai, pada modul selanjutnya kita akan bahas authentication.

File final project diatas dapat download di https://drive.google.com/file/d/1Ov_yKiGZQkBurjPkSFJRDql-XU0geG_E/view?usp=sharing

Sharing is caring:

Leave a Comment