Angular网络请求的封装方法

来源：懂视网责编：小采时间：2020-11-27 22:14:09

Angular网络请求的封装方法

Angular网络请求的封装方法:很多时候，我很喜欢angular的编码风格，特别是angular支持typescript之后，完整的生命周期，完美的钩子函数，都是别的语言所无法替代的。这里我来说说我自己的网络请求封装，某种意义上来说，angular自己的网络请求封装的很好的，我们没有必要再来画蛇添足

推荐度：

点击下载本文 文档为doc格式

导读Angular网络请求的封装方法:很多时候，我很喜欢angular的编码风格，特别是angular支持typescript之后，完整的生命周期，完美的钩子函数，都是别的语言所无法替代的。这里我来说说我自己的网络请求封装，某种意义上来说，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请求和，数据处理分开了，代码的可读性和简洁性都有大大的提升。

进一步的封装方式