单网页网站扒站工具,跑腿小程序开发,网址输入入口,在南昌市做网站到哪很多时候#xff0c;我很喜欢angular的编码风格#xff0c;特别是angular支持typescript之后#xff0c;完整的生命周期#xff0c;完美的钩子函数#xff0c;都是别的语言所无法替代的。这里我来说说我自己的网络请求封装#xff0c;某种意义上来说#xff0c;angular自…很多时候我很喜欢angular的编码风格特别是angular支持typescript之后完整的生命周期完美的钩子函数都是别的语言所无法替代的。这里我来说说我自己的网络请求封装某种意义上来说angular自己的网络请求封装的很好的我们没有必要再来画蛇添足但是可能是我有那么一点点的代码洁癖吧喜欢自己的风格样式所以就有了这一点多余的东西。
Angular的网络请求
这里是angular自己的网络请求。
url代表网络请求地址param网络请求参数网络请求配置例如请求头等
this.http.post(url, param, config).subscribe((res) gt; {//...请求成功}, (err) gt; {//...请求失败}, () gt; {//...请求完成});
很多时候我觉得每一次请求都要写上subscribe里面的那些参数很麻烦或者说看起来觉得不喜欢所以我一般给自己封装一个新的服务service。同时给每一个需要做网络请求的组件component实现一个新的接口interface这里面有很多都是源自java语言的设计思想。
一个网络接口
这里创建一个网络接口来完成网络请求的回调。 export interface OnHttpImp {onResult(result: HttpResult, code?: number): void;onError?(errany): void;onComplete?(): void;
}export class HttpResult {code?: number;data?: any;msg?: string;
}
OnHttpImp 接口创建三个方法分别是onResultonError和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) gt; {if (code) {callback.onResult(res, code);} else {callback.onResult(res);}}, (err) gt; {console.log(url gt; JSON.stringify(err));}, () gt; {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接口然后实现里面的函数onResultonError和onComplete.
这样处理就可以将http请求和数据处理分开了代码的可读性和简洁性都有大大的提升。
进一步的封装方式
可以把上述里面component里面调用网络请求时传入的this用一个统一的类MCallback来替代统一处理返回的数据。可以把所有的网络请求统一放到一个服务里面通过调用方法名来请求这样可以实现多次网络请求的耦合但是个人觉得有点过度封装了。
更多专业前端知识请上
【猿2048】www.mk2048.com
