22 HTTP客户端之使用HTTP模块

在上一篇中，我们讨论了表单处理与表单控件，深入了解了如何在 Angular 应用中管理用户输入。现在，我们将转向 HTTP 模块，学习如何通过它与后端进行交互，发送和接收数据。使用 HTTP 模块，我们可以轻松地实现网络请求，从而构建动态的单页面应用。

1. 引入 HTTP 模块

在 Angular 中使用 HTTP 客户端，首先需要在项目中引入 HttpClientModule。通常这一步在应用的主模块文件 app.module.ts 中完成：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule  // 引入 HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. 创建 HTTP 服务

接下来，我们需要创建一个服务，用于封装所有的 HTTP 请求。这使得我们在组件中可以简单地调用这些服务方法。可以使用 Angular CLI 创建服务：

ng generate service data

服务 data.service.ts 可以如下实现：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { User } from './user.model'; // 假设我们有个 User 模型

@Injectable({
  providedIn: 'root',
})
export class DataService {
  private apiUrl = 'https://jsonplaceholder.typicode.com/users'; // 示例 API

  constructor(private http: HttpClient) {}

  // 获取用户数据
  getUsers(): Observable<User[]> {
    return this.http.get<User[]>(this.apiUrl);
  }
}

在上面的代码中，我们使用了 HttpClient 来发起请求，并用 Observable 类型来处理异步数据流。

3. 使用 HTTP 服务

服务创建完成后，可以在组件中注入并使用它。下面是一个组件 app.component.ts 的示例：

import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';
import { User } from './user.model';

@Component({
  selector: 'app-root',
  template: `
    <h1>User List</h1>
    <ul>
      <li *ngFor="let user of users">{{ user.name }}</li>
    </ul>
  `,
})
export class AppComponent implements OnInit {
  users: User[] = [];

  constructor(private dataService: DataService) {}

  ngOnInit(): void {
    this.dataService.getUsers().subscribe((data) => {
      this.users = data;
    });
  }
}

在这个组件中，我们在 ngOnInit 生命周期钩子中调用 getUsers() 方法来获取用户列表，并将其渲染在模板中。通过使用 *ngFor 指令，我们可以遍历 users 数组并显示每个用户的名称。

4. 错误处理

在实际应用中，处理 HTTP 请求的错误是非常重要的。我们可以在服务中添加错误处理来捕获并处理请求中可能发生的错误：

import { catchError } from 'rxjs/operators';
import { throwError } from 'rxjs';

getUsers(): Observable<User[]> {
  return this.http.get<User[]>(this.apiUrl).pipe(
    catchError((error) => {
      console.error('Error occurred:', error);
      return throwError('Could not fetch users, please try again later.');
    })
  );
}

在这个修改后的 getUsers() 方法中，我们使用了 catchError 操作符来捕获请求的错误，并在控制台中打印错误信息。

总结

通过本节的学习，我们了解了如何在 Angular 应用中使用 HttpClientModule 进行 HTTP 请求。我们创建了一个服务来管理数据请求，并学习了如何在组件中利用这个服务。此外，我们还探讨了错误处理的方法，以增强应用的健壮性。

在接下来的章节中，我们将深入探讨如何使用 HTTP 客户端发送 GET 和 POST 请求，以便我们能够更灵活地与后端进行数据交互。