Reatividade assíncrona com resources

A maioria das APIs de signal são síncronas— signal, computed, input, etc. No entanto, aplicações frequentemente precisam lidar com dados que estão disponíveis de forma assíncrona. Um Resource fornece uma maneira de incorporar dados assíncronos no código baseado em signals da sua aplicação.

Você pode usar um Resource para realizar qualquer tipo de operação assíncrona, mas o caso de uso mais comum para Resource é buscar dados de um servidor. O exemplo a seguir cria um resource para buscar alguns dados de usuário.

A maneira mais fácil de criar um Resource é a função resource.

import {resource, Signal} from '@angular/core';const userId: Signal<string> = getUserId();const userResource = resource({  // Define a reactive computation.  // The params value recomputes whenever any read signals change.  params: () => ({id: userId()}),  // Define an async loader that retrieves data.  // The resource calls this function every time the `params` value changes.  loader: ({params}) => fetchUser(params),});// Create a computed signal based on the result of the resource's loader function.const firstName = computed(() => {  if (userResource.hasValue()) {    // `hasValue` serves 2 purposes:    // - It acts as type guard to strip `undefined` from the type    // - If protects against reading a throwing `value` when the resource is in error state    return userResource.value().firstName;  }  // fallback in case the resource value is `undefined` or if the resource is in error state  return undefined;});

A função resource aceita um objeto ResourceOptions com duas propriedades principais: params e loader.

A propriedade params define uma computação reativa que produz um valor de parâmetro. Sempre que signals lidos nesta computação mudam, o resource produz um novo valor de parâmetro, semelhante ao computed.

A propriedade loader define um ResourceLoader— uma função assíncrona que recupera algum estado. O resource chama o loader toda vez que a computação params produz um novo valor, passando esse valor para o loader. Veja Resource loaders abaixo para mais detalhes.

Resource tem um signal value que contém os resultados do loader.

Resource loaders

Ao criar um resource, você especifica um ResourceLoader. Este loader é uma função assíncrona que aceita um único parâmetro— um objeto ResourceLoaderParams— e retorna um valor.

O objeto ResourceLoaderParams contém três propriedades: params, previous e abortSignal.

Se a computação params retorna undefined, a função loader não executa e o status do resource se torna 'idle'.

Abortar requisições

Um resource aborta uma operação de carregamento pendente se a computação params mudar enquanto o resource está carregando.

Você pode usar o abortSignal em ResourceLoaderParams para responder a requisições abortadas. Por exemplo, a função nativa fetch aceita um AbortSignal:

const userId: Signal<string> = getUserId();const userResource = resource({  params: () => ({id: userId()}),  loader: ({params, abortSignal}): Promise<User> => {    // fetch cancels any outstanding HTTP requests when the given `AbortSignal`    // indicates that the request has been aborted.    return fetch(`users/${params.id}`, {signal: abortSignal});  },});

Veja AbortSignal no MDN para mais detalhes sobre cancelamento de requisição com AbortSignal.

Recarregar

Você pode acionar programaticamente o loader de um resource chamando o método reload.

const userId: Signal<string> = getUserId();const userResource = resource({  params: () => ({id: userId()}),  loader: ({params}) => fetchUser(params),});// ...userResource.reload();

Status do Resource

O objeto resource tem várias propriedades signal para ler o status do loader assíncrono.

O signal status fornece um ResourceStatus específico que descreve o estado do resource usando uma constante string.

Você pode usar essas informações de status para exibir condicionalmente elementos de interface do usuário, como indicadores de carregamento e mensagens de erro.

Busca de dados reativa com httpResource

httpResource é um wrapper em torno do HttpClient que fornece o status da requisição e a resposta como signals. Ele faz requisições HTTP através da pilha HTTP do Angular, incluindo interceptors.