Angular Http Request – 6

Pada modul ini kita akan beajar melakukan refactoring program dari modul sebelumnya.

Refactoring akan memisahkan antara view dan backend process, dalam hal ini http request kedalam service.

Mungkin timbul pertanyaan, untuk apa dilakukan refactoring. Jika melihat contoh project, tentu tidak diperlukan karena aplikasi tergolong sangat sederhana. Namun jika aplikasi Anda cukup kompleks, sangat disarankan memisahkan antara code view dan process backend.

Buat file baru post.service.ts, lalu pindahkan code yang berhubungan dengan http request dari app.module.ts .

Berikut hasil akhir code post.service.ts setelah refactoring.

import { HttpClient } from "@angular/common/http";
import { Injectable } from "@angular/core";

import { map } from 'rxjs/operators'; 

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

@Injectable({providedIn: "root"})
export class PostService{
    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);
          }
        );
    }

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

File app.component.ts

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;

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

  ngOnInit() {
    this.fetchPosts();
  }

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

  onFetchPosts() {
    this.fetchPosts();
  }

  onClearPosts() {
  }

  private fetchPosts(){
    this.isFetching = true;
    this.postSrv.fetchPosts().subscribe(posts =>{
      this.isFetching = false;
      this.loadedPosts = posts;
    });
  }
}

Jika Anda lakukan testing, sesuai ekpektasi, program tetap berjalan dengan baik.