Angular网络请求的封装
很多時(shí)候,我很喜歡angular的編碼風(fēng)格,特別是angular支持typescript之后,完整的生命周期,完美的鉤子函數(shù),都是別的語言所無法替代的。
這里我來說說我自己的網(wǎng)絡(luò)請(qǐng)求封裝,某種意義上來說,angular自己的網(wǎng)絡(luò)請(qǐng)求封裝的很好的,我們沒有必要再來畫蛇添足,但是,可能是我有那么一點(diǎn)點(diǎn)的代碼潔癖吧,喜歡自己的風(fēng)格樣式,所以就有了這一點(diǎn)多余的東西。
Angular的網(wǎng)絡(luò)請(qǐng)求
這里是angular自己的網(wǎng)絡(luò)請(qǐng)求。
- url代表網(wǎng)絡(luò)請(qǐng)求地址,
- param網(wǎng)絡(luò)請(qǐng)求參數(shù)
- 網(wǎng)絡(luò)請(qǐng)求配置,例如:請(qǐng)求頭等
很多時(shí)候我覺得,每一次請(qǐng)求都要寫上subscribe里面的那些參數(shù),很麻煩,或者說看起來覺得不喜歡,所以,我一般給自己封裝一個(gè)新的服務(wù)service。同時(shí)給每一個(gè)需要做網(wǎng)絡(luò)請(qǐng)求的組件component實(shí)現(xiàn)一個(gè)新的接口interface,這里面有很多都是源自java語言的設(shè)計(jì)思想。
一個(gè)網(wǎng)絡(luò)接口
這里創(chuàng)建一個(gè)網(wǎng)絡(luò)接口,來完成網(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ù)用來完成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)求相互分開。code是一個(gè)標(biāo)識(shí)符,用來區(qū)分在一個(gè)組件里面發(fā)送多個(gè)請(qǐng)求時(shí),實(shí)現(xiàn)數(shù)據(jù)的隔離。
HttpResult是一個(gè)網(wǎng)絡(luò)請(qǐng)求返回?cái)?shù)據(jù)的類,用來方便處理數(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值來判斷請(qǐng)求來源//swthch(code){// case 100:// // break;//}// 如果單個(gè)請(qǐng)求,直接處理請(qǐng)求結(jié)果。// console.log(result)}}上面的htpp請(qǐng)求傳輸?shù)腛nHttpImp對(duì)象是this,那么就說明LoginComponnt組件必須實(shí)現(xiàn)OnHttpImp接口,然后實(shí)現(xiàn)里面的函數(shù)onResult,onError和onComplete.
這樣處理,就可以將http請(qǐng)求和,數(shù)據(jù)處理分開了,代碼的可讀性和簡潔性都有大大的提升。
進(jìn)一步的封裝方式
- 可以把上述里面component里面調(diào)用網(wǎng)絡(luò)請(qǐng)求時(shí)傳入的this,用一個(gè)統(tǒng)一的類MCallback來替代,統(tǒng)一處理返回的數(shù)據(jù)。
- 可以把所有的網(wǎng)絡(luò)請(qǐng)求統(tǒng)一放到一個(gè)服務(wù)里面,通過調(diào)用方法名來請(qǐng)求,這樣可以實(shí)現(xiàn)多次網(wǎng)絡(luò)請(qǐng)求的耦合,但是個(gè)人覺得有點(diǎn)過度封裝了。
更多專業(yè)前端知識(shí),請(qǐng)上 【猿2048】www.mk2048.com
總結(jié)
以上是生活随笔為你收集整理的Angular网络请求的封装的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 一个页面从输入URL到加载显示完成,发生
- 下一篇: jQuery的on绑定click和直接绑