溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
很多時候，我很喜歡angular的編碼風格，特別是angular支持typescript之后，完整的生命周期，完美的鉤子函數，都是別的語言所無法替代的。
這里我來說說我自己的網絡請求封裝，某種意義上來說，angular自己的網絡請求封裝的很好的，我們沒有必要再來畫蛇添足，但是，可能是我有那么一點點的代碼潔癖吧，喜歡自己的風格樣式，所以就有了這一點多余的東西。
Angular的網絡請求
這里是angular自己的網絡請求。
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請求和，數據處理分開了，代碼的可讀性和簡潔性都有大大的提升。
進一步的封裝方式
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
