基于TypeScript的Angular6.X系列学习笔记- HttpClientModule-优快云博客

本文链接：https://blog.youkuaiyun.com/ChaITSimpleLove/article/details/82291778

本文详细介绍Angular中的HttpClient模块，包括其引入、注册及在组件中依赖注入的方法，同时演示了如何利用HttpClient实现RESTful API风格的CRUD操作，涵盖GET、POST、PUT、DELETE等请求方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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 */
private readonly baseUrl:string = '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: any) =>{ //【订阅|subscribe】
     /* get请求成功时的回调处理 */
     console.info(data);
  },(xhr: any) =>{
     /* get失败时返回 XMLHttpRequest 对象实例信息 */
     console.log(xhr.error.text); /* 输出错误文本信息 */
  });
}

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

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


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

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

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