基于TypeScript的Angular6.X系列学习笔记- HttpClientModule

1.HttpClient 介绍：

 是Angular中提供的简化版的API，用来实现HTTP客户端功能，它基于浏览器的XMLHttpRequest接口，通过HTTP协议实现前端应用和后端服务器的通讯，HttpClient在@angular/common/http中；

2.使用HttpClient：

   2.1在app.module.ts中引入HttpClientModule； 

import { HttpClientModule } from '@angular/common/http'; /* 引入HttpClientModule  */

   2.2在app.module.ts中注册HttpClientModule；   

import { NgModule }         from '@angular/core';
import { BrowserModule }    from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http'; /* 引入HttpClientModule */

@NgModule({
  imports: [
    BrowserModule,
    /* 在BrowserModule之后导入HttpClientModule模块，注册声明；*/
    HttpClientModule,
  ],
  declarations: [
    AppComponent,
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

  2.3 在需要使用的组件中依赖注入HttpClient；  

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http'; /* 注意组件中的名称 HttpClient */

@Injectable()
export class ConfigService {
  /* 构造函数中依赖注入 HttpClient */
  constructor(private http: HttpClient) { }
}

3.基于 HttpClient 实现【RESTful API】风格的CRUD【POST新增、DELETE删除、GET查询、PUT修改】；

  3.1默认数据交互格式JSON数据，基本应用代码实例如下所示：

/* 测试api的url，格式：http://ipAddress:port/api/version/controller/actionCode */
baseUrl = 'http://xxx.xxx.xxx.xxx:端口号/api/v1';

/* 1.HttpClient 的【get】实现 */
doGet(){
  /* 服务端对应接口使用了路由映射处理，请求url对应格式如下 */
  let getUrl = this.baseUrl + "/" + controller + "/" + actionCode + "/" + data;
  this.http.get(getUrl)
  .subscribe(data =>{
     /* get请求成功时的回调处理 */
     console.info(data);
  },xhr =>{
     /* get失败时返回 XMLHttpRequest 对象实例信息 */
     console.log(xhr.error.text); /* 输出错误文本信息 */
  });
}

/* 2.HttpClient 的【Post】实现 */
doPost(){
  this.http.post(this.baseUrl)
  .subscribe(data =>{
     /* post请求成功时的回调处理 */
     console.info(data);
  },xhr =>{
     /* post失败时返回 XMLHttpRequest 对象实例信息 */
     console.log(xhr.error.text); /* 输出错误文本信息 */
  });
}

/* 3.HttpClient 的【Put】实现 */
doPut(){
  this.http.put(this.baseUrl)
  .subscribe(data =>{
     /* put请求成功时的回调处理 */
     console.info(data);
  },xhr =>{
     /* put失败时返回 XMLHttpRequest 对象实例信息 */
     console.log(xhr.error.text); /* 输出错误文本信息 */
  });
}


/* 4.HttpClient 的【Delete】实现 */
doDelete(){
  this.http.delete(this.baseUrl)
  .subscribe(data =>{
     /* delete请求成功时的回调处理 */
     console.info(data);
  },xhr =>{
     /* delete失败时返回 XMLHttpRequest 对象实例信息 */
     console.log(xhr.error.text); /* 输出错误文本信息 */
  });
}

 更多 XMLHttpRequest 信息： https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest 

 后续将HttpClient封装成Service服务，实现基本的CRUD操作；