封裝 API 請求

將 HTTP 處理邏輯封裝在自己的類中可能是個好主意。以下類公開了獲取帖子的方法。它呼叫 http.get() 方法並在返回的 Observable 上呼叫 .map 將 Response 物件轉換為 Post 物件。

import {Injectable} from "@angular/core";
import {Http, Response} from "@angular/http";

@Injectable()
export class BlogApi {

  constructor(private http: Http) {
  }

  getPost(id: number): Observable<Post> {
    return this.http.get(`https://jsonplaceholder.typicode.com/posts/${id}`)
      .map((response: Response) => {
        const srcData = response.json();
        return new Post(srcData)
      });
  }
}

前面的示例使用 Post 類來儲存返回的資料，如下所示：

export class Post { 
  userId: number;
  id: number;
  title: string;
  body: string;

  constructor(src: any) {
      this.userId = src && src.userId;
      this.id = src && src.id;
      this.title = src && src.title;
      this.body = src && src.body;
  }
}

現在，一個元件可以使用 BlogApi 類來輕鬆檢索 Post 資料，而無需考慮 Http 類的工作。