為什么要封裝呢？
angular4自身提供的請(qǐng)求方法是用Observable來(lái)實(shí)現(xiàn)的焦匈。用的是觀察者模式岔帽，個(gè)人認(rèn)為這用來(lái)寫請(qǐng)求是非常方便的。
一個(gè)項(xiàng)目里會(huì)有非常多的不同的請(qǐng)求退渗，但是其實(shí)每個(gè)請(qǐng)求都會(huì)有些共性移稳。比如：每個(gè)請(qǐng)求都要傳Authorization，比如每個(gè)請(qǐng)求都要先判斷后臺(tái)返回的status字段為200時(shí)才是請(qǐng)求成功会油，后臺(tái)正真返回的數(shù)據(jù)在data字段里个粱，比如對(duì)于錯(cuò)誤信息的處理都是一樣的......等等。
所以我們需要封裝出一個(gè)請(qǐng)求翻翩，去統(tǒng)一處理這些問(wèn)題都许，從而保證組件里調(diào)用請(qǐng)求方法的時(shí)候收到的值都是可以直接拿來(lái)用的稻薇，幾乎不用再寫些重復(fù)的代碼。
希望封裝成什么樣呢胶征？
當(dāng)然是越少重復(fù)的代碼越好塞椎，我們就是想偷懶！＞Φ汀案狠！!
怎么實(shí)現(xiàn)呢？
首先先新建一個(gè)請(qǐng)求的service钱雷，文件名為：request.service.ts骂铁。然后跟著我來(lái)虛擬需求，一步一步的慢慢來(lái)完善這個(gè)service罩抗。
需求A
1.請(qǐng)求方式為get拉庵。
2.默認(rèn)的請(qǐng)求超時(shí)時(shí)間為3秒，可傳入別的超時(shí)時(shí)間套蒂。
3.后臺(tái)返回的成功的json為這樣：
{
"status": 200,
"data" : ...
}
錯(cuò)誤時(shí)這樣：
{
"status": 201,
"msg" : "用戶名或密碼錯(cuò)誤"
}
實(shí)現(xiàn)A
request.service.ts
/**
********************************************************************************************
* @App: test
* @author: isiico
* @type: service
* @src: services/request.service.ts
*
* @descriptions:
* 請(qǐng)求的服務(wù)
*
********************************************************************************************
*/
// Angular Core
import {Injectable} from '@angular/core';
import {HttpClient} from '@angular/common/http';
// rxjs
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/timeout';
import 'rxjs/add/observable/throw';
@Injectable()
export class RequestService {
private setTimeout = 3000; // 默認(rèn)的超時(shí)時(shí)間
constructor(private http:HttpClient) {
}
/** 獲取數(shù)據(jù)
* param: url string 必填,請(qǐng)求的url
* time number 可不填,請(qǐng)求的超時(shí)時(shí)間,如不填,默認(rèn)為setTimeout
* return: Observable HttpClient的get請(qǐng)求钞支，請(qǐng)求完成后返回的值類型是any
**/
public getData(url, time = this.setTimeout):Observable<any> {
let thiUrl = url; // 用到的url
let thisTime = time; // 用到的超時(shí)時(shí)間
return this.http.get(thiUrl)
.timeout(thisTime)
.map(res => this.resFun(res));
}
/** 返回?cái)?shù)據(jù)的處理
* param: data any 必填,需要處理的數(shù)據(jù)
* return: res any 返回處理后的值
**/
private resFun(data:any):any {
let thisData:any = data; // 需要處理的值
let res:any; // 最終值
// 當(dāng)status為200時(shí)
if (thisData['status'] == 200) {
res = thisData['data']; // 給最終值賦值
} else {
// 當(dāng)status不為200時(shí)
let err = thisData['msg']; // 錯(cuò)誤信息
throw new Error(err); // 拋出錯(cuò)誤
}
return res; // 返回最終值
}
}
需求B
1.為了安全，后臺(tái)要求請(qǐng)求的頭需要加上Authorization參數(shù)泣懊。
2.當(dāng)請(qǐng)求失敗（如404麻惶，500這種）時(shí)馍刮，處理好錯(cuò)誤信息，最后的錯(cuò)誤信息要像 實(shí)現(xiàn)A 里一樣窃蹋，是可以直接用的字符串類型的錯(cuò)誤信息卡啰。
實(shí)現(xiàn)B
request.service.ts （只展示新增的代碼，完整代碼后面有）
import 'rxjs/add/operator/catch';
@Injectable()
export class RequestService {
/** 添加Authorization的屬性 */
private addAuthorization(options:any):void {
options['headers'] = {
'Authorization': '1drf5dg4d7s4w7z',
};
}
/** 獲取數(shù)據(jù)
* param: url string 必填,請(qǐng)求的url
* time number 可不填,請(qǐng)求的超時(shí)時(shí)間,如不填,默認(rèn)為setTimeout
* return: Observable HttpClient的get請(qǐng)求警没，請(qǐng)求完成后返回的值類型是any
**/
public getData(url, time = this.setTimeout):Observable<any> {
let thiUrl = url; // 用到的url
let options = {}; // 請(qǐng)求的設(shè)置
let thisTime = time; // 用到的超時(shí)時(shí)間
this.addAuthorization(options); // 請(qǐng)求頭里添加Authorization參數(shù)
return this.http.get(thiUrl, options)
.timeout(thisTime)
.catch(this.httpErrorFun) // 處理錯(cuò)誤信息(必須放在timeout和map之間)
.map(res => this.resFun(res));
}
/** 對(duì)請(qǐng)求錯(cuò)誤信息的處理
* param: err any 必填,需要處理的錯(cuò)誤信息
* return: Observable.throw Observable<string> string:處理后顯示的錯(cuò)誤文字
**/
public httpErrorFun(err:any):Observable<string> {
let res:string = ''; // 處理后的結(jié)果
let data:any = err; // 需要處理的值
/** 后臺(tái)有返回錯(cuò)誤信息時(shí) */
if (data.hasOwnProperty('error') && data.hasOwnProperty('message')) {
res = data.message;
/** 后臺(tái)沒(méi)有返回錯(cuò)誤信息只有錯(cuò)誤名時(shí) */
} else if (data.hasOwnProperty('name')) {
let errName = data.name;
/** 請(qǐng)求超時(shí) */
if (errName == 'TimeoutError') {
res = '對(duì)不起匈辱，請(qǐng)求超時(shí)了';
}
/** 后臺(tái)返回未授權(quán)時(shí) */
} else if (data == "Unauthorization") {
res = '您沒(méi)有權(quán)限，請(qǐng)重新登錄';
} else {
res = "哎呀杀迹，不知道是啥錯(cuò)誤~~";
}
return Observable.throw(res);
}
}
完整的request service 代碼
request.service.ts
/**
********************************************************************************************
* @App: test
* @author: isiico
* @type: service
* @src: services/request.service.ts
*
* @descriptions:
* 請(qǐng)求的服務(wù)
*
********************************************************************************************
*/
// Angular Core
import {Injectable} from '@angular/core';
import {HttpClient} from '@angular/common/http';
// rxjs
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/timeout';
import 'rxjs/add/observable/throw';
import 'rxjs/add/operator/catch';
@Injectable()
export class RequestService {
private setTimeout:number = 3000; // 默認(rèn)的超時(shí)時(shí)間
constructor(private http:HttpClient) {
}
/** 添加Authorization的屬性 */
private addAuthorization(options:any):void {
options['headers'] = {
'Authorization': '1drf5dg4d7s4w7z',
};
}
/** 獲取數(shù)據(jù)
* param: url string 必填,請(qǐng)求的url
* time number 可不填,請(qǐng)求的超時(shí)時(shí)間,如不填,默認(rèn)為setTimeout
* return: Observable HttpClient的get請(qǐng)求亡脸，請(qǐng)求完成后返回的值類型是any
**/
public getData(url, time = this.setTimeout):Observable<any> {
let thiUrl = url; // 用到的url
let options = {}; // 請(qǐng)求的設(shè)置
let thisTime = time; // 用到的超時(shí)時(shí)間
this.addAuthorization(options); // 請(qǐng)求頭里添加Authorization參數(shù)
return this.http.get(thiUrl, options)
.timeout(thisTime)
.catch(this.httpErrorFun) // 處理錯(cuò)誤信息(必須放在timeout和map之間)
.map(res => this.resFun(res));
}
/** 返回?cái)?shù)據(jù)的處理
* param: data any 必填,需要處理的數(shù)據(jù)
* return: res any 返回處理后的值
**/
private resFun(data:any):any {
let thisData:any = data; // 需要處理的值
let res:any; // 最終值
// 當(dāng)status為200時(shí)
if (thisData['status'] == 200) {
res = thisData['data']; // 給最終值賦值
} else {
// 當(dāng)status不為200時(shí)
let err = thisData['msg']; // 錯(cuò)誤信息
throw new Error(err); // 拋出錯(cuò)誤
}
return res; // 返回最終值
}
/** 對(duì)請(qǐng)求錯(cuò)誤信息的處理
* param: err any 必填,需要處理的錯(cuò)誤信息
* return: Observable.throw Observable<string> string:處理后顯示的錯(cuò)誤文字
**/
public httpErrorFun(err:any):Observable<string> {
let res:string = ''; // 處理后的結(jié)果
let data:any = err; // 需要處理的值
/** 后臺(tái)有返回錯(cuò)誤信息時(shí) */
if (data.hasOwnProperty('error') && data.hasOwnProperty('message')) {
res = data.message;
/** 后臺(tái)沒(méi)有返回錯(cuò)誤信息只有錯(cuò)誤名時(shí) */
} else if (data.hasOwnProperty('name')) {
let errName = data.name;
/** 請(qǐng)求超時(shí) */
if (errName == 'TimeoutError') {
res = '對(duì)不起，請(qǐng)求超時(shí)了';
}
/** 后臺(tái)返回未授權(quán)時(shí) */
} else if (data == "Unauthorization") {
res = '您沒(méi)有權(quán)限树酪，請(qǐng)重新登錄';
} else {
res = "哎呀浅碾，不知道是啥錯(cuò)誤~~";
}
return Observable.throw(res);
}
}
小結(jié)
至此，我們已經(jīng)完成了一個(gè)滿足基本需求的续语，可以公共使用的請(qǐng)求服務(wù)垂谢，接下來(lái)我們來(lái)看怎么在組件內(nèi)調(diào)用。
調(diào)用
我們有個(gè)叫l(wèi)ist的組件疮茄，要調(diào)用get請(qǐng)求滥朱，請(qǐng)求成功顯示數(shù)據(jù)根暑，請(qǐng)求失敗，顯示錯(cuò)誤信息徙邻。
list.component.ts
/**
********************************************************************************************
* @App: test
* @author: isiico
* @type: component
* @src: components/list.component.ts
*
* @descriptions:
* list組件
*
********************************************************************************************
*/
// Angular Core
import { Component, OnInit } from '@angular/core';
// Services
import { RequestService } from "../services/request.service";
@Component({
moduleId: module.id,
templateUrl: 'list.component.html'
})
export class ListComponent implements OnInit {
listApi = '/assets/mock-data/list.json'; // 列表的api地址
list:Array<any>; // 列表數(shù)據(jù)(類型為數(shù)組)
listErrMsg: string = ''; // 列表請(qǐng)求的錯(cuò)誤信息
constructor(private req: RequestService) {
}
/** 獲取list */
getList(){
this.listErrMsg = ''; // 清空錯(cuò)誤信息
// 發(fā)送請(qǐng)求
this.req.getData(this.cabinetListApi)
.subscribe(
res=>{
// 請(qǐng)求成功
this.cabinets = [];
this.cabinets = res;
},err=>{
// 請(qǐng)求失敗
this.cabinets = [];
this.listErrMsg = err;
})
}
ngOnInit() {
this.getList();
}
}
頁(yè)面的顯示自己去完成吧排嫌！
據(jù)量子力學(xué)得到，點(diǎn)贊這篇文章的人都會(huì)成為歐皇鹃栽，從此過(guò)著開(kāi)心幸福的生活??躏率。
