当前位置:首页 >> 网络编程

Angular网络请求的封装方法

很多时候,我很喜欢angular的编码风格,特别是angular支持typescript之后,完整的生命周期,完美的钩子函数,都是别的语言所无法替代的。

这里我来说说我自己的网络请求封装,某种意义上来说,angular自己的网络请求封装的很好的,我们没有必要再来画蛇添足,但是,可能是我有那么一点点的代码洁癖吧,喜欢自己的风格样式,所以就有了这一点多余的东西。

Angular的网络请求

这里是angular自己的网络请求。

  1. url代表网络请求地址,
  2. param网络请求参数
  3. 网络请求配置,例如:请求头等
 this.http.post(url, param, config).subscribe(
   (res) => {
    //...请求成功
   }, (err) => {
    //...请求失败
   }, () => {
    //...请求完成
   }
  );

很多时候我觉得,每一次请求都要写上subscribe里面的那些参数,很麻烦,或者说看起来觉得不喜欢,所以,我一般给自己封装一个新的服务service。同时给每一个需要做网络请求的组件component实现一个新的接口interface,这里面有很多都是源自java语言的设计思想。

一个网络接口

这里创建一个网络接口,来完成网络请求的回调。

export interface OnHttpImp {

 onResult(result: HttpResult, code"htmlcode">
 public post(url: string, param: FormData, callback: OnHttpImp, code"color: #ff0000">调用的组件

先看代码:

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"color: #ff0000">进一步的封装方式

  1. 可以把上述里面component里面调用网络请求时传入的this,用一个统一的类MCallback来替代,统一处理返回的数据。
  2. 可以把所有的网络请求统一放到一个服务里面,通过调用方法名来请求,这样可以实现多次网络请求的耦合,但是个人觉得有点过度封装了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。