Angular 添加 HttpClient - TypeScript

Angular 具有内置的 HTTP 客户端模块，使得与 Web 服务器进行通信非常方便。可以使用这个模块来发起 HTTP 请求并处理响应。

在本文中，我们将介绍如何在 Angular 应用程序中添加 HttpClient，并使用 TypeScript 发起 HTTP 请求。

第一步 - 安装 HttpClient 模块

首先，我们需要安装 HttpClient 模块。使用以下命令安装它：

npm install @angular/common@latest @angular/compiler@latest @angular/core@latest @angular/platform-browser@latest @angular/platform-browser-dynamic@latest rxjs@latest --save

第二步 - 引入 HttpClient 模块

在我们的 Angular 应用程序中，我们需要引入 HttpClient 模块，以便在组件中使用它。我们可以在我们的 app.module.ts 文件中引入它，如下所示：

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

@NgModule({
  imports: [
    // 其他引入的模块
    HttpClientModule
  ],
  // 其他配置
})
export class AppModule { }

第三步 - 创建 HTTP 请求

现在我们已经安装了并引入了 HttpClient 模块，我们可以在我们的组件中创建我们的第一个 HTTP 请求了。

我们可以使用 HttpClient 服务来发起 HTTP 请求。在这个例子中，我们将发起一个 GET 请求。将以下代码添加到你的组件中：

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  template: `
    <h1>HTTP 请求中 ...</h1>
  `
})
export class AppComponent {
  private apiURL = 'https://jsonplaceholder.typicode.com/todos/1';

  constructor(private http: HttpClient) { }

  ngOnInit() {
    this.http.get(this.apiURL).subscribe((res) => {
      console.log(res);
    });
  }
}

在上述代码中，我们创建了一个 apiUrl 变量，它包含我们要发起请求的 URL。然后在组件的构造函数中注入了 HttpClient 服务，并在 ngOnInit() 生命周期钩子函数中发起了 HTTP GET 请求。

第四步 - 处理 HTTP 响应

我们已经成功发起了 HTTP 请求，现在我们需要处理响应。在 subscribe() 方法中，我们可以访问响应的数据。可以使用 console.log() 方法将数据打印到控制台上。像这样:

this.http.get(this.apiURL).subscribe((res) => {
  console.log(res);
});

现在，如果我们打开浏览器的控制台，我们将看到响应数据。像这样:

{ "userId": 1, "id": 1, "title": "delectus aut autem", "completed": false }

结论

现在，我们已经了解了如何在 Angular 应用程序中添加 HttpClient，并使用 TypeScript 发起 HTTP 请求。这使我们可以与 Web 服务器进行通信，并处理响应数据。这为我们提供了一个方便的方式，与远程 API 进行通信，处理数据以及更新我们的应用程序视图。