Angular网络请求的封装
|
很多时候，我很喜欢angular的编码风格，特别是angular支持typescript之后，完整的生命周期，完美的钩子函数，都是别的语言所无法替代的。 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,{}).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,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请求和，数据处理分开了，代码的可读性和简洁性都有大大的提升。 进一步的封装方式
（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |