Angular http服务工具类

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

    }

}