angular4开发中对请求数据层的封装

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:forin
    for (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:forin
    for (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