基于angular2 的 http服务封装

最近在项目中折腾了下angular2,所以出来跟大家分享,希望有帮助,每个公司业务不一样,按实际情况而定,个人学习心得,不作为标准。
1、定义http-interceptor.service.ts服务,统一处理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<{success: 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.handleSuccess)
.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.handleSuccess)
.catch(res => this.handleError(res));
 
}

/**
  *
处理请求成功
 
* @param res
  *
@returns {{data: (string|null|((node:any)=>any)
  */
 
private handleSuccess(res: Response) {
let body = res["_body"];
   
if (body) {
return {
data: res.json().content || {},
       
page: res.json().page || {},
       
statusText: res.statusText,
       
status: res.status,
       
success: true
     
}
}
else {
return {
statusText: res.statusText,
       
status: res.status,
       
success: 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 {success: false, msg: msg};

 
}

}


2、在每一个模块创建一个service,service定义此模块的所有http数据请求,我这里演示登录模块:login.service.ts

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

import {HttpInterceptorService} from 'app/commons/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
},
   
});

 
}
}


3、在component注入servicelogin.service.ts。调用seriveLogin.service.ts服务定义的方法,这里通过login.component.ts演示

/**
* 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.component.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);//打印返回的数据
   
});
 
}

}


个人学习心得,大神路过 ,不喜勿喷
有问题加我个人微信提问或者留言


  • 3
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值