【完整版】封装Angular5的http请求

selfHttp.service.ts

import {Injectable} from '@angular/core';
import {HttpClient, HttpParams} from '@angular/common/http';

@Injectable()
export class selfHttp {
  public restServer;
  public http;

  constructor(Http: HttpClient) {
    this.http = Http;
    this.restServer = 'http://127.0.0.0/';
  }

  public get(url, params?: Object, cb?: Function) {
    let httpParams = new HttpParams();
    console.log('get开始请求');
    const vm = this;
    if (params) {
      for (const key in params) {
        if (params[key] === false || params[key]) {
          httpParams = httpParams.set(key, params[key]);
        }
      }
    }
    vm.http.get(vm.restServer + url, {params: httpParams})
      .subscribe(data => {
        console.log('get请求结束', data);
        cb(data);
      });
  }

  public post(url, data?: Object, cb?: Function, options?: Object) {
    console.log('post开始请求');
    const vm = this;
    vm.http.post(vm.restServer + url, data, options)
      .subscribe(res => {
        console.log('post请求结束', res);
        cb(res);
      });
  }

  public put(url, data?: Object, cb?: Function, options?: Object) {
    console.log('put开始请求');
    const vm = this;
    vm.http.put(vm.restServer + url, data, options)
      .subscribe(res => {
        console.log('put请求结束', res);
        cb(res);
      });
  }

  public delete(url, params?: Object, cb?: Function) {
    let httpParams = new HttpParams();
    console.log('delete开始请求');
    const vm = this;
    if (params) {
      for (const key in params) {
        if (params[key]) {
          httpParams = httpParams.set(key, params[key]);
        }
      }
    }
    vm.http.delete(vm.restServer + url, {params: httpParams})
      .subscribe(data => {
        console.log('delete请求结束', data);
        cb(data);
      });
  }
}

注：

1. 依赖于HttpClientModule
2. 在app.module.ts里注入服务（全局）

providers: [selfHttp]

使用方法：

import {selfHttp} from './../service/selfHttp';
@Component({
  selector: 'demo',
  templateUrl: './demo.html'
})
export class Demo {
  constructor(http:selfHttp) {
    http.get('/url', {}, res => {
        console.log('结果', res);
    });

    http.delete('/url', {}, res => {
        console.log('结果', res);
    });

    http.post('/url', data, res => {
        console.log('结果', res);
    }, options);

    http.put('/url', data, res => {
        console.log('结果', res);
    }, options);
  }
}

httpOptions请求头参数通过options传入（目前还没撸到这个，可能会有问题，后面做完记得来补充。）