Angular网络请求的封装方法


Posted in Javascript onMay 22, 2018

很多时候,我很喜欢angular的编码风格,特别是angular支持typescript之后,完整的生命周期,完美的钩子函数,都是别的语言所无法替代的。

这里我来说说我自己的网络请求封装,某种意义上来说,angular自己的网络请求封装的很好的,我们没有必要再来画蛇添足,但是,可能是我有那么一点点的代码洁癖吧,喜欢自己的风格样式,所以就有了这一点多余的东西。

Angular的网络请求

这里是angular自己的网络请求。

  1. url代表网络请求地址,
  2. param网络请求参数
  3. 网络请求配置,例如:请求头等
this.http.post(url, param, config).subscribe(
   (res) => {
    //...请求成功
   }, (err) => {
    //...请求失败
   }, () => {
    //...请求完成
   }
  );

很多时候我觉得,每一次请求都要写上subscribe里面的那些参数,很麻烦,或者说看起来觉得不喜欢,所以,我一般给自己封装一个新的服务service。同时给每一个需要做网络请求的组件component实现一个新的接口interface,这里面有很多都是源自java语言的设计思想。

一个网络接口

这里创建一个网络接口,来完成网络请求的回调。

export interface OnHttpImp {

 onResult(result: HttpResult, code?: number): void;

 onError?(err:any): void;

 onComplete?(): void;
}

export class HttpResult {
 code?: number;
 data?: any;
 msg?: string;
}

OnHttpImp 接口创建三个方法,分别是onResult,onError和onComplete,其中onComplete和onError是非必需实现的,onResult是必须实现的。这里的三个函数用来完成http的三个回调。

那么,上面的网络请求就可以移到新的服务CommonService里面,就会变成这样:

public post(url: string, param: FormData, callback: OnHttpImp, code?: number) {
  url = Config.base + url;
  const headers = new Headers();
  headers.append('Content-Type', 'application/x-www-form-urlencoded');
  this.http.post(url, param, {}).subscribe(
   (res) => {
    if (code) {
     callback.onResult(res, code);
    } else {
     callback.onResult(res);
    }
   }, (err) => {
    console.log(url + '===>' + JSON.stringify(err));
   }, () => {
    if (callback.onComplete) {
     callback.onComplete();
    }
   }
  );
 }

这里面的url和param就不用多解释了,callback就是一个OnHttpImp的实例,作用就是把网络请求返回的数据回调到对应的component里面,这样就可以是数据处理和网络请求相互分开。code是一个标识符,用来区分在一个组件里面发送多个请求时,实现数据的隔离。

HttpResult是一个网络请求返回数据的类,用来方便处理数据,可以适当根据自己的数据返回类型进行自定义封装。

调用的组件

先看代码:

export class LoginComponent implements OnInit, OnHttpImp {
 public validateForm: FormGroup;
 public username_control: AbstractControl;
 public password_control: AbstractControl;

 constructor(private fb: FormBuilder,
       private http: HttpUtil) {
 }

 ngOnInit() {
  this.validateForm = this.fb.group({
   'userName': [null, [Validators.required]],
   'password': [null, [Validators.required]],
   remember: [true],
  });
  this.username_control = this.validateForm.controls['userName'];
  this.password_control = this.validateForm.controls['password'];
 }


 _submitForm() {
  const params = new FormData();
  const md5 = new Md5();
  const password = md5.appendStr(this.password_control.value).end();
  params.set('username', this.username_control.value);
  params.set('password', password.toString());
  this.http.post('/user/login', params, this);
 }

 onResult(result: HttpResult, code?: number): void {
  //如果多个网络请求,需要传入code值,根据code值来判断请求来源
  //swthch(code){
  //  case 100:
  //  
  //  break;
  //}
  
  // 如果单个请求,直接处理请求结果。
  // console.log(result)
  
 }
}

上面的htpp请求传输的OnHttpImp对象是this,那么就说明LoginComponnt组件必须实现OnHttpImp接口,然后实现里面的函数onResult,onError和onComplete.

这样处理,就可以将http请求和,数据处理分开了,代码的可读性和简洁性都有大大的提升。

进一步的封装方式

  1. 可以把上述里面component里面调用网络请求时传入的this,用一个统一的类MCallback来替代,统一处理返回的数据。
  2. 可以把所有的网络请求统一放到一个服务里面,通过调用方法名来请求,这样可以实现多次网络请求的耦合,但是个人觉得有点过度封装了。

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

Javascript 相关文章推荐
JS中==与===操作符的比较
Mar 21 Javascript
编写Js代码要注意的几条规则
Sep 10 Javascript
jquery图片延迟加载 前端开发技能必备系列
Jun 18 Javascript
jQuery实现可拖动的浮动层完整代码
May 27 Javascript
document.addEventListener使用介绍
Mar 07 Javascript
js使用for循环及if语句判断多个一样的name
Sep 09 Javascript
浅谈jQuery操作类数组的工具方法
Dec 23 Javascript
jQuery插件zTree实现删除树节点的方法示例
Mar 08 Javascript
angularjs中的$eval方法详解
Apr 24 Javascript
利用JavaScript的%做隔行换色的实例
Nov 25 Javascript
利用jQuery+localStorage实现一个简易的计时器示例代码
Dec 25 jQuery
JavaScript进阶(四)原型与原型链用法实例分析
May 09 Javascript
vue input输入框模糊查询的示例代码
May 22 #Javascript
vue 中swiper的使用教程
May 22 #Javascript
vue配置多页面的实现方法
May 22 #Javascript
vue.js使用v-model指令实现的数据双向绑定功能示例
May 22 #Javascript
详解js类型判断
May 22 #Javascript
vue.js过滤器+ajax实现事件监听及后台php数据交互实例
May 22 #Javascript
swiper 自动图片无限轮播实现代码
May 21 #Javascript
You might like
PHP5.3与5.5废弃与过期函数整理汇总
2014/07/10 PHP
php在数组中查找指定值的方法
2015/03/17 PHP
Iframe thickbox2.0使用的方法
2009/03/05 Javascript
基于jquery的商品展示放大镜
2010/08/07 Javascript
禁止IE用右键的JS代码
2013/12/30 Javascript
通过Jquery的Ajax方法读取将table转换为Json
2014/05/31 Javascript
js+canvas绘制矩形的方法
2016/01/28 Javascript
jquery插件autocomplete用法示例
2016/07/01 Javascript
每个程序员都需要学习 JavaScript 的7个理由小结
2016/09/03 Javascript
Javascript数组中push方法用法分析
2016/10/31 Javascript
使用DeviceOne实现微信小程序功能
2016/12/29 Javascript
js实现楼层导航功能
2017/02/23 Javascript
手机端转换rem适应
2017/04/01 Javascript
Bootstrap Tree View简单而优雅的树结构组件实例解析
2017/06/15 Javascript
JavaScript页面倒计时功能完整示例
2019/05/15 Javascript
vue如何实现自定义底部菜单栏
2019/07/01 Javascript
手机浏览器唤起微信分享(JS)
2020/10/11 Javascript
[03:40]2014DOTA2国际邀请赛 B神专访:躲箭真的很难
2014/07/13 DOTA
[44:01]2018DOTA2亚洲邀请赛3月30日 小组赛B组 EG VS paiN
2018/03/31 DOTA
python使用MySQLdb访问mysql数据库的方法
2015/08/03 Python
python 生成器生成杨辉三角的方法(必看)
2017/04/10 Python
selenium python浏览器多窗口处理代码示例
2018/01/15 Python
mac下如何将python2.7改为python3
2018/07/13 Python
一个可以套路别人的python小程序实例代码
2019/04/09 Python
Python 硬币兑换问题
2019/07/29 Python
Python 变量的创建过程详解
2019/09/02 Python
实现Python3数组旋转的3种算法实例
2020/09/16 Python
CSS3 简写animation
2012/05/10 HTML / CSS
Elizabeth Gage官网:英国最好的珠宝设计之一
2020/09/26 全球购物
简单的JAVA编程面试题
2013/03/19 面试题
幼师自荐信范文
2013/10/06 职场文书
我爱我校演讲稿
2014/05/21 职场文书
2014年个人年终总结
2015/03/09 职场文书
MYSQL数据库使用UTF-8中文编码乱码的解决办法
2021/05/26 MySQL
Django实现drf搜索过滤和排序过滤
2021/06/21 Python
Python实现将多张图片合成MP4视频并加入背景音乐
2022/04/28 Python