在 Angular 开发中，与后端 API 进行数据交互是核心场景之一。Angular 团队在版本 4.3 后正式推出HttpClientModule，全面替代了老旧的HttpModule，成为处理 HTTP 请求的标准方案。如果你还在使用旧的HttpModule，或者刚接触 Angular 想要掌握正确的 HTTP 请求方式，这篇文章将带你彻底搞懂HttpClientModule的优势和基本使用。
一、HttpClientModule vs HttpModule：核心优势
相比于被废弃的HttpModule，HttpClientModule在易用性、性能、类型安全等方面都有质的提升，核心优势主要体现在以下几点：
1. 内置类型安全与自动 JSON 解析
HttpModule返回的是Response对象，需要手动调用.json()方法解析响应体，且无法直接指定返回数据的类型；HttpClientModule默认自动解析 JSON 响应，无需手动转换，同时支持泛型定义返回类型，让 TypeScript 的类型校验发挥作用，减少运行时错误。
2. 简化的错误处理
- 旧的
HttpModule需要手动判断响应状态码来处理错误； HttpClientModule内置了基于 HTTP 状态码的错误拦截，非 2xx 状态码会自动触发error回调，结合拦截器可实现全局错误处理。
3. 内置拦截器机制
拦截器是HttpClientModule最强大的特性之一，可统一处理请求 / 响应的通用逻辑：
- 请求拦截：统一添加 token、设置请求头、添加加载动画；
- 响应拦截：统一处理响应数据、转换格式；
- 错误拦截：全局捕获 401（未授权）、404（资源不存在）等错误。
4. 体积更小、性能更优
HttpClientModule重构了底层实现，代码体积更小，请求处理的性能损耗更低，同时支持取消请求、进度监听等高级特性。
5. 更好的测试支持
HttpClientModule提供了HttpClientTestingModule，可以更简单地模拟 HTTP 请求，编写单元测试，而HttpModule的测试流程相对繁琐。
二、HttpClientModule 基本使用
接下来通过实战示例，带你掌握HttpClientModule的核心用法，从环境配置到各类请求的实现。
1. 基础配置：导入模块
首先需要在 Angular 模块（通常是AppModule）中导入HttpClientModule，这是使用所有 HTTP 功能的前提：
// app.module.ts import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; // 导入HttpClientModule import { HttpClientModule } from '@angular/common/http'; import { AppComponent } from './app.component'; import { UserService } from './user.service'; @NgModule({ declarations: [AppComponent], imports: [ BrowserModule, HttpClientModule // 注册模块 ], providers: [UserService], bootstrap: [AppComponent] }) export class AppModule { }2. 核心用法：注入并使用 HttpClient
HttpClient需要通过依赖注入的方式使用，推荐封装在服务（Service）中，而非直接在组件中使用，遵循 “单一职责” 原则。
示例 1：GET 请求（获取数据）
// user.service.ts import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { Observable } from 'rxjs'; // 定义返回数据的类型（类型安全） export interface User { id: number; name: string; email: string; } @Injectable({ providedIn: 'root' // 根级别注入 }) export class UserService { // API基础地址 private apiUrl = 'https://jsonplaceholder.typicode.com/users'; // 注入HttpClient constructor(private http: HttpClient) { } // 获取所有用户（GET请求） getUsers(): Observable<User[]> { // 泛型指定返回类型为User数组，自动解析JSON return this.http.get<User[]>(this.apiUrl); } // 根据ID获取单个用户 getUserById(id: number): Observable<User> { return this.http.get<User>(`${this.apiUrl}/${id}`); } }在组件中调用服务：
// app.component.ts import { Component, OnInit } from '@angular/core'; import { UserService, User } from './user.service'; @Component({ selector: 'app-root', template: ` <h2>用户列表</h2> <ul *ngIf="users"> <li *ngFor="let user of users"> {{user.id}} - {{user.name}} ({{user.email}}) </li> </ul> <div *ngIf="error" class="error">{{error}}</div> ` }) export class AppComponent implements OnInit { users: User[] = []; error: string = ''; constructor(private userService: UserService) { } ngOnInit(): void { // 订阅GET请求的结果 this.userService.getUsers().subscribe({ next: (data) => { this.users = data; // 成功获取数据 }, error: (err) => { this.error = `请求失败：${err.message}`; // 处理错误 } }); } }示例 2：POST 请求（提交数据）
POST 请求用于创建新资源，需要传入请求体（body）：
// 在UserService中添加POST方法 // 创建新用户（POST请求） createUser(newUser: Omit<User, 'id'>): Observable<User> { // 参数1：URL，参数2：请求体 return this.http.post<User>(this.apiUrl, newUser); }组件中调用：
// 新增用户示例 const newUser = { name: '张三', email: 'zhangsan@example.com' }; this.userService.createUser(newUser).subscribe({ next: (user) => { console.log('用户创建成功：', user); }, error: (err) => { console.error('创建失败：', err); } });示例 3：PUT/PATCH/DELETE 请求
PUT：全量更新资源（替换整个对象）；PATCH：增量更新资源（仅更新部分字段）；DELETE：删除资源。
// 在UserService中添加 // 全量更新用户（PUT） updateUser(user: User): Observable<User> { return this.http.put<User>(`${this.apiUrl}/${user.id}`, user); } // 增量更新用户（PATCH） patchUser(id: number, partialUser: Partial<User>): Observable<User> { return this.http.patch<User>(`${this.apiUrl}/${id}`, partialUser); } // 删除用户（DELETE） deleteUser(id: number): Observable<void> { return this.http.delete<void>(`${this.apiUrl}/${id}`); }3. 进阶用法：自定义请求头与参数
（1）添加请求头（如 Token、Content-Type）
// GET请求带请求头 getUsersWithHeaders(): Observable<User[]> { // 定义请求头 const headers = { 'Authorization': 'Bearer your-token-here', 'Content-Type': 'application/json' }; // 传入请求选项 return this.http.get<User[]>(this.apiUrl, { headers }); }（2）URL 查询参数
// 带查询参数的GET请求（如?name=张三&page=1） getUsersByParams(name: string, page: number): Observable<User[]> { // 定义查询参数 const params = { name: name, page: page.toString() }; return this.http.get<User[]>(this.apiUrl, { params }); }三、拦截器实战：全局处理请求 / 响应
拦截器是HttpClientModule的核心特性，以下实现两个常用拦截器：
1. 请求拦截器：统一添加 Token
// auth.interceptor.ts import { Injectable } from '@angular/core'; import { HttpRequest, HttpHandler, HttpInterceptor } from '@angular/common/http'; @Injectable() export class AuthInterceptor implements HttpInterceptor { intercept(request: HttpRequest<unknown>, next: HttpHandler) { // 从本地存储获取Token const token = localStorage.getItem('token'); if (token) { // 克隆请求并添加Authorization头（请求对象是不可变的，需克隆） const authReq = request.clone({ headers: request.headers.set('Authorization', `Bearer ${token}`) }); return next.handle(authReq); } // 无Token则直接传递原请求 return next.handle(request); } }2. 错误拦截器：全局处理 HTTP 错误
// error.interceptor.ts import { Injectable } from '@angular/core'; import { HttpRequest, HttpHandler, HttpInterceptor, HttpErrorResponse } from '@angular/common/http'; import { catchError, throwError } from 'rxjs'; @Injectable() export class ErrorInterceptor implements HttpInterceptor { intercept(request: HttpRequest<unknown>, next: HttpHandler) { return next.handle(request).pipe( catchError((error: HttpErrorResponse) => { let errorMsg = ''; // 分类处理错误 if (error.error instanceof ErrorEvent) { // 客户端错误（如网络问题） errorMsg = `客户端错误：${error.error.message}`; } else { // 服务端错误（根据状态码处理） switch (error.status) { case 401: errorMsg = '未授权，请重新登录'; // 可在此处跳转到登录页 break; case 404: errorMsg = '请求的资源不存在'; break; case 500: errorMsg = '服务器内部错误'; break; default: errorMsg = `服务端错误：${error.status} - ${error.message}`; } } // 抛出错误，让订阅者可以捕获 return throwError(() => new Error(errorMsg)); }) ); } }3. 注册拦截器
在AppModule中注册拦截器：
// app.module.ts import { HTTP_INTERCEPTORS } from '@angular/common/http'; import { AuthInterceptor } from './auth.interceptor'; import { ErrorInterceptor } from './error.interceptor'; @NgModule({ // ... 其他配置 providers: [ { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true // 允许多个拦截器 }, { provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true } ] }) export class AppModule { }四、常见注意事项
- 跨域问题：HttpClient 本身不解决跨域，需要后端配置 CORS（跨域资源共享）；
- 取消请求：可通过
rxjs的takeUntil操作符实现请求取消，避免内存泄漏； - 请求防抖 / 节流：频繁请求（如搜索框输入）可结合
debounceTime操作符优化； - 旧项目迁移：
HttpModule已被标记为废弃，迁移时只需替换导入并移除.json()调用。
总结
HttpClientModule相比HttpModule具备类型安全、自动 JSON 解析、拦截器等核心优势，是 Angular 处理 HTTP 请求的标准方案；- 使用
HttpClientModule的核心步骤：导入模块 → 注入HttpClient→ 调用 get/post/put/delete 等方法 → 订阅响应； - 拦截器是
HttpClientModule的核心特性，可实现全局的请求头添加、错误处理等通用逻辑，大幅提升代码复用性。
掌握HttpClientModule的基本用法和拦截器的实战技巧，能让你在 Angular 项目中更优雅、高效地处理与后端的交互，同时保证代码的可维护性和健壮性。
