Angular網絡請求的封裝

weij 發布于2019-08-02 10:28 / 1016人閱讀

摘要：的網絡請求這里是自己的網絡請求。是一個網絡請求返回數據的類，用來方便處理數據，可以適當根據自己的數據返回類型進行自定義封裝。

很多時候，我很喜歡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來替代，統一處理返回的數據。

可以把所有的網絡請求統一放到一個服務里面，通過調用方法名來請求，這樣可以實現多次網絡請求的耦合，但是個人覺得有點過度封裝了。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/52372.html

Angular網絡請求的封裝

摘要：的網絡請求這里是自己的網絡請求。是一個網絡請求返回數據的類，用來方便處理數據，可以適當根據自己的數據返回類型進行自定義封裝。很多時候，我很喜歡angular的編碼風格，特別是angular支持typescript之后，完整的生命周期，完美的鉤子函數，都是別的語言所無法替代的。這里我來說說我自己的網絡請求封裝，某種意義上來說，angular自己的網絡請求封裝的很好的，我們沒有必要再來畫...

YanceyOfficial 2019-08-22 17:25 評論0 收藏0
前端知識點總結——Angular

摘要：前端知識點總結一概述基于命令行的開發方式編譯工作集成了打包工具。。。。在瀏覽器中接管展現應用的內容，并根據我們提供的操作指令響應用戶的交互。在開發時，八大組成部分模塊組件模板自帶的標簽指令綁定相關的的語法元數據告訴如何處理一個類。前端知識點總結——Angular 一、Angular概述基于命令行的開發方式？ ①hot reload ②編譯工作 ③集成了webpack打包工具。。。...

BaronZhang 2019-08-22 16:01 評論0 收藏0
Angular開發實踐（六）：服務端渲染

摘要：在服務端渲染方面提供一套前后端同構解決方案，它就是統一平臺，一項在服務端運行應用的技術。這些著陸頁是純，并且即使被禁用了也能顯示。它會把客戶端請求轉換成服務端渲染的頁面。它是服務端渲染器和你的應用之間的橋梁。 Angular Universal Angular在服務端渲染方面提供一套前后端同構解決方案，它就是 Angular Universal（統一平臺），一項在服務端運行 Angul...

Eirunye 2019-08-22 15:51 評論0 收藏0
前端每周清單：Node.js 微服務實踐，Vue.js 與 GraphQL，Angular 組件技巧

摘要：前端每周清單第期微服務實踐，與，組件技巧，攻防作者王下邀月熊編輯徐川前端每周清單專注前端領域內容，以對外文資料的搜集為主，幫助開發者了解一周前端熱點分為新聞熱點開發教程工程實踐深度閱讀開源項目巔峰人生等欄目。前端每周清單第 26 期：Node.js 微服務實踐，Vue.js 與 GraphQL，Angular 組件技巧，HeadlessChrome 攻防作者：王下邀月熊編輯：徐川...

wall2flower 2019-08-21 11:55 評論0 收藏0