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請求和，數據處理分開了，代碼的可讀性和簡潔性都有大大的提高。

進一步的封裝方式

• 能夠把上述裏面component裏面調用網絡請求時傳入的this，用一個統一的類MCallback來替代，統一處理返回的數據。
• 能夠把全部的網絡請求統一放到一個服務裏面，經過調用方法名來請求，這樣能夠實現屢次網絡請求的耦合，可是我的以爲有點過分封裝了。