1.基础模型代码的封装
import { Injectable } from ‘@angular/core’;
import { Http, Headers } from ‘@angular/http’;
import { Observable } from ‘rxjs/Observable’;
import ‘rxjs/Rx’;

@Injectable()
export class ServiceBaseService {
constructor(private http: Http) { }
/**
* @param {string} url地址
* @param {any} [options]可选提交的参数
* @param {any} [header]可选设置的头信息
* @memberof ServiceBaseService
* @title: 封装一个get请求的基础类
*/
getData(url: string, options?: any, myheaders?: any): Observable {
// 配置请求头
const myHeaders: Headers = new Headers();
// tslint:disable-next-line:forin
for (const key in myheaders) {
myHeaders.append(key, myheaders[key]);
};
url += (url.indexOf(‘?’) < 0 ? ‘?’ : ‘&’) + this.param(options);
return this.http.get(url, { headers: myHeaders }).map(res => res.json());
}

/*** @param url地址* @param options提交的数据* @param myheaders可选参数设置头* @title:封装一个post请求数据的*/
postData(url: string, options: any, myheaders?: any): Observable<any> {const myHeaders: Headers = new Headers();myHeaders.append('Content-Type', 'application/json');// tslint:disable-next-line:forinfor (const key in myheaders) {myHeaders.append(key, myheaders[key]);};return this.http.post(url, options, { headers: myHeaders });
}
/*** @param {any} data* @returns* @memberof ServiceBaseService* @title:封装一个序列化get请求的参数的方法*/
param(data): string {let url = '';// tslint:disable-next-line:forinfor (const k in data) {const value = data[k] !== undefined ? data[k] : '';url += `&${k}=${encodeURIComponent(value)}`;}return url ? url.substring(1) : '';
}

}
2.关于get请求获取数据的模型
import { Injectable } from ‘@angular/core’;
import { ServiceBaseService } from ‘app/model/service-base.service’;

@Injectable()
export class GetServiceService {

constructor(private serviceBase: ServiceBaseService) { }
// 获取数据
getData() {const url = '/wiseoper/';return this.serviceBase.getData(url, {name: 'hello', age: 20}, {QQ: '332904234'});
}

}
3.关于post请求获取数据的模型
import { Injectable } from ‘@angular/core’;
import { ServiceBaseService } from ‘app/model/service-base.service’;

@Injectable()
export class PostServiceService {

constructor(private serviceBase: ServiceBaseService) { }
postData(options) {const url = '/wiseoper/register/';return this.serviceBase.postData(url, options, {QQ: 332904234});
}

}
4.在组件的component.ts中直接调用模型中的方法就可以
import { Component, OnInit } from ‘@angular/core’;
import { GetServiceService } from ‘app/model/get-service.service’;
import { PostServiceService } from ‘app/model/post-service.service’;

@Component({
selector: ‘app-page1’,
templateUrl: ‘./page1.component.html’,
styleUrls: [‘./page1.component.scss’]
})
export class Page1Component implements OnInit {
private isColor: boolean;
private bookList: Array = [];
constructor(private getService: GetServiceService, private postService: PostServiceService) { }

ngOnInit() {this.isColor = true;
}
// 直接调用get请求数据的方法
getDate(): void {this.getService.getData().subscribe(data => {console.log(data);if (data.info === 'sussess') {this.bookList = data.data;}});
}
// 直接调用post提交数据的方法
submitForm(username: any, password: any): void {const user = username.value;const pass = password.value;this.postService.postData({username: user,password: pass,}).subscribe(data => {console.log(data);});
}

}
转载原文地址：http://blog.csdn.net/kuangshp128/article/details/77651622