基于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 相关文章推荐
JS JavaScript获取Url参数,src属性参数
Mar 09 Javascript
jquery入门—访问DOM对象方法
Jan 07 Javascript
js取消单选按钮选中示例代码
Nov 14 Javascript
JS判断客户端是手机还是PC的2个代码
Apr 12 Javascript
用javascript实现自动输出网页文本
Jul 30 Javascript
Vue数据驱动模拟实现5
Jan 13 Javascript
深入理解vue路由的使用
Mar 24 Javascript
详解Vue2 SSR 缓存 Api 数据
Nov 20 Javascript
vue-cli配置文件——config篇
Jan 04 Javascript
vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例
Nov 13 Javascript
Angular进行简单单元测试的实现方法实例
Aug 16 Javascript
JavaScript 中判断变量是否为数字的示例代码
Oct 22 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 gzip压缩输出的实现方法
2013/04/27 PHP
destoon复制新模块的方法
2014/06/21 PHP
ThinkPHP里用U方法调用js文件实例
2015/06/18 PHP
PHP数组去重的更快实现方式分析
2018/05/09 PHP
跨浏览器的设置innerHTML方法
2006/09/18 Javascript
11款基于Javascript的文件管理器
2009/10/25 Javascript
深入理解JavaScript系列(3) 全面解析Module模式
2012/01/15 Javascript
Extjs3.0 checkboxGroup 动态添加item实现思路
2013/08/14 Javascript
js中同步与异步处理的方法和区别总结
2013/12/25 Javascript
JavaScript动态加载样式表的方法
2015/03/21 Javascript
jquery实现的缩略图预览滑块实例
2015/06/25 Javascript
14款经典网页图片和文字特效的jQuery插件-前端开发必备
2015/08/25 Javascript
基于javascript实现句子翻牌网页版小游戏
2016/03/23 Javascript
NodeJS和BootStrap分页效果的实现代码
2016/11/07 NodeJs
js实现一个可以兼容PC端和移动端的div拖动效果实例
2016/12/09 Javascript
微信小程序 this和that详解及简单实例
2017/02/13 Javascript
vue实现app页面切换动画效果实例
2017/05/23 Javascript
详解VUE 定义全局变量的几种实现方式
2017/06/01 Javascript
使用react-router4.0实现重定向和404功能的方法
2017/08/28 Javascript
JavaScript中数组常见操作技巧
2017/09/01 Javascript
jquery.param()实现数组或对象的序列化方法
2018/10/08 jQuery
vue 动态添加class,三个以上的条件做判断方式
2020/11/02 Javascript
[00:36]DOTA2上海特级锦标赛 Archon战队宣传片
2016/03/04 DOTA
python交互式图形编程实例(二)
2017/11/17 Python
Python自定义线程池实现方法分析
2018/02/07 Python
python实现感知器算法(批处理)
2019/01/18 Python
python并发编程多进程之守护进程原理解析
2019/08/20 Python
通过python实现windows桌面截图代码实例
2020/01/17 Python
python图片剪裁代码(图片按四个点坐标剪裁)
2020/03/10 Python
医药工作者的求职信范文
2013/09/21 职场文书
韩语专业本科生求职信
2013/10/01 职场文书
竞聘演讲稿精彩开头和结尾
2014/05/14 职场文书
群众路线查摆问题整改措施思想汇报
2014/10/10 职场文书
后备干部推荐材料
2014/12/24 职场文书
Flask response响应的具体使用
2021/07/15 Python
详解ZABBIX监控ESXI主机的问题
2022/06/21 Servers