Angular网络请求封装时如何优雅处理拦截与错误？

在Angular应用开发中,网络请求是连接前端与后端服务的核心环节，良好的请求封装不仅能提升代码的可维护性，还能统一处理请求拦截、错误处理、响应解析等共逻辑，从而降低开发复杂度，本文将从封装的必要性、设计思路、具体实现及最佳实践等方面，详细探讨Angular网络请求的封装方案。

封装的必要性

直接在组件中使用Angular的HttpClient发送请求，会导致以下问题：

代码重复：每个请求都需要处理loading状态、错误捕获、响应解析等逻辑，造成冗余代码。
维护困难：当API地址、认证方式等全局配置变更时，需修改多处代码。
缺乏统一管理：请求日志、超时控制、重试机制等难以集中管理，增加调试难度。
安全性风险：敏感信息（如Token）直接暴露在组件中，不利于安全管控。

通过封装请求服务,可有效解决上述问题，实现代码的复用性、可维护性和安全性。

封装设计思路

封装的核心目标是“统一入口、集中处理、灵活扩展”，具体设计思路如下：

基础服务层

创建一个基础请求服务（如BaseApiService），封装HttpClient的核心方法（GET、POST、PUT、DELETE等），并统一处理以下共逻辑：

请求头设置（如Content-Type、Authorization）
请求参数序列化
响应数据解构（如提取response.data）
错误拦截与统一提示

拦截器机制

利用Angular的HttpInterceptor接口，实现请求/响应拦截器，处理全局性逻辑：

请求拦截：添加Token、设置请求头、处理超时等。
响应拦截：统一错误码处理（如401跳转登录页）、日志记录、数据格式转换等。

业务服务层

基于基础服务层,按业务模块拆分具体服务（如UserService、ProductService），每个服务负责对应模块的API调用，无需重复处理共逻辑。

具体实现步骤

创建基础请求服务

通过Angular CLI生成服务：

ng generate services services/base-api

在BaseApiService中注入HttpClient和HttpHandler，并封装基础请求方法：

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 BaseApiService {
  private baseUrl = 'https://api.example.com'; // 统一API基础路径
  constructor(private http: HttpClient) {}
  // GET请求
  get<T>(url: string, params?: any): Observable<T> {
    const httpParams = this.buildParams(params);
    return this.http.get<T>(`${this.baseUrl}${url}`, { params }).pipe(
      map(response => this.handleResponse<T>(response)),
      catchError(error => this.handleError(error))
    );
  }
  // POST请求
  post<T>(url: string, body: any): Observable<T> {
    return this.http.post<T>(`${this.baseUrl}${url}`, body).pipe(
      map(response => this.handleResponse<T>(response)),
      catchError(error => this.handleError(error))
    );
  }
  // 构建HttpParams
  private buildParams(params: any): HttpParams {
    let httpParams = new HttpParams();
    Object.keys(params).forEach(key => {
      if (params[key] !== undefined && params[key] !== null) {
        httpParams = httpParams.set(key, params[key]);
      }
    });
    return httpParams;
  }
  // 处理响应数据
  private handleResponse<T>(response: HttpResponse<T>): T {
    // 假设后端返回格式为 { code: 200, data: T, message: 'success' }
    return response.body?.data || response.body as T;
  }
  // 统一错误处理
  private handleError(error: any): Observable<never> {
    console.error('Request error:', error);
    // 可集成Toast或Modal统一提示错误
    throw error;
  }
}

实现请求拦截器

拦截器需实现HttpInterceptor接口，用于统一处理请求头和响应错误：

import { Injectable } from '@angular/core';
import { 
  HttpRequest, 
  HttpHandler, 
  HttpEvent, 
  HttpInterceptor, 
  HttpResponse 
} from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError, map } from 'rxjs/operators';
import { TokenService } from '../services/token.service'; // 假设存在Token服务
@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  constructor(private tokenService: TokenService) {}
  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // 添加Token到请求头
    const token = this.tokenService.getToken();
    if (token) {
      request = request.clone({
        setHeaders: {
          Authorization: `Bearer ${token}`
        }
      });
    }
    return next.handle(request).pipe(
      map((event: HttpEvent<any>) => {
        if (event instanceof HttpResponse) {
          // 处理响应数据，如统一解构
          event = event.clone({
            body: event.body?.data || event.body
          });
        }
        return event;
      }),
      catchError(error => {
        // 统一处理错误，如401跳转登录页
        if (error.status === 401) {
          this.tokenService.removeToken();
          // 跳转登录逻辑
        }
        return throwError(error);
      })
    );
  }
}

在app.module.ts或core.module.ts中注册拦截器：

import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { AuthInterceptor } from './interceptors/auth.interceptor';
@NgModule({
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }
  ]
})
export class AppModule { }

创建业务服务

以用户模块为例,创建UserService并继承BaseApiService：

import { Injectable } from '@angular/core';
import { BaseApiService } from './base-api.service';
import { User } from '../models/user.model';
@Injectable({
  providedIn: 'root'
})
export class UserService extends BaseApiService {
  // 用户登录
  login(username: string, password: string): Observable<User> {
    return this.post<User>('/auth/login', { username, password });
  }
  // 获取用户列表
  getUserList(params: any): Observable<User[]> {
    return this.get<User[]>('/users', params);
  }
}

最佳实践

统一API管理

建议将所有API地址集中管理,可通过api.config.ts配置：

export const API_CONFIG = {
  baseUrl: 'https://api.example.com',
  endpoints: {
    users: '/users',
    auth: {
      login: '/auth/login',
      logout: '/auth/logout'
    }
  }
};

响应数据模型化

使用TypeScript接口或类定义响应数据结构,提升类型安全性：

export interface ApiResponse<T> {
  code: number;
  data: T;
  message: string;
}

请求状态管理

结合NgRx或RxJS管理请求状态（如loading、error），避免组件内重复声明：

import { Component } from '@angular/core';
import { UserService } from '../services/user.service';
@Component({
  selector: 'app-user-list',
  template: `
    <div *ngIf="loading">Loading...</div>
    <div *ngIf="error">{{ error }}</div>
    <ul *ngIf="users.length">
      <li *ngFor="let user of users">{{ user.name }}</li>
    </ul>
  `
})
export class UserListComponent {
  users: any[] = [];
  loading = false;
  error: string | null = null;
  constructor(private userService: UserService) {}
  ngOnInit() {
    this.loading = true;
    this.userService.getUserList({ page: 1 }).subscribe({
      next: data => {
        this.users = data;
        this.loading = false;
      },
      error: err => {
        this.error = 'Failed to load users';
        this.loading = false;
      }
    });
  }
}

错误处理策略

Angular网络请求的封装是提升应用质量的关键步骤,通过基础服务层、拦截器机制和业务服务层的分层设计，可实现请求逻辑的统一管理和灵活扩展，在实际开发中，还需结合项目需求优化错误处理、状态管理和API配置，最终实现代码的高内聚、低耦合，为后续维护和迭代奠定坚实基础。

图片来源于AI模型，如侵权请联系管理员。作者：酷小编，如若转载，请注明出处：https://www.kufanyun.com/ask/53947.html