HTTP 与数据

Angular 通过 HttpClient（@angular/common/http）发起 HTTP 请求，返回 RxJS Observable。见 RxJS 互操作、依赖注入。

配置

// main.ts 或 app.config.ts
import { provideHttpClient, withInterceptors } from "@angular/common/http";

bootstrapApplication(AppComponent, {
  providers: [provideHttpClient()],
});

基本请求

import { inject, Injectable } from "@angular/core";
import { HttpClient } from "@angular/common/http";

export interface User {
  id: number;
  name: string;
}

@Injectable({ providedIn: "root" })
export class UserApi {
  private http = inject(HttpClient);

  list() {
    return this.http.get<User[]>("/api/users");
  }

  create(body: Pick<User, "name">) {
    return this.http.post<User>("/api/users", body);
  }
}

组件中配合 async 管道或 toSignal 消费，见 signals/rxjs。

拦截器

函数式拦截器（Angular 15+）用于统一附加 Token、处理错误：

import { HttpInterceptorFn } from "@angular/common/http";

export const authInterceptor: HttpInterceptorFn = (req, next) => {
  const token = localStorage.getItem("token");
  if (token) {
    req = req.clone({ setHeaders: { Authorization: `Bearer ${token}` } });
  }
  return next(req);
};

provideHttpClient(withInterceptors([authInterceptor]));

错误处理

在 subscribe 的 error 回调、catchError 操作符或全局拦截器中处理；向用户展示错误时避免泄露服务端内部堆栈。

参考文献

以下链接在编写时均可正常访问：

资料	说明
HttpClient	官方指南
拦截器	函数式拦截器
MDN：HTTP	协议基础