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 相关文章推荐
获取URL地址中的文件名和参数的javascript代码
Sep 02 Javascript
javascript仿qq界面的折叠菜单实现代码
Dec 12 Javascript
jQuery 的全选(全非选)即取得被选中的值使用介绍
Nov 12 Javascript
Javascript实现可旋转的圆圈实例代码
Aug 04 Javascript
js查看一个函数的执行时间实例代码
Sep 12 Javascript
JavaScript的instanceof运算符学习教程
Jun 08 Javascript
基于javascript实现数字英文验证码
Jan 25 Javascript
angularjs使用directive实现分页组件的示例
Feb 07 Javascript
babel之配置文件.babelrc入门详解
Feb 22 Javascript
Vue2 轮播图slide组件实例代码
May 31 Javascript
vue3.0 CLI - 2.2 - 组件 home.vue 的初步改造
Sep 14 Javascript
原理深度解析Vue的响应式更新比React快
Apr 04 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
php比较两个绝对时间的大小
2014/01/31 PHP
用 Composer构建自己的 PHP 框架之基础准备
2014/10/30 PHP
php截取视频指定帧为图片
2016/05/16 PHP
php实现不通过扩展名准确判断文件类型的方法【finfo_file方法与二进制流】
2017/04/18 PHP
javascript 面向对象编程 聊聊对象的事
2009/09/17 Javascript
JQuery扩展插件Validate 5添加自定义验证方法
2011/09/05 Javascript
js获取和设置属性的方法
2014/02/20 Javascript
JavaScript中操作Mysql数据库实例
2015/04/02 Javascript
javascript中attachEvent用法实例分析
2015/05/14 Javascript
jquery实现标题字体变换的滑动门菜单效果
2015/09/07 Javascript
JavaScript拖拽、碰撞、重力及弹性运动实例分析
2016/01/08 Javascript
理解javascript中Map代替循环
2016/02/26 Javascript
JQueryEasyUI之DataGrid数据显示
2016/11/23 Javascript
AngularJS中update两次出现$promise属性无法识别的解决方法
2017/01/05 Javascript
详解js前端代码异常监控
2017/01/11 Javascript
微信小程序后台解密用户数据实例详解
2017/06/28 Javascript
微信小程序获取用户openid的实现
2018/12/24 Javascript
微信小程序实现的自定义分享功能示例
2019/02/12 Javascript
python基础入门详解(文件输入/输出 内建类型 字典操作使用方法)
2013/12/08 Python
python实现xlsx文件分析详解
2018/01/02 Python
python读取excel指定列数据并写入到新的excel方法
2018/07/10 Python
pyqt5 删除layout中的所有widget方法
2019/06/25 Python
Python 实现opencv所使用的图片格式与 base64 转换
2020/01/09 Python
python实现输入三角形边长自动作图求面积案例
2020/04/12 Python
搭建pypi私有仓库实现过程详解
2020/11/25 Python
几个CSS3的flex弹性盒模型布局的简单例子演示
2016/05/12 HTML / CSS
StubHub中国:购买和出售全球活动门票
2020/01/01 全球购物
Crocs欧洲官网:Crocs Europe
2020/01/14 全球购物
腾讯公司的一个sql题
2013/01/22 面试题
思想汇报范文
2013/11/04 职场文书
自荐信格式
2013/12/01 职场文书
选秀节目策划方案
2014/06/06 职场文书
安全环保标语
2014/06/09 职场文书
党旗在我心中演讲稿
2014/09/15 职场文书
本科毕业论文指导教师评语
2014/12/30 职场文书
教你用Python写一个植物大战僵尸小游戏
2021/04/25 Python