HttpClient创建和封装,使用

按照惯例直接上代码

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable, of } from 'rxjs';

import { Apis } from './Api';

/**
 * 封装http服务
 */
@Injectable()
export class HttpService {
    // 注入httpClient
    constructor(private httpClient: HttpClient) { }

    public httpOptions = {
        headers: new HttpHeaders({
            'Content-Type': 'application/json;charset=UTF-8',
            'Authorization': 'my-auth-token',
            'token': 'bat'
        })
    };

    public request(url, body, httpOptions, success: Function, error: Function) {
        return this.httpClient.post(url, body).subscribe(data => {
            success(data);
        }, error => {
            let msg = this.requestFailed(url, httpOptions, error);
            error(error, msg);
        });
    }


    public posts(url: string, body: any | null, success: Function = (data) => { }, error: Function = (error, msg) => { }) {
        return this.request(url, body, this.httpOptions, success, error);
    }


    /**
     * 获取Api
     * 
     * @param null 
     */
    public getApi(): any {
        return Apis;
    }
    /**
    * get请求
    * @param {string} url
    * @return {Observable<Object>}
    */
    public get(url: string): Observable<Object> {
        console.log(url);
        return this.httpClient.get(url);
    }
    /**
    * post请求
    * @param {string} url
    * @param body
    * @return {Observable<Object>}
    */
    public post(url: string, body: any | null): Observable<Object> {
        return this.httpClient.post(url, body);
    }

    /**
     * 文件上传
     * @param {string} url
     * @param $event
     * @param {string} fileKey
     * @param obj
     * @return {Observable<Object>}
     */
    upload(url: string, $event, fileKey: string, ...obj: any[]): Observable<Object> {
        const files = $event.target.files || $event.srcElement.files;
        const formData = new FormData();
        for (let i = 0; i < files.length; i++) {
            formData.append(fileKey, files[i]);
        }
        if (obj) {
            console.log(JSON.stringify(obj));
            for (let i = 0; i < obj.length; i++) {
                console.log(JSON.stringify(obj[i]));
                // 这里拼接对象
                // formData.append("obj", obj[i].value);
            }
        }
        return this.httpClient.post(url, formData);
    }

    /**
   * 处理请求失败事件
   * @param url
   * @param options
   * @param err
   */
    private requestFailed(url: string, options, err) {
        let msg = '请求发生异常', status = err.status;
        if (status === 0) {
            msg = '请求失败，请求响应出错';
        } else if (status === 404) {
            msg = '请求失败，未找到请求地址';
        } else if (status === 500) {
            msg = '请求失败，服务器出错，请稍后再试';
        } else {
            msg = "未知错误，请检查网络";
        }

        return msg;

    }
}

以上是完整的代码写完后在app.module.ts 里面注册

使用：

在使用的页面先要引入：

在请求数据的地方写

  this.httpService.posts(Apiconfig.miniproSpecialPage, param, (data) => {
   		console.log(data);

    }, function (msg, err) {

     	 	console.log(msg, err);
    });
  }

如果是使用没有封装的 post

   this.httpService.post(Apiconfig.microNumCategory, param).subscribe((data: any) => {
      console.log(data);

    },(error:any)=>{
      console.log(121212121221);
    });

觉得可以就给个赞呗。