Angular http服务工具类大致可以分为两个版本，一个是Angular4.3之前位于@angular/http下的Http服务，另一个是Angular4.3之后位于@angular/common/http下HttpClient服务。具体区别可查看 https://www.cnblogs.com/54hsh/p/11490711.html
1、Angular4.3之前@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、 Angular4.3之后 @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);
}
}
查看更多关于Angular http服务工具类的详细内容...