Angular 19 的 Resource API 与 HttpClient

前言

在 Angular 19 中，引入了 Resource API，在通过与 Angular 的响应式生态系统集成，简化异步数据获取和状态管理。

什么是 Resource API

Resource API 旨在通过与 Angular 的响应式系统（如 Signals）集成，提供一种简化的方式来管理异步数据操作。它引入了两个主要函数：resource() 和 rxResource()。其中，resource() 基于 Promise，而 rxResource() 则基于 Observable。

resource() 函数

resource() 函数用于处理基于 Promise 的异步数据获取。它接受一个配置对象，其中包含一个 loader 函数，该函数返回一个 Promise，表示数据的获取过程。resource() 函数返回一个 ResourceRef 对象，该对象包含以下属性和方法：

• value(): 一个信号，表示当前的数据值。
• error(): 一个信号，表示当前的错误信息。
• status(): 一个信号，表示当前的资源状态，如 Loading、Resolved、Error 等。
• isLoading(): 一个布尔值，指示资源是否处于加载状态。
• reload(): 一个方法，用于重新加载资源

rxResource() 函数

rxResource() 函数用于处理基于 Observable 的异步数据获取。它的工作方式与 resource() 类似，但更适合与 Angular 的 HttpClient 一起使用，因为 HttpClient 的方法通常返回 Observable

DEMO

本地服务

// 引入 express 模块
const express = require('express');
const cors = require('cors');
const app = express();

app.use(cors()); // 允许所有跨域请求

// 设置端口号
const port = 3000;

class User {
  constructor(id, name) {
    this.id = id;
    this.name = name;
  }
}

app.get('/users', (req, res) => {
  const users = [
    new User(1, '张三',),
    new User(2, '李四'),
    new User(3, '王五')
  ];
  res.json(users);
});

// 启动服务
app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}`);
});

启动服务：

组件

使用 rxResource() 来加载用户列表，并在html中显示：

@Component({
    selector: 'app-root',
    imports: [RouterOutlet, NgIf, NgForOf, HttpClientModule, JsonPipe],
    templateUrl: './app.component.html',
    standalone: true,
    styleUrl: './app.component.css'
  })
  export class AppComponent {

    constructor(private http: HttpClient) {
    }
    status = ResourceStatus;

    userResource = rxResource({
      loader: () => this.http.get<[User]>('http://localhost:3000/users'),
    });
  }

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

@if (userResource.isLoading()) {
  <div>加载中...</div>
}

@if (userResource.hasValue()) {
  <ul>
    <li *ngFor="let user of userResource.value()">
      {{ user.name }}
    </li>
  </ul>
}

@if (userResource.status() === status.Error) {
  <div>
    加载失败：{{ userResource.error() | json}}
    <button (click)="userResource.reload()">重试</button>
  </div>
}

使用 rxResource() 函数来创建一个资源，用于加载用户列表。loader 函数返回一个 Observable，该 Observable 由 HttpClient 的 get 方法创建。在模板中，我们使用 isLoading()、hasValue() 和 status() 等方法来确定当前的加载状态，并相应地显示加载指示器、数据列表或错误消息。

当把服务关闭后，先显示加载中，加载不成功就给出报错信息。

HttpClient 时，开发者需要手动管理数据的加载状态、错误处理和重试逻辑。例如：

export class AppComponent {
    users: user[];
    loading = false;
    error: string | null = null;
    constructor(private http: HttpClient) {
      this.fetchUsers();
    }

    fetchUsers() {
      this.loading = true;
      this.error = null;

      this.http.get<User[]>('http://localhost:3000/users').subscribe({
        next: (data: any) => {
          this.users = data;
          this.loading = false;
        },
        error: (err) => {
          this.error = err.message;
          this.loading = false;
        },
      });
    }
  }

与 Resource API 比较，这种方法需要手动管理 loading、error 和 user。

而使用 Resource API，只需定义 loader 函数并在模板中处理状态，无需显式维护额外变量。

总结

特性	Resource API	HttpClient
状态管理	自动管理加载状态、错误和数据值，无需手动维护状态	单元 需要开发者手动维护 loading、error 等状态2
数据格式	Signals 管理状态，提供 .value()、.error() 等直接访问方法	RxJS Observable，需要通过 subscribe 或 pipe 手动处理

Resource API 是angular 19 推出的目前还是实验性功能。