Angular網絡請求的封裝
很多時候,我很喜歡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來替代,統一處理返回的數據。
- 可以把所有的網絡請求統一放到一個服務裏面,通過調用方法名來請求,這樣可以實現多次網絡請求的耦合,但是個人覺得有點過度封裝了。
Angular網絡請求的封裝