Angular 19: Трансформація HTTP викликів API за допомогою Signals і Resources

Сучасна розробка на Angular продовжує еволюціонувати з кожною версією, приносячи нові функції та парадигми, що покращують досвід розробника та продуктивність. Angular 19 представляє експериментальні API resource() та розвиває потужну архітектуру Signal, яка була введена раніше. У цьому блозі ми розглянемо, як перейти від традиційних викликів API за допомогою HttpClient до використання Signals та Resources, при цьому використовуючи новітні можливості Angular.

Для покрокового пояснення цих підходів, з практичними прикладами та порадами, перегляньте моє відео на YouTube:

Традиційний підхід з HttpClient та RxJS

Більшість розробників Angular знайомі з традиційним способом обробки HTTP викликів API за допомогою сервісу HttpClient та RxJS Observable. Ось приклад отримання списку елементів Todo:

Сервіс (TodoService):

import { HttpClient } from '@angular/common/http';  
import { inject, Injectable } from '@angular/core';  
import { Observable } from 'rxjs';  
import { Todo } from './todo.model';  

@Injectable()  
export class TodoService {  
 private readonly http: HttpClient = inject(HttpClient);  

 public getTodos(): Observable {  
 return this.http.get('https://jsonplaceholder.typicode.com/todos?_limit=10');  
 }  
}

Компонент:

import { Component } from '@angular/core';  
import { TodoService } from './todo.service';  
import { Observable } from 'rxjs';  

@Component({  
 selector: 'app-root',  
 templateUrl: './app.component.html',  
 styleUrls: ['./app.component.scss'],  
})  
export class AppComponent {  
 public todos$: Observable = this.todosService.getTodos();  

 constructor(private readonly todosService: TodoService) {}  
}

HTML:

@for (todo of (todos$ | async); track todo.id) {  

{{ todo.title }}    
   } 

Перехід до Signals та AsyncPipe

З Angular Signals ви можете керувати реактивним станом більш декларативно, уникнувши ручних підписок. Ось як можна рефакторити компонент для використання Signals:

Рефакторинг компонента:

import { AsyncPipe } from '@angular/common';  
import { Component, computed, inject, toSignal } from '@angular/core';  
import { Todo } from './todo.model';  
import { TodoService } from './todo.service';  

@Component({  
 selector: 'app-root',  
 templateUrl: './app.component.html',  
 styleUrls: ['./app.component.scss'],  
 imports: [AsyncPipe],  
 providers: [TodoService],  
})  
export class AppComponent {  
 private readonly todosService = inject(TodoService);  
 public todos = toSignal(this.todosService.getTodos(), { initialValue: [] });  
}  

Оновлений HTML:

@for (todo of todos(); track todo.id) {  

{{ todo.title }}    
   } 

Це дозволяє уникнути необхідності використання | async та спрощує управління станом завдяки використанню Signals для реактивних оновлень.

Експериментальне API resource() в Angular 19

API resource() пропонує новий спосіб обробки асинхронного завантаження даних з вбудованими можливостями кешування та оновлення.
Давайте використаємо його для отримання елементів Todo.

Оновлений компонент з resource():

import { AsyncPipe } from '@angular/common';  
import { Component, computed, inject, resource, Signal } from '@angular/core';  
import { Todo } from './todo.model';  
import { TodoService } from './todo.service';  

@Component({  
 selector: 'app-root',  
 templateUrl: './app.component.html',  
 styleUrls: ['./app.component.scss'],  
 imports: [AsyncPipe],  
 providers: [TodoService],  
})  
export class AppComponent {  
 private readonly todosService = inject(TodoService);  

 public todosResource = resource({  
 loader: () => {  
 return fetch(  
 'https://jsonplaceholder.typicode.com/todos?_limit=10'  
 ).then((response) => response.json() as Promise);  
 },  
 });  

 public todos = computed(() => this.todosResource.value() || []);  
}

Оновлений HTML:

@for (todo of todos(); track todo.id) {  

{{ todo.title }}    
   } 

Тут API resource() спрощує асинхронну логіку завантаження, одночасно автоматично керуючи кешуванням та реактивністю.

Підсумок

• Традиційний підхід з HttpClient та | async все ще потужний, але може бути надмірно вербозним.
• Signals пропонують більш декларативний спосіб керувати реактивними даними, уникаючи ручних підписок.
• API resource(), хоч і експериментальне, надає перспективну альтернативу для асинхронного отримання даних з вбудованим кешуванням.

Удачі!

Перекладено з: Angular 19: Transforming HTTP API Calls with Signals and Resources