基于angular2 的 http服务封装的实例代码

/
  name:http服务
  describe:对http请求做统一处理
  author:Angular那些事 
  date:2017/6/3
  time:11:29
 /
import {Injectable}    from '@angular/core';
import {Http, Response}   from '@angular/http';
import 'rxjs/add/operator/toPromise';

@Injectable()
export class HttpInterceptorService {

 constructor(private http: Http) {
 }

 /
  统一发送请求
  @param params
  @returns {Promise<{suess: boolean, msg: string}>|Promise<R>}
 /
 public request(params: any): any {
 if (params['method'] == 'post' || params['method'] == 'POST') {
  return this.post(params['url'], params['data']);
 }
 else {
  return this.get(params['url'], params['data']);
 }
 }

 /
  get请求
  @param url 接口地址
  @param params 参数
  @returns {Promise<R>|Promise<U>}
 /
 public get(url: string, params: any): any {
 return this.http.get(url, {search: params})
  .toPromise()
  .then(this.handleSuess)
  .catch(res => this.handleError(res));
 }

 /
  post请求
  @param url 接口地址
  @param params 参数
  @returns {Promise<R>|Promise<U>}
 /
 public post(url: string, params: any) {
 return this.http.post(url, params)
  .toPromise()
  .then(this.handleSuess)
  .catch(res => this.handleError(res));
 }

 /
  处理请求成功
  @param res
  @returns {{data: (string|null|((node:any)=>any)
 /
 private handleSuess(res: Response) {
 let body = res["_body"];
 if (body) {
  return {
  data: res.json().content || {},
  page: res.json().page || {},
  statusText: res.statusText,
  status: res.status,
  suess: true
  }
 }
 else {
  return {
  statusText: res.statusText,
  status: res.status,
  suess: true
  }
 }

 }

 /
  处理请求错误
  @param error
  @returns {void|Promise<string>|Promise<T>|any}
 /
 private handleError(error) {
 console.log(error);
 let msg = '请求失败';
 if (error.status == 400) {
  console.log('请求参数正确');
 }
 if (error.status == 404) {

  console.error('请检查路径是否正确');
 }
 if (error.status == 500) {
  console.error('请求的服务器错误');
 }
 console.log(error);
 return {suess: false, msg: msg};

 }

}

/
  name:登录服务
  describe:请输入描述
  author:Angular那些事
  date:2017/6/1
  time:00:13
 /
import {Injectable}    from '@angular/core';

import {HttpInterceptorService} from 'app/mons/service/http-interceptor.service'

@Injectable()
export class LoginService {

 constructor(private httpInterceptorService: HttpInterceptorService) {
 }

 /
  登陆功能
  @param params
  @returns {Promise<{}>}
 /
 login(userName: string, passWord: string) {

 return this.httpInterceptorService.request({
  method: 'POST',
  url: 'http://119.232.19.182:8090/login',
  data: {
  loginName: userName,
  password: passWord
  },
 });

 }

 /
  注册
  @param user
  @returns {any}
 /
 reguster(user: any) {

 return this.httpInterceptorService.request({
  method: 'POST',
  url: 'http://119.232.19.182:8090/reguster',
  data: {
  user: user
  },
 });

 }
}

/
  name:登录组件
  describe:请输入描述
  author:Angular那些事
  date:2017/6/1
  time:00:30
 /
import {Component} from '@angular/core'
import {LoginService} from './login.service'

@Component({
 selector: 'login',
 templateUrl: './login.ponent.html',
 providers: [LoginService],
})

export class LoginComponent {
 private userName: string;
 private passWord: string;

 constructor(private loginService: LoginService) {
 }

 /
  登录
 /
 toLogin() {
 this.loginService.login(this.userName, this.passWord).then(result => {
  console.log(result);//打印返回的数据
 });
 }

}