許多時刻，我很喜好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要乞降，數據處置懲罰離開了，代碼的可讀性和簡潔性都有大大的提拔。

進一步的封裝體式格局

• 能夠把上述內里component內里挪用收集要求時傳入的this，用一個一致的類MCallback來替換，一致處置懲罰返回的數據。
• 能夠把一切的收集要求一致放到一個效勞內里，經由過程挪用要領名來要求，如許能夠完成屢次收集要求的耦合，然則個人以為有點過分封裝了。