很多时候，我很喜欢Angular的编码风格，尤其是Angular支持TypeScript之后，完整的生命周期和完善的hook函数是其他语言无法替代的。这里我就说说我自己的网络请求封装。从某种意义上说，Angular自身的网络请求封装非常好。我们不需要给蛇添加更多的东西。但是，可能是我有一点代码清洁度。我喜欢。自己的stylestyle，所以多了这个小东西。Angular的网络请求这里是angular自己的网络请求。url表示网络请求地址，param网络请求参数网络请求配置，例如：requestfirstclassthis.http.post(url,param,config).subscribe((res)=>{//...请求成功},(err)=>{//...请求失败},()=>{//...请求完成});很多时候觉得每次请求都在subscribe里面写参数很麻烦，或者说不喜欢，所以一般都是自己打包一个新服务。同时为每一个需要进行网络请求的组件实现了一个新的接口interface，其中有很多是源于java语言的设计思想。一个网络接口在这里创建一个网络接口，完成网络请求的回调。exportinterfaceOnHttpImp{onResult(result:HttpResult,code?:number):void;onError？（错误：任何）：无效；onComplete?():void;}exportclassHttpResult{code?:number;数据？：任何；msg?:string;}OnHttpImp接口创建了三个方法，分别是onResult、onError和onComplete，其中onComplete和onError不需要实现，但是onResult必须实现。这里的三个函数用来完成http的三个回调。那么，上面的网络请求就可以移到新的服务CommonService中，变成这样：publicpost(url:string,param:FormData,callback:OnHttpImp,code?:number){url=Config.base+url;constheaders=newHeaders();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是一个OnHttpImpInstance，作用是将网络请求返回的数据回调给对应的组件，这样就可以把数据处理和网络请求分开其他。code是组件中发送多个请求时用来区分数据隔离的标识。HttpResult是一个网络请求返回数据的类，用于方便数据处理，可以根据自身的数据返回类型进行自定义封装。调用的组件先看代码：exportclassLoginComponentimplementsOnInit,OnHttpImp{publicvalidateForm:FormGroup;公共用户名_control：AbstractControl；公共密码控制：抽象控制；constructor(privatefb:FormBuilder,privatehttp:HttpUtil){}ngOnInit(){this.validateForm=this.fb.group({'userName':[null,[Validators.required]],'password':[null,[Validators.required]]，记住：[true],});this.username_control=this.validateForm.controls['userName'];this.password_control=this.validateForm.controls['密码'];}_submitForm(){constparams=newFormData();constmd5=newMd5();constpassword=md5.appendStr(this.password_control.value).end();params.set('用户名',this.username_control.value);params.set('密码',password.toString());this.http.post('/user/login',params,this);}onResult(result:HttpResult,code?:number):void{//如果多个网络请求，需要传入code值，根据code值判断请求来源//swthch(code){//case100:////break;//}//如果是单个请求，直接处理请求结果//console.log(result)}}上面的htpp请求传输的OnHttpImp对象是this，也就是说LoginComponent组件必须实现OnHttpImp接口，并且然后实现里面的onResult、onError、onComplete函数。这样就可以将http请求和数据处理分开，代码的可读性和简洁性都有了很大的提升。进一步的封装方式可以将上述组件中调用网络请求时传入的this替换成统一的类MCallback，统一处理返回的数据。可以把所有的网络请求放到一个服务中，通过调用方法名请求，可以实现多个网络请求的耦合，但是个人觉得有点过度封装了。
