很多時(shí)候，我很喜歡angular的編碼風(fēng)格，特別是angular支持typescript之后，完整的生命周期，完美的鉤子函數(shù)，都是別的語(yǔ)言所無(wú)法替代的。

這里我來(lái)說(shuō)說(shuō)我自己的網(wǎng)絡(luò)請(qǐng)求封裝，某種意義上來(lái)說(shuō)，angular自己的網(wǎng)絡(luò)請(qǐng)求封裝的很好的，我們沒(méi)有必要再來(lái)畫(huà)蛇添足，但是，可能是我有那么一點(diǎn)點(diǎn)的代碼潔癖吧，喜歡自己的風(fēng)格樣式，所以就有了這一點(diǎn)多余的東西。

Angular的網(wǎng)絡(luò)請(qǐng)求

這里是angular自己的網(wǎng)絡(luò)請(qǐng)求。

1. url代表網(wǎng)絡(luò)請(qǐng)求地址，
2. param網(wǎng)絡(luò)請(qǐng)求參數(shù)
3. 網(wǎng)絡(luò)請(qǐng)求配置，例如：請(qǐng)求頭等

 this.http.post(url, param, config).subscribe(
 (res) => {
 //...請(qǐng)求成功
 }, (err) => {
 //...請(qǐng)求失敗
 }, () => {
 //...請(qǐng)求完成
 }
 );

很多時(shí)候我覺(jué)得，每一次請(qǐng)求都要寫(xiě)上subscribe里面的那些參數(shù)，很麻煩，或者說(shuō)看起來(lái)覺(jué)得不喜歡，所以，我一般給自己封裝一個(gè)新的服務(wù)service。同時(shí)給每一個(gè)需要做網(wǎng)絡(luò)請(qǐng)求的組件component實(shí)現(xiàn)一個(gè)新的接口interface，這里面有很多都是源自java語(yǔ)言的設(shè)計(jì)思想。

一個(gè)網(wǎng)絡(luò)接口

這里創(chuàng)建一個(gè)網(wǎng)絡(luò)接口，來(lái)完成網(wǎng)絡(luò)請(qǐng)求的回調(diào)。

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)建三個(gè)方法，分別是onResult，onError和onComplete，其中onComplete和onError是非必需實(shí)現(xiàn)的，onResult是必須實(shí)現(xiàn)的。這里的三個(gè)函數(shù)用來(lái)完成http的三個(gè)回調(diào)。

那么，上面的網(wǎng)絡(luò)請(qǐng)求就可以移到新的服務(wù)CommonService里面，就會(huì)變成這樣：

 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就是一個(gè)OnHttpImp的實(shí)例，作用就是把網(wǎng)絡(luò)請(qǐng)求返回的數(shù)據(jù)回調(diào)到對(duì)應(yīng)的component里面，這樣就可以是數(shù)據(jù)處理和網(wǎng)絡(luò)請(qǐng)求相互分開(kāi)。code是一個(gè)標(biāo)識(shí)符，用來(lái)區(qū)分在一個(gè)組件里面發(fā)送多個(gè)請(qǐng)求時(shí)，實(shí)現(xiàn)數(shù)據(jù)的隔離。

HttpResult是一個(gè)網(wǎng)絡(luò)請(qǐng)求返回?cái)?shù)據(jù)的類，用來(lái)方便處理數(shù)據(jù)，可以適當(dāng)根據(jù)自己的數(shù)據(jù)返回類型進(jìn)行自定義封裝。

調(diào)用的組件

先看代碼：

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 {
 //如果多個(gè)網(wǎng)絡(luò)請(qǐng)求，需要傳入code值，根據(jù)code值來(lái)判斷請(qǐng)求來(lái)源
 //swthch(code){
 // case 100:
 // 
 // break;
 //}
 
 // 如果單個(gè)請(qǐng)求，直接處理請(qǐng)求結(jié)果。
 // console.log(result)
 
 }
}

上面的htpp請(qǐng)求傳輸?shù)腛nHttpImp對(duì)象是this，那么就說(shuō)明LoginComponnt組件必須實(shí)現(xiàn)OnHttpImp接口，然后實(shí)現(xiàn)里面的函數(shù)onResult，onError和onComplete.

這樣處理，就可以將http請(qǐng)求和，數(shù)據(jù)處理分開(kāi)了，代碼的可讀性和簡(jiǎn)潔性都有大大的提升。

進(jìn)一步的封裝方式

1. 可以把上述里面component里面調(diào)用網(wǎng)絡(luò)請(qǐng)求時(shí)傳入的this，用一個(gè)統(tǒng)一的類MCallback來(lái)替代，統(tǒng)一處理返回的數(shù)據(jù)。
2. 可以把所有的網(wǎng)絡(luò)請(qǐng)求統(tǒng)一放到一個(gè)服務(wù)里面，通過(guò)調(diào)用方法名來(lái)請(qǐng)求，這樣可以實(shí)現(xiàn)多次網(wǎng)絡(luò)請(qǐng)求的耦合，但是個(gè)人覺(jué)得有點(diǎn)過(guò)度封裝了。

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com