Angular网络请求的封装
很多时候,我很喜欢angular的编码风格,特别是angular支持typescript之后,完整的生命周期,完美的钩子函数,都是别的语言所无法替代的。
这里我来说说我自己的网络请求封装,某种意义上来说,angular自己的网络请求封装的很好的,我们没有必要再来画蛇添足,但是,可能是我有那么一点点的代码洁癖吧,喜欢自己的风格样式,所以就有了这一点多余的东西。
Angular的网络请求
这里是angular自己的网络请求。
- url代表网络请求地址,
- param网络请求参数
- 网络请求配置,例如:请求头等
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请求和,数据处理分开了,代码的可读性和简洁性都有大大的提升。
进一步的封装方式
- 可以把上述里面component里面调用网络请求时传入的this,用一个统一的类MCallback来替代,统一处理返回的数据。
- 可以把所有的网络请求统一放到一个服务里面,通过调用方法名来请求,这样可以实现多次网络请求的耦合,但是个人觉得有点过度封装了。
更多专业前端知识,请上 【猿2048】www.mk2048.com
Angular网络请求的封装相关推荐
- 浅谈Angular网络请求
在Angular网络请求是一个最常见的应用之一,下列我将以 ng-alain 项目为基础描述 Angular 网络请求. 注:示例中代码都以简化的形式出现. 写在前面 Angular发起一个请求再简单 ...
- network/request.js网络请求模块封装
网络请求模块封装 import axios from "axios"; //引入axios模块export function request(config) {//1,创建axio ...
- Android肝帝战纪之网络请求框架封装(Retrofit的封装)
网络请求框架封装(OkHttp3+Retrofit+loading的封装) Retrofit的Github链接 点此链接到Github AVLoadingIndicatorView的Github链接( ...
- android xutils json请求,Android Xutils3网络请求的封装详解及实例代码
Xutils3网络请求的封装详解 封装了一个Xutil3的网络请求工具类,分享给大家,本人水平有限,不足之处欢迎指出. 使用前先配置xutils3: 1.gradle中添加 compile 'org. ...
- 基于猿题库网络请求再次封装
下载地址: https://github.com/weibo1314/WB_NeiApiManager WB_NetApiManager 介绍 ===================== 最近闲来无 ...
- 项目优化-Http网络请求的封装
代码写习惯了,不自觉的就有一种心理:这块应该怎样才能迁移利用,这块怎么写才能够看起来舒服一点,等等等.其实归根结底就是我们喜欢"懒",不喜欢烦.看见那些冗余的和一遍遍重复书写的代码 ...
- jq封装post请求数据_GitHub - xiaohange/JQHttpRequest: GET/POST / PUT / DELETE 网络请求的封装...
JQHttpRequest 前言 JQHttpRequest:目前二次封装网络库支持四种请求:GET.POST.PUT.DELETE较常见的请求,HEAD/PATH/COPY/OPTIONS/LINK ...
- Swift项目,超美的动画和tableView,collectionView,轮播图的使用,网络请求的封装等
<一>项目介绍: 这是一个Swift语言的项目,但是其中也有使用一些OC的三方库,比SDWebImage.WebViewJavascriptBridge等,同时实现了基本App的框架功能, ...
- (iOS-框架封装)AFN3.x 网络请求封装
AFNetworking 我项目里面的网络请求是一外包大牛基于AFN2.x封装的基本网络请求,感觉其封装的贼好,对服务端返回的错误码统一处理,对返回的 json 数据下发给每个继承自基本网络请求的子网 ...
最新文章
- python储存数据的容器_Python基础四容器类数据
- ospf cost 引起路由可以ping通但应用无法连接_路由算法(通网五)
- HDLBits 系列(7)对for循环以及generate for的各种实践
- mysql数据采集中间件_开源 | MySQL数据传输中间件—DTLE
- 【PHP】多线程请求 curl_multi_init()
- 使用jqprint插件完成页面打印
- C10K 非阻塞 Web 服务器
- Tomcat绑定jre
- 枚举基类Enum详解
- php客户订单管理系统,PHP订单管理系统完整版源码PHP订单管理系统完整版源码
- Python Excel教程之如何将多个 excel 文件合并为一个文件(教程含源码)
- 象棋马走日正解判定表实现步数计算
- esp32 cam 与安卓app蓝牙通讯
- html中如何显示代码样式方法
- [C]验证哥德巴赫猜想(输入一个偶数始终等于两个素数之和,附个人编写的代码)
- 猴子搬香蕉Java实现,儿童编程游戏CodeMonkey,让你的小猴子不停地吃香蕉
- Elasticsearch权限控制
- 基于Keil的nRF52840新建工程
- python学习36:给IDLE添加行号(采用IDLEX的LineNumbers.py)python3.8也可以用(亲测有效)
- 达梦dexp/dimp导出owner和schema的区别
热门文章
- 安卓手机背景变黑色怎么改_别着急扔掉旧手机 你的电脑可能需要它
- 洛谷 P2463 [SDOI2008]Sandy的卡片 解题报告
- python内建时间模块 time和datetime
- spring-service.xml 模板
- Fastest way to duplicate mongodb collection
- 构建之法---初识篇(软件工程师的成长和两人合作)
- 搭建struts2框架
- paip.C#.NET多线程访问 toolStripStatusLabel
- Kali Linux下安装VMware
- 计算机知识点小报,制作电脑小报的教案