Angular http服务工具类大致可以分为两个版本,一个是v4.3版本之前位于@angular/http下的Http服务,另一个是v4.3版本之后位于@angular/common/http下HttpClient服务。具体区别可查看https://www.cnblogs.com/54hsh/p/11490711.html
1、@angular/http下的Http服务工具类
import { Injectable }
from
"@angular/core";
import { Http, Response, RequestOptions, Headers }
from
'@angular/http';
import { Observable }
from
'rxjs/Observable';
import
'rxjs/add/operator/catch';
import
'rxjs/add/operator/map';
const options
=
new
RequestOptions({
withCredentials:
true,
headers:
new
Headers({
'X-Requested-With':
'XMLHttpRequest' })
});
@
Injectable()
export
class
HttpUtil {
private baseUrl
:
any;
constructor(
private
http
:
Http) {
this.baseUrl
=
'http://localhost:8080';
}
get(
url
:
string) {
console.
log(
'发送get请求,url:', url)
url
=
this.baseUrl
+ url;
return
this.http.
get(url, options)
.
map(
this.extractData)
.
catch(
this.handleError);
}
post(
url
:
string,
params
?:
any) {
console.
log(
'发送post请求,url:', url,
',params:', params);
url
=
this.baseUrl
+ url;
return
this.http.
post(url, params, options)
.
map(
this.extractData)
.
catch(
this.handleError);
}
put(
url
:
string,
params
?:
any) {
console.
log(
'发送put请求,url:', url,
',params:', params);
url
=
this.baseUrl
+ url;
return
this.http.
put(url, params, options)
.
map(
this.extractData)
.
catch(
this.handleError);
}
delete(
url
:
string) {
console.
log(
'发送delete请求,url:', url);
url
=
this.baseUrl
+ url;
return
this.http.
delete(url, options)
.
map(
this.extractData)
.
catch(
this.handleError);
}
postForm(
url
:
string,
params
?:
any) {
let formData
:
FormData
=
new
FormData();
formData.
append(
'username', params.username);
formData.
append(
'password', params.password);
return
this.
post(url, formData);
}
private
extractData(
response
:
Response) {
console.
log(
'提取数据:', response);
let body
= response.
json();
return body
|| {};
}
private
handleError(
error
:
Response
|
any) {
let errMsg
:
string;
if (error
instanceof
Response) {
const body
= error.
json()
||
'';
const err
= body.error
||
JSON.
stringify(body);
errMsg
=
`
${error.status
}
-
${error.statusText
||
''
}
${err
}
`;
}
else {
errMsg
= error.message
? error.message
: error.
toString();
}
console.
error(
'异常信息:', errMsg);
return Observable.
throw(errMsg);
}
}
2、@angular/common/http下的HttpClient服务工具类
import { Injectable }
from
"@angular/core";
import { HttpClient, HttpHeaders }
from
'@angular/common/http';
import { Observable }
from
'rxjs';
import { map, catchError }
from
'rxjs/operators';
const options
= {
headers:
new
HttpHeaders({
'Content-Type':
'application/json'})
}
@
Injectable()
export
class
HttpClientUtil {
private baseUrl
:
any;
constructor(
private
httpClient
:
HttpClient) {
this.baseUrl
=
'http://localhost:8080';
}
public
get(
url
:
string) {
console.
log(
'发送get请求,url:', url);
url
=
this.baseUrl
+ url;
return
this.httpClient.
get(url, options)
.
pipe(
map(
this.extractData),
catchError(
this.handleError));
}
public
post(
url
:
string,
params
?:
any) {
console.
log(
'发送post请求,url:', url,
',params:', params);
url
=
this.baseUrl
+ url;
return
this.httpClient.
post(url, params, options)
.
pipe(
map(
this.extractData),
catchError(
this.handleError));
}
public
put(
url
:
string,
params
?:
any) {
console.
log(
'发送put请求,url:', url,
',params:', params);
url
=
this.baseUrl
+ url;
return
this.httpClient.
put(url, params, options)
.
pipe(
map(
this.extractData),
catchError(
this.handleError));
}
public
delete(
url
:
string) {
console.
log(
'发送delete请求,url:', url);
url
=
this.baseUrl
+ url;
return
this.httpClient.
delete(url, options)
.
pipe(
map(
this.extractData),
catchError(
this.handleError));
}
postForm(
url
:
string,
params
?:
any) {
let formData
:
FormData
=
new
FormData();
formData.
append(
'username', params.username);
formData.
append(
'password', params.password);
return
this.
post(url, formData);
}
private
extractData(
response
:
Response) {
console.
log(
'提取数据:', response);
let data
= response.
json();
return data
|| {};
}
private
handleError(
error
:
Response
|
any) {
let errMsg
:
string;
if (error
instanceof
Response) {
const data
= error.
json()
||
'';
const err
= data.toString
||
JSON.
stringify(data);
errMsg
=
`
${error.status
}
-
${error.statusText
||
''
}
${err
}
`;
}
else {
errMsg
= error.message
? error.message
: error.
toString();
}
console.
error(
'异常处理:', errMsg);
return Observable.
throw(errMsg);
}
}