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); /* 輸出錯誤文字資訊 */
  });
}

 後續將HttpClient封裝成Service服務，實現基本的CRUD操作；