Angular網(wǎng)絡(luò)請求的封裝方法

發(fā)布時間：2020-10-11 07:17:45 來源：腳本之家閱讀：147 作者：FreeSky 欄目：web開發(fā)

很多時候，我很喜歡angular的編碼風(fēng)格，特別是angular支持typescript之后，完整的生命周期，完美的鉤子函數(shù)，都是別的語言所無法替代的。

這里我來說說我自己的網(wǎng)絡(luò)請求封裝，某種意義上來說，angular自己的網(wǎng)絡(luò)請求封裝的很好的，我們沒有必要再來畫蛇添足，但是，可能是我有那么一點點的代碼潔癖吧，喜歡自己的風(fēng)格樣式，所以就有了這一點多余的東西。

Angular的網(wǎng)絡(luò)請求

這里是angular自己的網(wǎng)絡(luò)請求。

url代表網(wǎng)絡(luò)請求地址，
param網(wǎng)絡(luò)請求參數(shù)
網(wǎng)絡(luò)請求配置，例如：請求頭等

 this.http.post(url, param, config).subscribe(
   (res) => {
    //...請求成功
   }, (err) => {
    //...請求失敗
   }, () => {
    //...請求完成
   }
  );

很多時候我覺得，每一次請求都要寫上subscribe里面的那些參數(shù)，很麻煩，或者說看起來覺得不喜歡，所以，我一般給自己封裝一個新的服務(wù)service。同時給每一個需要做網(wǎng)絡(luò)請求的組件component實現(xiàn)一個新的接口interface，這里面有很多都是源自java語言的設(shè)計思想。

一個網(wǎng)絡(luò)接口

這里創(chuàng)建一個網(wǎng)絡(luò)接口，來完成網(wǎng)絡(luò)請求的回調(diào)。

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 接口創(chuàng)建三個方法，分別是onResult，onError和onComplete，其中onComplete和onError是非必需實現(xiàn)的，onResult是必須實現(xiàn)的。這里的三個函數(shù)用來完成http的三個回調(diào)。

那么，上面的網(wǎng)絡(luò)請求就可以移到新的服務(wù)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的實例，作用就是把網(wǎng)絡(luò)請求返回的數(shù)據(jù)回調(diào)到對應(yīng)的component里面，這樣就可以是數(shù)據(jù)處理和網(wǎng)絡(luò)請求相互分開。code是一個標(biāo)識符，用來區(qū)分在一個組件里面發(fā)送多個請求時，實現(xiàn)數(shù)據(jù)的隔離。

HttpResult是一個網(wǎng)絡(luò)請求返回數(shù)據(jù)的類，用來方便處理數(shù)據(jù)，可以適當(dāng)根據(jù)自己的數(shù)據(jù)返回類型進行自定義封裝。

調(diào)用的組件

先看代碼：

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 {
  //如果多個網(wǎng)絡(luò)請求，需要傳入code值，根據(jù)code值來判斷請求來源
  //swthch(code){
  //  case 100:
  //  
  //  break;
  //}
  
  // 如果單個請求，直接處理請求結(jié)果。
  // console.log(result)
  
 }
}

上面的htpp請求傳輸?shù)腛nHttpImp對象是this，那么就說明LoginComponnt組件必須實現(xiàn)OnHttpImp接口，然后實現(xiàn)里面的函數(shù)onResult，onError和onComplete.

這樣處理，就可以將http請求和，數(shù)據(jù)處理分開了，代碼的可讀性和簡潔性都有大大的提升。

進一步的封裝方式

可以把上述里面component里面調(diào)用網(wǎng)絡(luò)請求時傳入的this，用一個統(tǒng)一的類MCallback來替代，統(tǒng)一處理返回的數(shù)據(jù)。
可以把所有的網(wǎng)絡(luò)請求統(tǒng)一放到一個服務(wù)里面，通過調(diào)用方法名來請求，這樣可以實現(xiàn)多次網(wǎng)絡(luò)請求的耦合，但是個人覺得有點過度封裝了。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問一下細節(jié)

Angular網(wǎng)絡(luò)請求的封裝方法

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽