首先先新建一个请求的service,文件名为:request.service.ts。然后跟着我来虚拟需求,一步一步的慢慢来完善这个service

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
 ********************************************************************************************
* @App: test
* @author: zhenhualiu
* @type: service
* @src: services/request.service.ts
*
* @descriptions:
* 请求的服务
*
********************************************************************************************
*/
// 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; // 默认的超时时间

constructor(private http:HttpClient) {
}

/** 添加Authorization的属性 */
private addAuthorization(options:any):void {
options['headers'] = {
'Authorization': '1drf5dg4d7s4w7z',
};
}

/** 获取数据
* param: url string 必填,请求的url
* time number 可不填,请求的超时时间,如不填,默认为setTimeout
* return: Observable HttpClient的get请求,请求完成后返回的值类型是any
**/
public getData(url, time = this.setTimeout):Observable<any> {
let thiUrl = url; // 用到的url
let options = {}; // 请求的设置
let thisTime = time; // 用到的超时时间
this.addAuthorization(options); // 请求头里添加Authorization参数
return this.http.get(thiUrl, options)
.timeout(thisTime)
.catch(this.httpErrorFun) // 处理错误信息(必须放在timeout和map之间)
.map(res => this.resFun(res));
}

/** 返回数据的处理
* param: data any 必填,需要处理的数据
* return: res any 返回处理后的值
**/
private resFun(data:any):any {
let thisData:any = data; // 需要处理的值
let res:any; // 最终值

// 当status为200时
if (thisData['status'] == 200) {
res = thisData['data']; // 给最终值赋值
} else {
// 当status不为200时
let err = thisData['msg']; // 错误信息
throw new Error(err); // 抛出错误
}
return res; // 返回最终值
}

/** 对请求错误信息的处理
* param: err any 必填,需要处理的错误信息
* return: Observable.throw Observable<string> string:处理后显示的错误文字
**/
public httpErrorFun(err:any):Observable<string> {
let res:string = ''; // 处理后的结果
let data:any = err; // 需要处理的值

/** 后台有返回错误信息时 */
if (data.hasOwnProperty('error') && data.hasOwnProperty('message')) {
res = data.message;

/** 后台没有返回错误信息只有错误名时 */
} else if (data.hasOwnProperty('name')) {
let errName = data.name;

/** 请求超时 */
if (errName == 'TimeoutError') {
res = '对不起,请求超时了';
}

/** 后台返回未授权时 */
} else if (data == "Unauthorization") {
res = '您没有权限,请重新登录';
} else {
res = "哎呀,不知道是啥错误~~";
}

return Observable.throw(res);
}
}

在组件中使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
listApi = 'http://10.10.1.130:57046/espentefficiency/aePowerMeter24hrecords/find24HourElectricity';  // 列表的api地址
list:Array<any>; // 列表数据(类型为数组)
listErrMsg: string = ''; // 列表请求的错误信息
/** 获取list */
getList(){
this.listErrMsg = ''; // 清空错误信息

// // 发送请求
this.req.getData(this.listApi).subscribe(res=>{
// 请求成功
console.log(res)
this.list = [];
this.list = res;
console.log(this.list)
},err=>{
// 请求失败
this.list = [];
this.listErrMsg = err;
console.log(this.listErrMsg)
})
// this.http.get(this.listApi,{}).subscribe((res)=>{
// console.log(res)
// })

}

具体项目中需要带token,这就要设置请求头的Authorization的属性,将token添加在这个属性中就行了

1
2
3
4
5
6
options['headers'] = {
'Content-Type': 'application/json',
'Authorization': 'Bearer ' + localStorage.getItem('currentUser'),
};

<!-- localStorage.getItem 获取本地存储的token -->