基于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代码压缩器
Oct 12 Javascript
node.js中的fs.readdirSync方法使用说明
Dec 17 Javascript
javascript三元运算符用法实例
Apr 16 Javascript
avalonjs制作响应式瀑布流特效
May 06 Javascript
jquery遍历json对象集合详解
May 18 Javascript
值得分享的轻量级Bootstrap Table表格插件
May 30 Javascript
Vue.JS入门教程之列表渲染
Dec 01 Javascript
javascript 正则表达式去空行方法
Jan 24 Javascript
vue2.0的contextmenu右键弹出菜单的实例代码
Jul 24 Javascript
vue3.0 CLI - 2.5 - 了解组件的三维
Sep 14 Javascript
angular4自定义表单控件[(ngModel)]的实现
Nov 23 Javascript
ES10 特性的完整指南小结
Mar 04 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 cc攻击代码与防范方法
2012/10/18 PHP
数理公式,也可以这么唯美
2021/03/10 无线电
JQuery 网站换肤功能实现代码
2009/11/02 Javascript
JQuery里面的几种选择器 查找满足条件的元素$(&quot;#控件ID&quot;)
2011/08/23 Javascript
Javascript this 的一些学习总结
2012/08/02 Javascript
Javascript 多浏览器兼容总结(实战经验)
2013/10/30 Javascript
jquery和javascript中如何将一元素的内容赋给另一元素
2014/01/09 Javascript
Javascript学习笔记之函数篇(五) : 构造函数
2014/11/23 Javascript
2种jQuery 实现刮刮卡效果
2015/02/01 Javascript
jQuery实现仿腾讯微博滑出效果报告每日天气的方法
2015/05/11 Javascript
Javascript实现商品秒杀倒计时(时间与服务器时间同步)
2015/09/16 Javascript
js实现非常棒的弹出div
2016/10/06 Javascript
详解Javascript数据类型的转换规则
2016/12/12 Javascript
详解JS: reduce方法实现 webpack多文件入口
2017/02/14 Javascript
JavaScript mixin实现多继承的方法详解
2017/03/30 Javascript
ES6扩展运算符用法实例分析
2017/10/31 Javascript
微信小程序视图容器(swiper)组件创建轮播图
2020/06/19 Javascript
详解vue引入子组件方法
2019/02/12 Javascript
微信JS-SDK实现微信会员卡功能(给用户微信卡包里发送会员卡)
2019/07/25 Javascript
python求众数问题实例
2014/09/26 Python
Python实现提取文章摘要的方法
2015/04/21 Python
Python实现求解括号匹配问题的方法
2018/04/17 Python
Python文本统计功能之西游记用字统计操作示例
2018/05/07 Python
详解django2中关于时间处理策略
2019/03/06 Python
利用python开发app实战的方法
2019/07/09 Python
python3 selenium自动化 frame表单嵌套的切换方法
2019/08/23 Python
Pytorch实现的手写数字mnist识别功能完整示例
2019/12/13 Python
Python求两个字符串最长公共子序列代码实例
2020/03/05 Python
python argparse传入布尔参数false不生效的解决
2020/04/20 Python
css3弹性盒模型实例介绍
2013/05/27 HTML / CSS
世嘉游戏英国官方商店:SEGA Shop UK
2019/09/20 全球购物
Ariat英国官网:为世界顶级马术运动员制造最优质的鞋类和服装
2020/02/14 全球购物
自荐信的两点禁忌
2013/10/30 职场文书
中学学校门卫岗位职责
2014/08/15 职场文书
租房协议书范例
2014/10/14 职场文书
食堂采购员岗位职责
2015/04/03 职场文书