Angular 2 封装API请求

示例

将HTTP处理逻辑封装在其自己的类中可能是一个好主意。以下类公开了一种获取Posts的方法。它调用该方法并调用返回的将对象转换为对象。http.get().mapObservableResponsePost

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该类的工作原理。