18 服务与依赖注入之使用HTTP服务

在前一章中，我们深入探讨了如何在 Angular 中注入服务。本章我们将继续学习如何使用 Angular 的 HTTP 服务来进行数据请求，以及如何通过服务和依赖注入的方式来管理 HTTP 请求和响应。

1. Angular HTTP 服务概述

Angular 提供了一个强大的 HttpClient 模块，让我们可以轻松进行 HTTP 请求。在我们开始前，请确保在你的 Angular 项目中已安装了 @angular/common/http 模块。

导入 HttpClientModule

在 app.module.ts 中导入 HttpClientModule，并将其添加到 imports 数组中：

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
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. 创建数据服务

我们将创建一个数据服务来处理所有的 HTTP 请求，以便在组件中可以方便地调用。让我们创建一个名为 data.service.ts 的服务。

生成服务

在命令行中运行以下命令生成服务：

ng generate service data

编写服务代码

在 data.service.ts 中，我们将使用 HttpClient 来发送 GET 请求以获取数据。例如，我们将从一个公共 API 获取用户数据：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

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

  constructor(private http: HttpClient) { }

  getUsers(): Observable<any> {
    return this.http.get<any>(this.apiUrl);
  }
}

在这个服务中，我们创建了一个方法 getUsers，它返回一个 Observable 对象，表示用户数据的HTTP响应。

3. 在组件中使用服务

现在，我们可以在组件中注入我们的 DataService 服务并使用它获取用户数据。接下来，我们将修改 app.component.ts 来展示这些数据。

修改组件

在 app.component.ts 中，我们将注入 DataService 并调用其 getUsers 方法：

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

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

  constructor(private dataService: DataService) { }

  ngOnInit() {
    this.dataService.getUsers().subscribe(data => {
      this.users = data; // 处理获取到的数据
    });
  }
}

该组件在初始化时会调用 getUsers 方法，并将获取到的用户数据存储在 users 数组中，然后在模板中使用 *ngFor 指令展示用户列表。

4. 错误处理

在实际应用中，处理 HTTP 请求的错误非常重要。我们可以在服务中添加错误处理逻辑：

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

getUsers(): Observable<any> {
  return this.http.get<any>(this.apiUrl).pipe(
    catchError(error => {
      console.error('获取用户时发生错误', error);
      return throwError(error); // 将错误重新抛出
    })
  );
}

通过使用 catchError 操作符，我们可以在请求失败时执行特定的错误处理逻辑。

5. 总结

在本章中，我们学习了如何使用 Angular 的 HTTP 服务与依赖注入来创建和使用一个简单的数据服务。我们实现了从 API 获取用户数据的功能，并在组件中展示了这些数据。同时，我们还在服务中添加了基本的错误处理逻辑，以便在请求失败时能够做出相应的处理。

在下一章中，我们将学习表单处理，特别是响应式和模板驱动表单的相关知识，为更复杂的用户输入和数据交互打下基础。