Angular如何封装网络请求？最佳实践与代码示例分享

在Angular应用开发中，网络请求是连接前端与后端服务的核心环节，良好的请求封装不仅能提升代码复用性，还能增强项目的可维护性和安全性，本文将从基础封装、拦截器机制、错误处理、性能优化四个维度,系统介绍Angular网络请求的封装方法。

基础封装：基于HttpClient的请求服务

Angular通过HttpClient模块提供HTTP请求能力，但直接在组件中调用HttpClient会导致代码冗余且难以管理，推荐创建一个独立的HttpService，统一封装GET、POST、PUT、DELETE等请求方法。

在app.module.ts或核心模块中导入HttpClientModule：

import { HttpClientModule } from '@angular/common/http';
@NgModule({
  imports: [HttpClientModule],
  // ...
})
export class AppModule { }

创建http.service.ts，封装基础请求方法：

import { Injectable } from '@angular/core';
import { HttpClient, HttpParams, HttpResponse } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map, catchError } from 'rxjs/operators';
@Injectable({
  providedIn: 'root'
})
export class HttpService {
  private apiUrl = 'https://api.example.com'; // 基础接口地址
  constructor(private http: HttpClient) { }
  // GET请求
  get<T>(url: string, params?: any): Observable<T> {
    const options = params ? { params: new HttpParams({ fromObject: params }) } : {};
    return this.http.get<T>(`${this.apiUrl}${url}`, options).pipe(
      map(res => res as T)
    );
  }
  // POST请求
  post<T>(url: string, data: any): Observable<T> {
    return this.http.post<T>(`${this.apiUrl}${url}`, data).pipe(
      map(res => res as T)
    );
  }
  // PUT请求
  put<T>(url: string, data: any): Observable<T> {
    return this.http.put<T>(`${this.apiUrl}${url}`, data).pipe(
      map(res => res as T)
    );
  }
  // DELETE请求
  delete<T>(url: string): Observable<T> {
    return this.http.delete<T>(`${this.apiUrl}${url}`).pipe(
      map(res => res as T)
    );
  }
}

上述封装通过泛型<T>支持不同接口的响应类型，并通过HttpParams处理查询参数,确保请求灵活性。

拦截器机制：统一处理请求与响应

拦截器是Angular提供的强大功能，可在请求发送前或响应返回后进行统一处理，如添加请求头、token验证、数据转换等，创建拦截器需实现HttpInterceptor接口。

请求拦截器：添加认证头

import { Injectable } from '@angular/core';
import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const token = localStorage.getItem('token'); // 获取存储的token
    if (token) {
      req = req.clone({
        setHeaders: {
          Authorization: `Bearer ${token}`
        }
      });
    }
    return next.handle(req);
  }
}

响应拦截器：统一错误处理

import { Injectable } from '@angular/core';
import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest, HttpErrorResponse } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';
@Injectable()
export class ErrorInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(req).pipe(
      catchError((error: HttpErrorResponse) => {
        let errorMessage = '未知错误';
        if (error.error instanceof ErrorEvent) {
          errorMessage = `客户端错误: ${error.error.message}`;
        } else {
          errorMessage = `服务端错误: ${error.status} - ${error.message}`;
        }
        // 可结合UI框架提示错误，如使用MatSnackBar
        console.error(errorMessage);
        return throwError(errorMessage);
      })
    );
  }
}

注册拦截器

在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 { }

拦截器按注册顺序依次执行，适合处理全局逻辑，如认证、日志、缓存等。

错误处理：分层捕获与友好提示

网络请求中的错误可分为客户端错误（4xx）和服务端错误（5xx），需分层处理并返回友好提示，在HttpService中扩展错误处理方法：

import { throwError } from 'rxjs';
import { retry, catchError } from 'rxjs/operators';
// 在HttpService中添加
postWithError<T>(url: string, data: any): Observable<T> {
  return this.http.post<T>(`${this.apiUrl}${url}`, data).pipe(
    retry(2), // 失败重试2次
    catchError(error => {
      if (error.status === 401) {
        // 跳转登录页或刷新token
        this.router.navigate(['/login']);
      } else if (error.status === 500) {
        // 服务端错误，提示用户稍后重试
        this.showMessage('服务器繁忙，请稍后再试');
      }
      return throwError(error);
    })
  );
}

通过retry operator实现失败重试，结合业务逻辑区分错误类型,提升用户体验。

性能优化：请求缓存与节流

请求缓存

对于频繁请求且数据变化不频繁的接口（如配置信息），可通过HttpClient的缓存机制优化：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { shareReplay } from 'rxjs/operators';
@Injectable({ providedIn: 'root' })
export class CacheService {
  private cache = new Map<string, Observable<any>>();
  get(url: string): Observable<any> {
    if (this.cache.has(url)) {
      return this.cache.get(url)!;
    }
    const request = this.http.get(url).pipe(
      shareReplay(1) // 共享响应，缓存最新结果
    );
    this.cache.set(url, request);
    return request;
  }
}

请求节流

对于高频触发的事件（如滚动加载），可通过debounceTime节流，避免短时间内重复请求：

import { debounceTime } from 'rxjs/operators';
// 在组件中使用
loadMore(): void {
  this.scrollEvent.pipe(
    debounceTime(500) // 500ms内只发送一次请求
  ).subscribe(() => {
    this.httpService.get('/data', { page: this.currentPage }).subscribe(res => {
      this.dataList = [...this.dataList, ...res];
    });
  });
}

Angular网络请求的封装需遵循“单一职责”原则，通过基础服务统一接口调用，拦截器处理全局逻辑，错误保障稳定性，缓存与节流提升性能，合理的封装不仅能减少重复代码，还能让项目在迭代中保持清晰的架构，开发者可根据实际需求扩展功能，如添加请求取消、进度显示等,进一步优化用户体验。