在前一章中，我们深入探讨了如何在 Angular 中注入服务。本章我们将继续学习如何使用 Angular 的 HTTP 服务来进行数据请求，以及如何通过服务和依赖注入的方式来管理 HTTP 请求和响应。
1. Angular HTTP 服务概述 Angular 提供了一个强大的 HttpClient 模块，让我们可以轻松进行 HTTP 请求。在我们开始前，请确保在你的 Angular 项目中已安装了 @angular/common/http 模块。
导入 HttpClientModule 在 app.module.ts 中导入 HttpClientModule，并将其添加到 imports 数组中：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 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 的服务。
生成服务 在命令行中运行以下命令生成服务：
1 ng generate service data
编写服务代码 在 data.service.ts 中，我们将使用 HttpClient 来发送 GET 请求以获取数据。例如，我们将从一个公共 API 获取用户数据：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 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' ; 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 方法：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 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 请求的错误非常重要。我们可以在服务中添加错误处理逻辑：
1 2 3 4 5 6 7 8 9 10 11 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 获取用户数据的功能，并在组件中展示了这些数据。同时，我们还在服务中添加了基本的错误处理逻辑，以便在请求失败时能够做出相应的处理。
在下一章中，我们将学习表单处理，特别是响应式和模板驱动表单的相关知识，为更复杂的用户输入和数据交互打下基础。