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


Posted in Javascript onJune 29, 2017

最近在项目中折腾了下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);//打印返回的数据
 });
 }

}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript加强之自定义callback示例
Sep 21 Javascript
js中typeof的用法汇总
Dec 12 Javascript
javaScript 计算两个日期的天数相差(示例代码)
Dec 27 Javascript
js监听滚动条滚动事件使得某个标签内容始终位于同一位置
Jan 24 Javascript
node.js中的http.createServer方法使用说明
Dec 14 Javascript
通过伪协议解决父页面与iframe页面通信的问题
Apr 05 Javascript
jQuery实现TAB风格的全国省份城市滑动切换效果代码
Aug 24 Javascript
JQuery标签页效果的两个实例讲解(4)
Sep 17 Javascript
jquery对复选框(checkbox)的操作汇总
Jan 13 Javascript
详解webpack性能优化——DLL
Oct 20 Javascript
用最少的JS代码写出贪吃蛇游戏
Jan 12 Javascript
浅谈express.js框架中间件(middleware)
Apr 07 Javascript
JS通过调用微信API实现微信支付功能的方法示例
Jun 29 #Javascript
详解vue数据渲染出现闪烁问题
Jun 29 #Javascript
将angular.js项目整合到.net mvc中的方法详解
Jun 29 #Javascript
详解webpack和webpack-simple中如何引入css文件
Jun 28 #Javascript
基于jQuery实现的Ajax 验证用户名唯一性实例代码
Jun 28 #jQuery
VUE利用vuex模拟实现新闻点赞功能实例
Jun 28 #Javascript
Vuex利用state保存新闻数据实例
Jun 28 #Javascript
You might like
php session应用实例 登录验证
2009/03/16 PHP
CodeIgniter图像处理类的深入解析
2013/06/17 PHP
Yii遍历行下每列数据的方法
2016/10/17 PHP
列表内容的选择
2006/06/30 Javascript
重定向实现代码
2006/11/20 Javascript
通过判断JavaScript的版本实现执行不同的代码
2010/05/11 Javascript
jQuery 获取对象 定位子对象
2010/05/31 Javascript
DWZ刷新dialog解决方法
2013/03/03 Javascript
对比分析json及XML
2014/11/28 Javascript
nodejs微信公众号支付开发
2016/09/19 NodeJs
js 判断登录界面的账号密码是否为空
2017/02/08 Javascript
jQuery插件HighCharts绘制简单2D折线图效果示例【附demo源码】
2017/03/21 jQuery
ES6中Generator与异步操作实例分析
2017/03/31 Javascript
详解Vue中状态管理Vuex
2017/05/11 Javascript
Angular模板表单校验方法详解
2017/08/11 Javascript
JavaScript异步加载问题总结
2018/02/17 Javascript
JavaScript模拟实现自由落体效果
2018/08/28 Javascript
微信小程序功能之全屏滚动效果的实现代码
2018/11/22 Javascript
在Vue项目中使用snapshot测试的具体使用
2019/04/16 Javascript
vue-week-picker实现支持按周切换的日历
2019/06/26 Javascript
微信小程序从注册账号到上架(图文详解)
2019/07/17 Javascript
Javascript原生ajax请求代码实例
2020/02/20 Javascript
Javascript模块化机制实现原理详解
2020/04/02 Javascript
element中table高度自适应的实现
2020/10/21 Javascript
JavaScript实现网页留言板功能
2020/11/23 Javascript
python如何派生内置不可变类型并修改实例化行为
2018/03/21 Python
pytorch绘制并显示loss曲线和acc曲线,LeNet5识别图像准确率
2020/01/02 Python
英国时尚泳装品牌:Maru Swimwear
2019/10/06 全球购物
面向对象编程的优势是什么
2015/12/17 面试题
汽车检测与维修专业求职信
2013/10/30 职场文书
中学生班主任评语
2014/01/30 职场文书
刑事起诉书范文
2015/05/19 职场文书
2019通用版劳动合同范本!
2019/07/11 职场文书
jQuery实现广告显示和隐藏动画
2021/07/04 jQuery
MySQL运行报错:“Expression #1 of SELECT list is not in GROUP BY clause and contains nonaggre”解决方法
2022/06/14 MySQL
css中有哪些方式可以隐藏页面元素及区别
2022/06/16 HTML / CSS