角度のHTTPサービスツールは、一つはV4.3のバージョン別のバージョンがV4.3になる前に/サービス後のhttpのHttpClientで、HTTPで角度/ HTTPサービス@位置角度/共通@置かれる2つのバージョンに分けることができます。具体的な違いは見ることができますhttps://www.cnblogs.com/54hsh/p/11490711.html
HTTPサービスツール1の下で、角度@ / HTTP
インポート
{注射}
から
「角度/コア@」
。
インポート
{HTTP、応答、RequestOptions、ヘッダ}
から
'@角度/ HTTP'
。
インポート
{観測}
から
「/ rxjs観測」
。
インポート
'rxjs /追加/オペレータ/キャッチ'
;
インポート
'rxjs / /オペレータ/マップを追加'
;
constの
オプション
=
新しい
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);
}
}