首頁  >  文章  >  web前端  >  如何進行Angular網路請求封裝

如何進行Angular網路請求封裝

php中世界最好的语言
php中世界最好的语言原創
2018-05-28 12:00:271525瀏覽

這次帶給大家如何進行Angular網路請求封裝,進行Angular網路請求封裝的注意事項有哪些,以下就是實戰案例,一起來看一下。

這裡我來說說我自己的網路請求封裝,某種意義上來說,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?: 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請求和,資料處理分開了,程式碼的可讀性和簡潔性都有大大的提升。

進一步的封裝方式

  1. #可以把上述裡面component裡面呼叫網路請求時傳入的this,用一個統一的類別MCallback來替代,統一處理回傳的資料。

  2. 可以把所有的網路請求統一放到一個服務裡面,透過呼叫方法名稱來請求,這樣可以實現多次網路請求的耦合,但是個人覺得有點過度封裝了。

相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

怎麼使用nodejs express設定自簽名https伺服器

怎麼用mpvue建立小程式

以上是如何進行Angular網路請求封裝的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn