很多時候，我很喜歡angular的編碼風格，特別是angular支持typescript之后，完整的生命周期，完美的鉤子函數(shù)，都是別的語言所無法替代的。
這里我來說說我自己的網(wǎng)絡請求封裝，某種意義上來說，angular自己的網(wǎng)絡請求封裝的很好的，我們沒有必要再來畫蛇添足，但是，可能是我有那么一點點的代碼潔癖吧，喜歡自己的風格樣式，所以就有了這一點多余的東西。
Angular的網(wǎng)絡請求
這里是angular自己的網(wǎng)絡請求。
this.http.post(url, param, config).subscribe( (res) => { //...請求成功 }, (err) => { //...請求失敗 }, () => { //...請求完成 } );很多時候我覺得，每一次請求都要寫上subscribe里面的那些參數(shù)，很麻煩，或者說看起來覺得不喜歡，所以，我一般給自己封裝一個新的服務service。同時給每一個需要做網(wǎng)絡請求的組件component實現(xiàn)一個新的接口interface，這里面有很多都是源自java語言的設計思想。
一個網(wǎng)絡接口
這里創(chuàng)建一個網(wǎng)絡接口，來完成網(wǎng)絡請求的回調。
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的三個回調。
那么，上面的網(wǎng)絡請求就可以移到新的服務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)絡請求返回的數(shù)據(jù)回調到對應的component里面，這樣就可以是數(shù)據(jù)處理和網(wǎng)絡請求相互分開。code是一個標識符，用來區(qū)分在一個組件里面發(fā)送多個請求時，實現(xiàn)數(shù)據(jù)的隔離。
HttpResult是一個網(wǎng)絡請求返回數(shù)據(jù)的類，用來方便處理數(shù)據(jù)，可以適當根據(jù)自己的數(shù)據(jù)返回類型進行自定義封裝。
調用的組件
先看代碼：
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)絡請求，需要傳入code值，根據(jù)code值來判斷請求來源 //swthch(code){ // case 100: // // break; //} // 如果單個請求，直接處理請求結果。 // console.log(result) }}上面的htpp請求傳輸?shù)腛nHttpImp對象是this，那么就說明LoginComponnt組件必須實現(xiàn)OnHttpImp接口，然后實現(xiàn)里面的函數(shù)onResult，onError和onComplete.
這樣處理，就可以將http請求和，數(shù)據(jù)處理分開了，代碼的可讀性和簡潔性都有大大的提升。
進一步的封裝方式
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點
疑難解答
