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);
}
}
