Angular 中的函数式编程：探索注入和资源-js教程-PHP中文网

Functional Programming in Angular: Exploring inject and Resources

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

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

Angular 功能特性的主要优点

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

登录后复制

第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}`);
}

登录后复制

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

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();
    },
  });
}

登录后复制

这种方法：

当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