angular 入坑记录的笔记第四篇，介绍在 angular 中如何通过 HttpClient 类发起 http 请求，从而完成与后端的数据交互。
对应官方文档地址：
Angular HttpClient
配套代码地址：angular-practice/src/http-guide
二、ContentsAngular 从入坑到弃坑 - Angular 使用入门
Angular 从入坑到挖坑 - 组件食用指南
Angular 从入坑到挖坑 - 表单控件概览
三、Knowledge Graph在前端项目与后端进行数据交互时，绝大多数都是通过 HTTP 协议进行的，现代浏览器支持两种方式向后端发起 HTTP 请求：XMLHttpRequest 和 fetch
在以前的项目中，通常使用 jquery 的简化版 ajax 请求向后端请求数据，归根到底最终还是通过 XMLHttpRequest 与后端进行数据交互
在 Angular 中， 为了简化 XMLHttpRequest 的使用，框架提供了 HttpClient 类来封装 HTTP API，用来实现前端与后端的数据交互。
在使用之前，首先需要在应用的根模块中，引入 HttpClientModule 模块，并添加到 imports 数组中
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; // 添加对于 HttpClientModule 模块的引用 import { HttpClientModule } from '@angular/common/http'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AppRoutingModule, HttpClientModule // 添加到根应用模块中 ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }在需要使用到的地方，引入 HttpClient 类，然后通过依赖注入的方式注入到应用类中
在通常情况下，我们需要将与后端进行交互的行为封装成服务，在这个服务中完成对于获取到的数据的处理，之后再注入到需要使用该服务的组件中，从而确保组件中仅仅包含的是必要的业务逻辑行为
import { Injectable } from '@angular/core'; // 引入 HttpClient 类 import { HttpClient } from '@angular/common/http'; @Injectable({ providedIn: 'root' }) export class AntiMotivationalQuotesServicesService { // 通过构造函数注入的方式依赖注入到使用的类中 constructor(private http: HttpClient) { } } import { Component, OnInit } from '@angular/core'; // 引入服务 import { AntiMotivationalQuotesServicesService } from './../services/anti-motivational-quotes-services.service'; @Component({ selector: 'app-anti-motivational-quotes', templateUrl: './anti-motivational-quotes.component.html', styleUrls: ['./anti-motivational-quotes.component.scss'] }) export class AntiMotivationalQuotesComponent implements OnInit { // 通过构造函数注入的方式使用服务 constructor(private services: AntiMotivationalQuotesServicesService) { } ngOnInit(): void { } } 4.1.2、从服务端获取数据这里使用到的后端接口是掘金上一位朋友开发的毒鸡汤接口（https://api.tryto.cn/djt/text），所有权归属于小咸鱼丶
通过使用 postman 进行接口调用可以发现，接口返回的响应信息如下
在项目中创建一个接口，按照后端返回的数据信息进行属性的定义，用来映射请求的响应信息（Angular 只能将请求响应对象转换成接口类型，不能自动转换成类实例）
ng g interface interfaces/get-quotes-response-model export interface GetQuotesResponseModel { /** * 接口响应码 */ code: number; /** * 响应信息 */ msg: string; /** * 响应数据 */ data: ResponseData; /** * 响应时间 */ time: number; } /** * 接口响应的内容信息 */ interface ResponseData { /** * 毒鸡汤 */ content: string; /** * 热度 */ hots: number; }在服务中，引入请求响应对象的接口定义，然后设定 get 请求的响应对象为 GetQuotesResponseModel，之后在使用时就可以以一种结构化数据的方式获取请求返回的数据信息
import { Injectable } from '@angular/core'; import { Observable } from 'rxjs'; // 引入 HttpClient 类 import { HttpClient } from '@angular/common/http'; // 引入接口响应类 import { GetQuotesResponseModel } from '../interfaces/get-quotes-response-model'; @Injectable({ providedIn: 'root' }) export class AntiMotivationalQuotesServicesService { // 通过构造函数注入的方式依赖注入到使用的类中 constructor(private http: HttpClient) { } /** * 通过 get 请求获取毒鸡汤信息 */ getAntiMotivationalQuotes(): Observable<GetQuotesResponseModel> { const url = 'http://api.tryto.cn/djt/text'; return this.http.get<GetQuotesResponseModel>(url); } }