Angular Http Request – 11

Sejauh ini, response yang kita dapat adalah response body data. Jika Anda memerlukan informasi lebih dari seluruh isi response, dapat gunakan parameter observe.

Secara value default observe adalah body, Anda dapat passing value response, events.

Sebagai contoh kita gunakan pada code post request. Buka file post.service.ts, tambahkan parameter observe (lihat code dengan baris comment).

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

import { Post } from "./post.model";

@Injectable({providedIn: "root"})
export class PostService{
    error = new Subject<string>();

    constructor(private http: HttpClient){}

    createPost(title: string, content: string){
        const postData: Post = {title: title, content: content}
        this.http
        .post<{ name: string }>(
          'https://angular03-f9c9b-default-rtdb.firebaseio.com/posts.json', 
          postData,
          //menambahkan parameter observe
          {observe : 'response'}  
        )
        .subscribe(
          responseData =>{
            console.log(responseData);
          }, error =>{  
              this.error.next(error.message);
          }
        );
    }

    fetchPosts(){       
        return this.http
        .get<{ [key: string]: Post }>(
          'https://angular03-f9c9b-default-rtdb.firebaseio.com/posts.json',
          
          {
            headers: new HttpHeaders({'Custom-Header': 'customheader'}),
            params: new HttpParams().set('print', 'pretty')
          }
          )
        .pipe( map (responseData =>{ 
          const postArr : Post[] = [];
          for (const key in responseData){
            if (responseData.hasOwnProperty(key)){
              postArr.push({...responseData[key], id: key});
            }
          }
          return postArr;
        }));
    }

    deletePosts(){
       return this.http.delete('https://angular03-f9c9b-default-rtdb.firebaseio.com/posts.json');
    }
}

Jika Anda periksa pada developer tools, dapat dilihat sekarang kita mendapatkan full response object.

Dengan ini Anda dapat mengakses informasi headers, status ok, status dan status text.

Selain response, kita juga dapat melakukan observe untuk events. Kita modifikasi code method delete untuk melakukan observe events.

Karena pada proses delete di subscribe oleh component lain, kita perlu menggunakan tap operator dari rxjs agar proses yang kita lakukan tidak mengubah isi response dan mengganggu component yang melakukan subscribe.

Buka file post.service.ts, tambahkan library tap dari rxjs/operators, kemudian tambahkan code observe events. (lihat bagian commentar).

import { HttpClient, HttpHeaders, HttpParams } from "@angular/common/http";
import { Injectable } from "@angular/core";
//tambahkan library tap
import { map, tap } from 'rxjs/operators'; 
import { Subject } from "rxjs";

import { Post } from "./post.model";

@Injectable({providedIn: "root"})
export class PostService{
    error = new Subject<string>();

    constructor(private http: HttpClient){}

    createPost(title: string, content: string){
        const postData: Post = {title: title, content: content}
        this.http
        .post<{ name: string }>(
          'https://angular03-f9c9b-default-rtdb.firebaseio.com/posts.json', 
          postData,
          {observe : 'response'}  
        )
        .subscribe(
          responseData =>{
            console.log(responseData);

          }, error =>{  
              this.error.next(error.message);
          }
        );
    }

    fetchPosts(){
        // let params = new HttpParams();
        // params = params.append('print','pretty');
        // params = params.append('id','4');
        
        return this.http
        .get<{ [key: string]: Post }>(
          'https://angular03-f9c9b-default-rtdb.firebaseio.com/posts.json',
          
          {
            headers: new HttpHeaders({'Custom-Header': 'customheader'}),
            params: new HttpParams().set('print', 'pretty')
          }
          )
        .pipe( map (responseData =>{ 
          const postArr : Post[] = [];
          for (const key in responseData){
            if (responseData.hasOwnProperty(key)){
              postArr.push({...responseData[key], id: key});
            }
          }
          return postArr;
        }));
    }

    deletePosts(){
       return this.http.delete(
         'https://angular03-f9c9b-default-rtdb.firebaseio.com/posts.json',
         //menambahkan parameter observe untuk events dan lakukan taping untuk melihat isi event
          {observe: 'events'}
         ).pipe(tap(event=>{
          console.log(event);
         }));
    }
}

Jika kita cek console, dapat dilihat terdapat 2 informasi.

Yang pertama adalah event dengan type 0, dimana kita melakukan sent request delete. Dan yang kedua adalah response dari event tersebut.

Jika Aplikasi Anda memerlukan control yang lebih detail untuk melakukan checking berdasarkan event type, dapat dilakukan dengan mudah.

Pertama import dahulu enum httpEventType untuk agar nilai event dapat dipahami, bukan berdasarkan angka 0, 1 dst.

Kemudian Anda bisa tambahkan code untuk checking berdasar event type.

import { HttpEventType } from "@angular/common/http";

return this.http.delete(
    'https://angular03-f9c9b-default-rtdb.firebaseio.com/posts.json',

     {observe: 'events'}
    ).pipe(tap(event=>{
     console.log(event);
     if(event.type === HttpEventType.Sent){
       //code goes here
     }
    }));