Angular Http Request – 10

Pada modul ini kita akan bahas sedikit mengenai header, query parameter dan responseType. Kita dapat mengaturnya melalui Angular http client.

Setting Headers

Jika API yang Anda gunakan memerlukan informasi header tertentu, atau membutuhkan authentication, dapat diatur melalui http headers.

Parameter headers dapat diatur disemua http request method.

Custom header dapat ditambahkan sebanyak sesuai kebutuhan Anda.

Berikut contoh menambahkan header pada method get, buka file post.service.ts, lalu lakukan modifikasi berikut (lihat bagian commentar)

//import library HttpHeaders jika IDE tidak otomatis
import { HttpClient, HttpHeaders } 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)
        .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',
          //menambahkan header
          {
            headers: new HttpHeaders({'Custom-Header': 'customheader'})
          }
          )
        .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 jalankan, lalu periksa melalui developer tools pada tab network, dapat dilihat custom headers berhasil ditambahkan.

Jika Anda memerlukan lebih dari satu header, Anda dapat pisahkan code untuk membuat header baru.

let headers = new HttpHeaders()
 
headers=headers.append('content-type','application/json')
headers=headers.append('Access-Control-Allow-Origin', '*')

http
.get(
'url goes here',
 {headers: headers}
)

Setting Query Parameter

Jika end point dari API membutuhkan query parameter, Anda dapat mengaturnya melalui Angular.

Ada dua pendekatan, Anda bisa mengatur langsung melalui url, atau menggunakan htpp client parameter.

http.get('url goes here?param1=pretty',)

atau

http.get('url goes here',
 {params: params}
)

Buka file post.service.ts, lalu tambahkan code set params.(lihat bagian code dengan comment)

//import library HttpParams jika IDE tidak otomatis
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)
        .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') //menambahkan header
          }
          )
        .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');
    }
}

Sesuai ekspektasi, query parameter telah ditambahkan pada url.

JIka diperlukan paramater lebih dari satu, Anda gunakan variable untuk menyimpan informasi params.

let params = new HttpParams();
params = params.append('print','pretty');
params = params.append('id','4');

http.get('url goes here',
 {params: params}
)

Setting responseType

parameter responseType memiliki default value json, Anda bisa menggantinya melalui setting parameter pada http request.

Sama seperti parameter sebelumnya, cukup didefinisikan pada parameter terakhir dari method request.

http.get('url goes here',
 {responseType: 'text'}
)

Type response yang disupport adalah : arrayBuffer, blob, text atau json.