基于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数组的操作详解
Mar 27 Javascript
使用js 设置url参数
Jul 08 Javascript
jquery对复选框(checkbox)的操作汇总
Jan 13 Javascript
BootstrapTable请求数据时设置超时(timeout)的方法
Jan 22 Javascript
node.js程序作为服务并在windows下开机自启动(用forever)
Mar 29 Javascript
详解angularjs popup-table 弹出框表格指令
Sep 20 Javascript
微信小程序中换行空格(多个空格)写法详解
Jul 10 Javascript
详解webpack编译速度提升之DllPlugin
Feb 05 Javascript
小程序实现悬浮搜索框
Jul 12 Javascript
解决layer弹出层中表单不起作用的问题
Sep 09 Javascript
JS实现百度搜索框关键字推荐
Feb 17 Javascript
vue 封装面包屑组件教程
Nov 16 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 self,$this,const,static,-&amp;gt;的使用
2009/10/22 PHP
PHP高级对象构建 多个构造函数的使用
2012/02/05 PHP
smarty模板中使用get、post、request、cookies、session变量的方法
2014/04/24 PHP
php 删除cookie方法详解
2014/12/01 PHP
PHP图像裁剪缩略裁切类源码及使用方法
2016/01/07 PHP
用tip解决Ext列宽度不够的问题
2008/12/13 Javascript
JSQL 批量图片切换的实现代码
2010/05/05 Javascript
基于jquery实现后台左侧菜单点击上下滑动显示
2013/04/11 Javascript
浅析JavaScript原型继承的陷阱
2013/12/03 Javascript
JavaScript将页面表格导出为Excel的具体实现
2013/12/27 Javascript
JSF中confirm弹出框的用法示例介绍
2014/01/07 Javascript
用jquery的方法制作一个简单的导航栏
2014/06/23 Javascript
springMVC结合AjaxForm上传文件
2016/07/12 Javascript
AngularJS基础 ng-include 指令示例讲解
2016/08/01 Javascript
Angular.js跨controller实现参数传递的两种方法
2017/02/20 Javascript
Vue的MVVM实现方法
2017/08/16 Javascript
webpack 模块热替换原理
2018/04/09 Javascript
如何利用@angular/cli V6.0直接开发PWA应用详解
2018/05/06 Javascript
jQuery实现为动态添加的元素绑定事件实例分析
2018/09/07 jQuery
vue实现与安卓、IOS交互的方法
2018/11/02 Javascript
小程序登录之支付宝授权的实现示例
2019/12/13 Javascript
利用Python命令行传递实例化对象的方法
2016/11/02 Python
python获取微信企业号打卡数据并生成windows计划任务
2019/04/30 Python
简单了解python的break、continue、pass
2019/07/08 Python
python实现批量修改文件名
2020/03/23 Python
详解Python中openpyxl模块基本用法
2021/02/23 Python
Bootstrap 学习分享
2012/11/12 HTML / CSS
Mio Skincare中文官网:肌肤和身体护理
2016/10/26 全球购物
SportsDirect.com新加坡:英国第一体育零售商
2019/03/30 全球购物
金融专业大学生职业生涯规划范文
2014/01/16 职场文书
课程改革实施方案
2014/03/16 职场文书
水利专业大学生职业生涯规划书范文
2014/09/17 职场文书
党的群众路线教育实践活动先进个人材料
2014/12/24 职场文书
2015年艾滋病防治工作总结
2015/05/22 职场文书
2016年小学“我们的节日·中秋节”活动总结
2016/04/05 职场文书
浅谈Java父子类加载顺序
2021/08/04 Java/Android