标签：http url baseUrl params error return 工具 Angular

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

标签：http,url,baseUrl,params,error,return,工具,Angular
来源： https://www.cnblogs.com/54hsh/p/11512818.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。