Angular Http Request – 8

Pada modul ini kita akan membahas error handling. Pada real aplikasi, akan banyak kemungkinan untuk terjadi error, misalnya tidak ada koneksi internet, format data yang salah, atau tidak memiliki authentication untuk melakukan suatu perintah.

Untuk melakukan simulasi error, buka realtime database di Firebase, lalu ubah rule read menjadi false.

Jika kita coba fetch data, akan terjadi error. Namun kita belum melakukan error handling.

Pendekatan yang dapat dilakukan untuk error handling adalah dengan menambahkan error checking pada method subscribe.

Buka file app.component.ts, modifikasi pada method

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';


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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  loadedPosts: Post[] = [];
  isFetching = false;
  _error = null;

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

  ngOnInit() {
    this.fetchPosts();
  }

  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;
      }
    );
  }
}

Buka file app.component.html, tambahkan ngIf untuk menampilkan error message.

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-md-6 col-md-offset-3">
      <form #postForm="ngForm" (ngSubmit)="onCreatePost(postForm.value)">
        <div class="form-group">
          <label for="title">Title</label>
          <input
            type="text"
            class="form-control"
            id="title"
            required
            ngModel
            name="title"
          />
        </div>
        <div class="form-group">
          <label for="content">Content</label>
          <textarea
            class="form-control"
            id="content"
            required
            ngModel
            name="content"
          ></textarea>
        </div>
        <button
          class="btn btn-primary"
          type="submit"
          [disabled]="!postForm.valid"
        >
          Send Post
        </button>
      </form>
    </div>
  </div>
  <hr />
  <div class="row">
    <div class="col-xs-12 col-md-6 col-md-offset-3">
      <button class="btn btn-primary" (click)="onFetchPosts()">
        Fetch Posts
      </button>
      |
      <button
        class="btn btn-danger"
        [disabled]="loadedPosts.length < 1"
        (click)="onClearPosts()"
      >
        Clear Posts
      </button>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-12 col-md-6 col-md-offset-3">
      <!-- modifikasi dengan memeriksa status fetching data-->
      <p *ngIf="loadedPosts.length < 1 && !isFetching">No posts available!</p>
      <ul class="list-group" *ngIf="loadedPosts.length >= 1 && !isFetching">
        <li class="list-group-item" *ngFor="let post of loadedPosts">
          <h3>{{ post.title }}</h3>
          <p>{{ post.content }}</p>
        </li>
      </ul>
      <!-- tambahkan kondisi memeriksa property _error -->
      <p *ngIf="isFetching && !_error">Loading data from server...</p>
      <div class="alert alert-danger" *ngIf="_error">
        <h3>Error</h3>
        <p>{{_error}}</p>
        </div>
    </div>
  </div>
</div>

Sesuai ekspektasi, sekarang error sudah kita handling.