封装 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 类的工作。