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