Angular 中的函数式编程：探索注入和资源

Angular 不断发展的生态系统正在转向更加函数式和响应式编程范式。借助 Signals、资源 API 和 注入函数 等工具，开发人员可以简化应用程序逻辑、减少样板文件并增强可重用性。

这篇博文探讨了 Angular 的现代功能如何使开发人员能够以干净、声明性和响应式的方式处理异步逻辑。

Angular 功能特性的主要优点

1. 具有依赖注入的可重用函数：注入函数允许开发人员创建与 Angular 的依赖注入系统无缝集成的独立函数。这将业务逻辑与组件和服务解耦，使功能可以在应用程序中重用。
2. 简化的状态管理：自动处理加载、成功和错误状态。
3. 增强的反应性：当依赖关系发生变化时自动更新数据。
4. 减少样板文件：专注于逻辑，而不是手动订阅或生命周期管理。
5. 提高可读性：声明性模板使 UI 状态转换易于理解。

---

第 1 步：API 和数据模型

在此示例中，我们将从 REST API 获取帖子。每个帖子都有以下结构：

export interface Post {
  userId: number;
  id: number;
  title: "string;"
  body: string;
}

API 的基本 URL 通过 InjectionToken 提供：

import { InjectionToken } from '@angular/core';

export const API_BASE_URL = new InjectionToken<string>('API_BASE_URL', {
  providedIn: 'root',
  factory: () => 'https://jsonplaceholder.typicode.com',
});
</string>

---

第2步：定义数据获取函数

1.传统的基于RxJS的方法

以下函数使用 Angular 的 HttpClient 按 ID 获取帖子：

import { HttpClient } from '@angular/common/http';
import { inject } from '@angular/core';
import { Observable } from 'rxjs';
import { API_BASE_URL } from '../tokens/base-url.token';
import { Post } from './post.model';

export function getPostById(postId: number): Observable<post> {
  const http = inject(HttpClient);
  const baseUrl = inject(API_BASE_URL);

  return http.get<post>(`${baseUrl}/posts/${postId}`);
}
</post></post>

要在组件中使用此函数，您可以将其绑定到可观察对象并使用异步管道显示结果：

import { AsyncPipe, JsonPipe } from '@angular/common';
import { Component, signal } from '@angular/core';
import { getPostById } from './shared/posts.inject';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [AsyncPipe, JsonPipe],
  template: `
    @if (post$ | async; as post) {
      <p>{{ post | json }}</p>
    } @else {
      <p>Loading...</p>
    }
  `,
})
export class AppComponent {
  private readonly postId = signal(1);

  protected readonly post$ = getPostById(this.postId());
}

局限性

• 反应性问题：信号更改（例如 postId）不会自动触发新的提取。
• 手动错误处理：您必须为加载和错误状态编写自定义逻辑。

---

2. 基于信号的资源 API 方法

资源 API 简化了反应性和状态管理。这是一个使用资源 API 的函数：

import { inject, resource, ResourceRef, Signal } from '@angular/core';
import { API_BASE_URL } from '../tokens/base-url.token';

export function getPostByIdResource(postId: Signal<number>): ResourceRef<post> {
  const baseUrl = inject(API_BASE_URL);
  return resource<post id: number>({
    request: () => ({ id: postId() }),
    loader: async ({ request, abortSignal }) => {
      const response = await fetch(`${baseUrl}/posts/${request.id}`, {
        signal: abortSignal,
      });
      return response.json();
    },
  });
}
</post></post></number>

这种方法：

• 当postId改变时自动重新加载数据。
• 以声明方式处理加载、错误和成功状态。

在组件中：

export interface Post {
  userId: number;
  id: number;
  title: "string;"
  body: string;
}

---

资源 API 的主要特性

声明式状态管理

资源 API 自动管理加载、错误和成功等状态。这消除了对自定义标志的需要并确保模板更干净。

反应性

Resource API 与 Signals 紧密集成。对 Signal 的更改会自动触发加载器功能，确保您的 UI 始终反映最新数据。

错误处理

错误通过 .error() 集中并公开，简化了模板中的错误管理。

自动生命周期管理

当依赖项（例如 postId）发生变化时，API 会取消正在进行的请求，从而防止竞争条件和陈旧数据。

---

RxJS 与资源 API：快速比较

Feature	RxJS (Observable)	Resource API (Signal)
State Management	Manual	Automatic (loading, error)
Reactivity	Requires custom setup	Built-in
Error Handling	Manual	Declarative
Lifecycle Handling	Requires cleanup	Automatic

---

结论

Angular 的注入功能和基于信号的资源 API 代表了简化异步逻辑的飞跃。借助这些工具，开发人员可以：

1. 将业务逻辑与组件解耦。
2. 编写可重用的函数，与 Angular 的依赖注入系统无缝集成。
3. 消除状态管理的样板。
4. 轻松构建反应式和声明式应用程序。

Resource API 特别适合现代 Angular 项目，提供自动反应性和声明性状态处理。今天就开始探索这些功能，让您的 Angular 开发更上一层楼！

以上是Angular 中的函数式编程：探索注入和资源的详细内容。更多信息请关注PHP中文网其他相关文章！