Angular Http Request – 9

Melanjutkan dari modul sebelumnya mengenai error handling, disini kita akan menggunakan pendekatan subject. Pendekatan ini cocok jika error handling tersebut akan digunakan juga oleh component lainnya.

Kita akan gunakan pendekatan subject untuk post method. Buka file post.service.ts.

Lihat code dengan bagian commentar.

import { HttpClient } from "@angular/common/http";
import { Injectable } from "@angular/core";
import { map } from 'rxjs/operators'; 
//import library Subject jika IDE tidak otomatis.
import { Subject } from "rxjs";

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

@Injectable({providedIn: "root"})
export class PostService{
    //error handling menggunakan subject
    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 =>{  //error handling menggunakan subject
              this.error.next(error.message);
          }
        );
    }

    fetchPosts(){
        return this.http
        .get<{ [key: string]: Post }>('https://angular03-f9c9b-default-rtdb.firebaseio.com/posts.json')
        .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');
    }
}

Kemudian buka file app.component.ts, tambahkan code untuk subscribe terhadap subject yang telah kita buat diatas. Jangan lupa untuk melakukan proses unsubscribe pada method onDestroy().

Lihat bagian code dengan commentar.

//tambahkan onDestroy jika IDE tidak otomatis
import { Component, OnDestroy, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

//tambahkan library Subscription jika IDE tidak otomatis
import { Subscription } from 'rxjs';

import { Post } from './post.model'; 
import { PostService } from './post.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
//tambahkan onDestroy
export class AppComponent implements OnInit, OnDestroy {
  loadedPosts: Post[] = [];
  isFetching = false;
  _error = null;
  //tambahkan subscription untuk handling post error 
  createPostErr : Subscription;

  constructor(private http: HttpClient, private postSrv : PostService) {}

  ngOnInit() {
    //subscribe subject
    this.createPostErr = this.postSrv.error.subscribe(errMsg =>{
      this._error = errMsg;
      console.log(this._error);
    });

    this.fetchPosts();
  }

  //implement onDestroy untuk unsubscribe
  ngOnDestroy(): void {
    this.createPostErr.unsubscribe();
  }

  onCreatePost(postData: Post) {
    this.postSrv.createPost(postData.title, postData.content);
  }

  onFetchPosts() {
    this.fetchPosts();
  }

  onClearPosts() {
    this.postSrv.deletePosts().subscribe(()=>{
      this.loadedPosts=[];
    });
  }

  private fetchPosts(){
    this.isFetching = true;
    this.postSrv.fetchPosts().subscribe(
      posts =>{
        this.isFetching = false;
        this.loadedPosts = posts;
      }, 
      //tambahkan error checking
      error => {
        this._error = error.message;
      }
    );
  }
}

Ubah authorization pada Firebase, ubah write menjadi false. Lalu test lakukan posting data.

Sesuai ekspektasi error akan terjadi dan sudah berhasil kita handling.