Angular7 封装http请求

version 1 self-http.service.ts

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


  @Injectable()
  export class SelfHttpService {
    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);
        });
    }
  }

version 2 self-http.service.ts

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

@Injectable({
  providedIn: 'root'
})
export class SelfHttpService {

  restServer: string; // 默认为public
  http: any;

  constructor(Http: HttpClient) {
  this.http = Http;
  this.restServer = 'http://localhost';
}
public get(url: string, params?: Object, cb?: Function, options?: Object) {
let httpParams = new HttpParams();
console.log('get:start');

if (params) {
  for (const key in params) {
    if (params[key] === false || params[key]) {
      httpParams = httpParams.set(key, params[key]);
    }
  }
}


this.http.get(url, { headers: options, params: httpParams })
  .subscribe((res: any) => {
    console.log('get:end', res);
    cb(res);
  });
}

public post(url: string, data?: Object, cb?: Function, options?: Object) {
console.log('post:start');

this.http.post(url, data, options)
  .subscribe((res: any) => {
    console.log('post:end', res);
    cb(res);
  });
}

public put(url: string, data?: Object, cb?: Function, options?: Object) {
console.log('put:start');

this.http.put(url, data, options)
  .subscribe((res: any) => {
    console.log('put:end', res);
    cb(res);
  });
}

public delete(url: string, params?: Object, cb?: Function, options?: Object) {
let httpParams = new HttpParams();
console.log('delete:start');
if (params) {
  for (const key in params) {
    if (params[key]) {
      httpParams = httpParams.set(key, params[key]);
    }
  }
}
this.http.delete(url, { headers: options, params: httpParams })
  .subscribe((res: any) => {
    console.log('delete:end', res);
    cb(res);
  });
}
}

使用方法

const httpOptions = {
 headers: new HttpHeaders({
    'Content-Type': 'application/json'
 })
};


this.http.get('/api/******', keyword, res => {

  console.log('data', res);
}, httpOptions.headers.append('Authorization', this.token));