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服务工具类
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); } } import { Http, Response, RequestOptions, Headers } from '@angular/http';
import { Observable } from 'rxjs/Observable'; import 'rxjs/add/operator/catch'; import 'rxjs/add/operator/map'; import { Config } from "../app-config";
const options = new RequestOptions({ withCredentials: true, headers: new Headers({ 'X-Requested-With': 'XMLHttpRequest' }) });
@Injectable() export class HttpUtil { private baseUrl: any; constructor(private config: Config, private http: Http) { this.baseUrl = config.appConfig.baseUrl; }
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); }
}