這次帶給大家如何進行Angular網路請求封裝，進行Angular網路請求封裝的注意事項有哪些，以下就是實戰案例，一起來看一下。
這裡我來說說我自己的網路請求封裝，某種意義上來說，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來替代，統一處理回傳的資料。
可以把所有的網路請求統一放到一個服務裡面，透過呼叫方法名稱來請求，這樣可以實現多次網路請求的耦合，但是個人覺得有點過度封裝了。
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
怎麼使用nodejs express設定自簽名https伺服器
以上是如何進行Angular網路請求封裝的詳細內容。更多資訊請關注PHP中文網其他相關文章！
