很多时候,我很喜欢angular的编码风格,特别是angular支持typescript之后,完整的生命周期,完美的钩子函数,都是别的语言所无法替代的。
这里我来说说我自己的网络请求封装,某种意义上来说,angular自己的网络请求封装的很好的,我们没有必要再来画蛇添足,但是,可能是我有那么一点点的代码洁癖吧,喜欢自己的风格样式,所以就有了这一点多余的东西。
Angular的网络请求
这里是angular自己的网络请求。
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请求和,数据处理分开了,代码的可读性和简洁性都有大大的提升。
进一步的封装方式
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持亿速云。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。