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

---

第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

---

結論

Angular 的注入功能和基於訊號的資源 API 代表了簡化非同步邏輯的飛躍。借助這些工具，開發人員可以：

1. 將業務邏輯與元件解耦。
2. 編寫可重複使用的函數，與 Angular 的依賴注入系統無縫整合。
3. 消除狀態管理的樣板。
4. 輕鬆建立反應式和聲明式應用程式。

Resource API 特別適合現代 Angular 項目，提供自動反應性和宣告性狀態處理。今天就開始探索這些功能，讓您的 Angular 開發更上一層樓！

以上是Angular 中的函數式程式設計：探索注入與資源的詳細內容。更多資訊請關注PHP中文網其他相關文章！