{"id":32514,"date":"2025-04-10T10:14:00","date_gmt":"2025-04-10T08:14:00","guid":{"rendered":"https:\/\/www.codemotion.com\/magazine\/?p=32514"},"modified":"2025-04-10T10:14:02","modified_gmt":"2025-04-10T08:14:02","slug":"angular-httpresource-un-nuovo-approccio-al-fetch-dei-dati","status":"publish","type":"post","link":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-httpresource-un-nuovo-approccio-al-fetch-dei-dati\/","title":{"rendered":"Angular httpResource: un nuovo approccio al fetch dei dati"},"content":{"rendered":"\n<p id=\"cb00\">Negli ultimi due anni, Angular ha intrapreso un percorso per rivoluzionare il suo modello reattivo, introducendo i signal come primitive fondamentali per la reattivit\u00e0 sincrona all&#8217;interno del framework. Pi\u00f9 recentemente, questo percorso si \u00e8 esteso al dominio della reattivit\u00e0 asincrona con la nuova <strong>Resource API<\/strong>.<\/p>\n\n\n\n<p id=\"6be8\">Con gli ultimi aggiornamenti, Angular ha fatto un ulteriore passo avanti introducendo un tipo di risorsa specializzato: <strong>httpResource<\/strong>. Questa aggiunta estende la <strong>Resource API<\/strong>, offrendo un modo pi\u00f9 efficiente per gestire le richieste HTTP.<\/p>\n\n\n\n<p id=\"225a\">In questo articolo esploreremo il funzionamento di <strong>httpResource<\/strong> e come utilizzarlo in scenari reali, partendo da un rapido ripasso della <strong><a href=\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-resource-api-la-guida-completa\/\">Resource API<\/a><\/strong>.<\/p>\n\n\n\t\t\t\t<div class=\"wp-block-uagb-table-of-contents uagb-toc__align-left uagb-toc__columns-1  uagb-block-0d30d21a      \"\n\t\t\t\t\tdata-scroll= \"1\"\n\t\t\t\t\tdata-offset= \"30\"\n\t\t\t\t\tstyle=\"\"\n\t\t\t\t>\n\t\t\t\t<div class=\"uagb-toc__wrap\">\n\t\t\t\t\t\t<div class=\"uagb-toc__title\">\n\t\t\t\t\t\t\tIndice\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"uagb-toc__list-wrap \">\n\t\t\t\t\t\t<ol class=\"uagb-toc__list\"><li class=\"uagb-toc__list\"><a href=\"#la-resource-api\" class=\"uagb-toc-link__trigger\">La Resource API<\/a><ul class=\"uagb-toc__list\"><li class=\"uagb-toc__list\"><a href=\"#come-utilizzare-una-resource\" class=\"uagb-toc-link__trigger\">Come utilizzare una Resource?<\/a><\/li><\/ul><\/li><li class=\"uagb-toc__list\"><a href=\"#httpresource\" class=\"uagb-toc-link__trigger\">httpResource<\/a><ul class=\"uagb-toc__list\"><li class=\"uagb-toc__list\"><a href=\"#la-funzione-httpresponse\" class=\"uagb-toc-link__trigger\">La funzione httpResponse( )<\/a><li class=\"uagb-toc__list\"><li class=\"uagb-toc__list\"><a href=\"#configura-la-resource-con-httpresourceoptions\" class=\"uagb-toc-link__trigger\">Configura la Resource con HttpResourceOptions<\/a><li class=\"uagb-toc__list\"><li class=\"uagb-toc__list\"><a href=\"#recuperare-tipi-di-dati-diversi-da-json\" class=\"uagb-toc-link__trigger\">Recuperare tipi di dati diversi da JSON<\/a><li class=\"uagb-toc__list\"><li class=\"uagb-toc__list\"><a href=\"#integrazione-con-httpclient-e-supporto-per-gli-interceptors\" class=\"uagb-toc-link__trigger\">Integrazione con HttpClient e supporto per gli Interceptors<\/a><\/li><\/ul><\/li><\/ul><\/li><li class=\"uagb-toc__list\"><a href=\"#casi-duso-nel-mondo-reale\" class=\"uagb-toc-link__trigger\">Casi d&#039;uso nel mondo reale<\/a><ul class=\"uagb-toc__list\"><li class=\"uagb-toc__list\"><a href=\"#ottimizzazioni-per-forms-e-search\" class=\"uagb-toc-link__trigger\">Ottimizzazioni per Forms e Search<\/a><li class=\"uagb-toc__list\"><li class=\"uagb-toc__list\"><a href=\"#disabilitare-la-richiesta-senza-distruggere-la-risorsa\" class=\"uagb-toc-link__trigger\">Disabilitare la richiesta senza distruggere la risorsa<\/a><\/li><\/ul><\/li><\/ul><\/li><\/ul><\/li><li class=\"uagb-toc__list\"><a href=\"#httpresourcerequest-in-dettaglio\" class=\"uagb-toc-link__trigger\">HttpResourceRequest in dettaglio<\/a><ul class=\"uagb-toc__list\"><li class=\"uagb-toc__list\"><a href=\"#progettato-solo-per-il-recupero-dei-dati\" class=\"uagb-toc-link__trigger\">Progettato solo per il recupero dei dati<\/a><\/li><\/ul><\/li><\/ul><\/li><\/ul><\/li><\/ul><\/li><li class=\"uagb-toc__list\"><a href=\"#grazie-per-aver-letto\" class=\"uagb-toc-link__trigger\">Grazie per aver letto!\u00a0\ud83e\udef6\ud83c\udffb<\/a><\/ul><\/ul><\/ul><\/ul><\/ol>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\n\n\n<h2 class=\"wp-block-heading\" id=\"ed48\">La Resource API<\/h2>\n\n\n\n<p id=\"2581\">La <strong>Resource API<\/strong> di Angular \u00e8 progettata per semplificare il caricamento asincrono delle risorse sfruttando i <strong>signal<\/strong>.<\/p>\n\n\n\n<p>Offre un approccio semplificato alla gestione delle richieste di dati, al tracciamento degli stati di caricamento e all&#8217;aggiornamento automatico dei dati quando i <strong>signal<\/strong> da cui dipende la risorsa cambiano.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"30b8\">Come utilizzare una Resource?<\/h3>\n\n\n\n<p>Per utilizzare una <strong>resource<\/strong>, possiamo usare la funzione <strong>resource()<\/strong>, dove definiamo:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Una funzione di <strong>request<\/strong> che restituisce i parametri per la richiesta asincrona;<\/li>\n\n\n\n<li>Una funzione di <strong>loader<\/strong> che recupera i dati in base ai parametri della <strong>request<\/strong>.<\/li>\n<\/ul>\n\n\n\n<p id=\"adef\">Ecco un semplice esempio:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"TypeScript\" data-shcb-language-slug=\"typescript\"><span><code class=\"hljs language-typescript shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span><span class=\"hljs-keyword\">import<\/span> { resource, signal } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'@angular\/core'<\/span>;\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-keyword\">const<\/span> RESOURCE_URL = <span class=\"hljs-string\">'https:\/\/jsonplaceholder.typicode.com\/todos\/'<\/span>;\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-keyword\">private<\/span> id = signal(<span class=\"hljs-number\">1<\/span>);\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><mark class='shcb-loc'><span><span class=\"hljs-keyword\">private<\/span> myResource = resource({\n<\/span><\/mark><mark class='shcb-loc'><span>    request: <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> ({ id: <span class=\"hljs-keyword\">this<\/span>.id() }),\n<\/span><\/mark><mark class='shcb-loc'><span>    loader: <span class=\"hljs-function\">(<span class=\"hljs-params\">{ <span class=\"hljs-params\">request<\/span> }<\/span>) =&gt;<\/span> fetch(RESOURCE_URL + request.id),\n<\/span><\/mark><mark class='shcb-loc'><span>});\n<\/span><\/mark><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">TypeScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">typescript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Una <strong>resource<\/strong> tiene traccia automaticamente dei parametri della <strong>request<\/strong> e, ogni volta che vengono aggiornati, recupera nuovi dati utilizzando la funzione di <strong>loader<\/strong>.<\/p>\n\n\n\n<p>La cosa pi\u00f9 importante \u00e8 che monitora lo stato dell&#8217;operazione di recupero dei dati, tenendo traccia del valore attuale della <strong>resource<\/strong>, dello <strong>stato<\/strong> e di eventuali <strong>errori<\/strong>.<\/p>\n\n\n\n<p id=\"f889\">Per maggiori dettagli sulla <strong>Resource API<\/strong>, inclusi il suo ciclo di vita, la gestione degli errori e come consumare una risorsa, potete consultare il mio precedente articolo:<\/p>\n\n\n\n<figure class=\"wp-block-embed aligncenter is-type-wp-embed is-provider-codemotion-magazine wp-block-embed-codemotion-magazine\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"wp-embedded-content\" data-secret=\"lTEBP6h4y7\"><a href=\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-resource-api-la-guida-completa\/\">Angular Resource API: la guida completa<\/a><\/blockquote><iframe loading=\"lazy\" class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; visibility: hidden;\" title=\"&#8220;Angular Resource API: la guida completa&#8221; &#8212; Codemotion Magazine\" src=\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-resource-api-la-guida-completa\/embed\/#?secret=e2szuQXly8#?secret=lTEBP6h4y7\" data-secret=\"lTEBP6h4y7\" width=\"500\" height=\"282\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>Ora che abbiamo fatto un buon ripasso della <strong>Resource API<\/strong>, immergiamoci nella nuova <strong>httpResource<\/strong>. \ud83d\udcaa\ud83c\udffb<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"1b22\">httpResource<\/h2>\n\n\n\n<p id=\"8ee3\">Una <strong>httpResource<\/strong> \u00e8 un tipo specializzato di <strong>resource<\/strong> progettato per gestire le richieste <strong>HTTP<\/strong> e esporre tutte le informazioni relative alla richiesta tramite <strong>signals<\/strong>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"4417\">La funzione httpResponse( )<\/h3>\n\n\n\n<p id=\"41cb\">Per creare un <strong>httpResource<\/strong> possiamo utilizzare la funzione <strong>httpResource()<\/strong>:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"TypeScript\" data-shcb-language-slug=\"typescript\"><span><code class=\"hljs language-typescript shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span><span class=\"hljs-keyword\">import<\/span> { signal } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'@angular\/core'<\/span>;\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-keyword\">import<\/span> { httpResource, HttpResourceRequest } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'@angular\/common\/http'<\/span>;\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-keyword\">import<\/span> { Todo } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'.\/todo.model'<\/span>;\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-keyword\">const<\/span> RESOURCE_URL = <span class=\"hljs-string\">'https:\/\/jsonplaceholder.typicode.com\/todos\/'<\/span>;\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span>id = signal(<span class=\"hljs-number\">1<\/span>);\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><mark class='shcb-loc'><span>staticHttpResource = httpResource&lt;Todo&gt;(\n<\/span><\/mark><mark class='shcb-loc'><span>    RESOURCE_URL + <span class=\"hljs-keyword\">this<\/span>.id()\n<\/span><\/mark><mark class='shcb-loc'><span>);\n<\/span><\/mark><span class='shcb-loc'><span>\n<\/span><\/span><mark class='shcb-loc'><span>reactiveHttpResource = httpResource&lt;Todo&gt;(\n<\/span><\/mark><mark class='shcb-loc'><span>    <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> RESOURCE_URL + <span class=\"hljs-keyword\">this<\/span>.id()\n<\/span><\/mark><mark class='shcb-loc'><span>);\n<\/span><\/mark><span class='shcb-loc'><span>\n<\/span><\/span><mark class='shcb-loc'><span>configuredHttpResource = httpResource&lt;Todo&gt;(\n<\/span><\/mark><mark class='shcb-loc'><span>    { url: RESOURCE_URL + <span class=\"hljs-keyword\">this<\/span>.id() } <span class=\"hljs-keyword\">as<\/span> HttpResourceRequest\n<\/span><\/mark><mark class='shcb-loc'><span>);\n<\/span><\/mark><span class='shcb-loc'><span>\n<\/span><\/span><mark class='shcb-loc'><span>reactiveConfiguredHttpResource = httpResource&lt;Todo&gt;(\n<\/span><\/mark><mark class='shcb-loc'><span>    <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> ({ url: RESOURCE_URL + <span class=\"hljs-keyword\">this<\/span>.id() } <span class=\"hljs-keyword\">as<\/span> HttpResourceRequest)\n<\/span><\/mark><mark class='shcb-loc'><span>);\n<\/span><\/mark><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">TypeScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">typescript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p id=\"cb44\"><em><strong>Nota:<\/strong> simile a una <strong>resource<\/strong>, una <strong>httpResource<\/strong> richiede un contesto di iniezione per essere creata. Puoi crearne uno come variabile di direttiva, istanziarlo all&#8217;interno del costruttore o fornire un contesto di iniezione specifico durante la creazione.<\/em><\/p>\n<\/blockquote>\n\n\n\n<p id=\"2c71\">La funzione <strong>httpResource()<\/strong> richiede un solo parametro, che pu\u00f2 essere:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Una <strong>stringa<\/strong>, che rappresenta l&#8217;URL da cui recuperare i dati;<\/li>\n\n\n\n<li>Una funzione reattiva che restituisce una <strong>stringa<\/strong>, la <strong>resource<\/strong> recuperer\u00e0 i dati dal nuovo URL ogni volta che cambia a causa di un aggiornamento del <strong>signal<\/strong>;<\/li>\n\n\n\n<li>Un oggetto di tipo <strong>HttpResourceRequest<\/strong>, che consente di specificare dettagli aggiuntivi come intestazioni e corpo della richiesta;<\/li>\n\n\n\n<li>Una funzione reattiva che restituisce un oggetto <strong>HttpResourceRequest<\/strong>, la <strong>resource<\/strong> recuperer\u00e0 i dati con i nuovi parametri della richiesta ogni volta che questo oggetto cambia a causa di un aggiornamento del <strong>signal<\/strong>.<\/li>\n<\/ul>\n\n\n\n<p id=\"f892\">Questa flessibilit\u00e0 consente ad una <strong>httpResource()<\/strong> di adattarsi alle diverse esigenze dell&#8217;applicazione, semplificando il consumo asincrono delle risorse in modo dichiarativo.<\/p>\n\n\n\n<p id=\"7d2f\">All&#8217;interno del framework, il valore del parametro fornito viene utilizzato per generare una funzione che crea una <strong>HttpRequest<\/strong>. Questa funzione viene quindi passata all&#8217;implementazione base della <strong>resource<\/strong> come funzione <strong>request<\/strong>.<\/p>\n\n\n\n<p id=\"97cc\">Fornendo funzioni reattive, <strong>httpResource<\/strong> pu\u00f2 tenere traccia dei cambiamenti dei <strong>signal<\/strong>, garantendo che la <strong>resource<\/strong> si aggiorni dinamicamente quando le dipendenze cambiano.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p id=\"65a7\"><em><strong>Nota:<\/strong> puoi trovare una spiegazione dettagliata di <strong>HttpResourceRequest<\/strong> a fine articolo \ud83d\udc47\ud83c\udffb<\/em><\/p>\n<\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"9466\">Configura la <strong>Resource<\/strong> con <strong>HttpResourceOptions<\/strong><\/h3>\n\n\n\n<p id=\"57cf\">La funzione <strong>httpResource()<\/strong> accetta un secondo parametro opzionale di tipo<strong> HttpResourceOptions<\/strong>, che ci consente di specificare le seguenti propriet\u00e0:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>defaultValue<\/strong>: il valore che la <strong>resource<\/strong> assumer\u00e0 negli stati di <strong>Idle<\/strong>, <strong>Loading<\/strong> o <strong>Error<\/strong>. Se non specificato, la <strong>resource<\/strong> assumer\u00e0 il valore predefinito di <strong>undefined<\/strong>;<\/li>\n\n\n\n<li><strong>parse<\/strong>: una funzione che elabora la risposta grezza della richiesta <strong>http<\/strong> prima di assegnarla al valore della <strong>resource<\/strong>. Se non specificato, TypeScript dedurr\u00e0 il tipo fornito tramite una type assertion.<br>Permette di eseguire validazioni, trasformazioni o l&#8217;applicazione di uno schema:<\/li>\n<\/ul>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"TypeScript\" data-shcb-language-slug=\"typescript\"><span><code class=\"hljs language-typescript shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span><span class=\"hljs-keyword\">import<\/span> { httpResource} <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'@angular\/common\/http'<\/span>;\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-keyword\">import<\/span> { defaultUser, isValidUser, toUser } form <span class=\"hljs-string\">'.\/user.utils'<\/span>;\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span>userResource =\n<\/span><\/span><span class='shcb-loc'><span>  httpResource&lt;User&gt;<span class=\"hljs-function\">(<span class=\"hljs-params\"><span class=\"hljs-params\">()<\/span> =&gt; `\/<span class=\"hljs-params\">users<\/span>\/${<span class=\"hljs-params\">userId<\/span><span class=\"hljs-params\">()<\/span>}`, {<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-function\"><span class=\"hljs-params\">    <span class=\"hljs-params\">defaultValue<\/span>: <span class=\"hljs-params\">defaultUser<\/span>,<\/span><\/span>\n<\/span><\/span><mark class='shcb-loc'><span><span class=\"hljs-function\"><span class=\"hljs-params\">    <span class=\"hljs-params\">parse<\/span>: (<span class=\"hljs-params\">raw<\/span><\/span>) =&gt;<\/span> {\n<\/span><\/mark><mark class='shcb-loc'><span>      <span class=\"hljs-keyword\">if<\/span> (!isValidUser(raw)) {\n<\/span><\/mark><mark class='shcb-loc'><span>        <span class=\"hljs-keyword\">throw<\/span> <span class=\"hljs-keyword\">new<\/span> <span class=\"hljs-built_in\">Error<\/span>(<span class=\"hljs-string\">\"Invalid user data received\"<\/span>);\n<\/span><\/mark><mark class='shcb-loc'><span>      }\n<\/span><\/mark><mark class='shcb-loc'><span>      <span class=\"hljs-keyword\">return<\/span> toUser(raw);\n<\/span><\/mark><mark class='shcb-loc'><span>    },\n<\/span><\/mark><span class='shcb-loc'><span>  });\n<\/span><\/span><span class='shcb-loc'><span>}\n<\/span><\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">TypeScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">typescript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<ul class=\"wp-block-list\">\n<li><strong>injector<\/strong>: sovrascrive l&#8217;<strong>Injector<\/strong> utilizzato dall&#8217;istanza di <strong>httpResource<\/strong> per distruggersi quando il componente o il servizio padre viene distrutto;<\/li>\n\n\n\n<li><strong>equal<\/strong>: funzione di uguaglianza utilizzata per confrontare il valore della risposta.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"cd76\">Recuperare tipi di dati diversi da JSON<\/h3>\n\n\n\n<p id=\"67ca\">Di default, una <strong>httpResource<\/strong> assume che il tipo di risposta sia JSON.<\/p>\n\n\n\n<p id=\"881c\">Per richiedere un tipo di dato diverso, possiamo utilizzare varianti specifiche della funzione <strong>httpResource()<\/strong> fornite da <strong>httpResource<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>httpResource.text()<\/strong>: per gestire le risposte in formato testo semplice;<\/li>\n\n\n\n<li><strong>httpResource.blob()<\/strong>: per gestire i dati binari, come immagini o file;<\/li>\n\n\n\n<li><strong>httpResource.arrayBuffer()<\/strong>: per gestire i dati binari grezzi come <strong>ArrayBuffer<\/strong>.<\/li>\n<\/ul>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"TypeScript\" data-shcb-language-slug=\"typescript\"><span><code class=\"hljs language-typescript shcb-code-table\"><span class='shcb-loc'><span><span class=\"hljs-keyword\">import<\/span> { httpResource } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'@angular\/common\/http'<\/span>;\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\">\/\/ Fetch di testo semplice<\/span>\n<\/span><\/span><mark class='shcb-loc'><span>textResource = httpResource.text(<span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> <span class=\"hljs-string\">'\/api\/endpoint'<\/span>, {\n<\/span><\/mark><mark class='shcb-loc'><span>  defaultValue: <span class=\"hljs-string\">''<\/span>\n<\/span><\/mark><mark class='shcb-loc'><span>});\n<\/span><\/mark><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\">\/\/ Fetch di dati binari (come immagini)<\/span>\n<\/span><\/span><mark class='shcb-loc'><span>imageResource = httpResource.blob(<span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> <span class=\"hljs-string\">'\/api\/image'<\/span>, {\n<\/span><\/mark><mark class='shcb-loc'><span>  defaultValue: <span class=\"hljs-keyword\">new<\/span> Blob()\n<\/span><\/mark><mark class='shcb-loc'><span>});\n<\/span><\/mark><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\">\/\/ Fetch di dati binari grezzi come ArrayBuffer<\/span>\n<\/span><\/span><mark class='shcb-loc'><span>arrayBufferResource = httpResource.arrayBuffer(<span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> <span class=\"hljs-string\">'\/api\/data'<\/span>, {\n<\/span><\/mark><mark class='shcb-loc'><span>  defaultValue: <span class=\"hljs-keyword\">new<\/span> <span class=\"hljs-built_in\">ArrayBuffer<\/span>(<span class=\"hljs-number\">0<\/span>)\n<\/span><\/mark><mark class='shcb-loc'><span>});\n<\/span><\/mark><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">TypeScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">typescript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"0a31\"><strong>Integrazione con <strong>HttpClient<\/strong> e supporto per gli <strong>Interceptors<\/strong><\/strong><\/h3>\n\n\n\n<p id=\"6aa3\">All&#8217;interno del framework, <strong>httpResource<\/strong> si basa su <strong>HttpClient<\/strong>, quindi per utilizzarlo \u00e8 necessario fornirlo al tuo componente o servizio, solitamente tramite <strong>provideHttpClient<\/strong> o importando <strong>HttpClientModule<\/strong>.<\/p>\n\n\n\n<p id=\"4000\">Questa integrazione ci permette di sfruttare qualsiasi <strong>HttpInterceptor<\/strong> abbiamo configurato per la manipolazione delle richieste, la gestione dell&#8217;autenticazione e la gestione degli errori. In questo modo, possiamo integrare facilmente <strong>httpResource<\/strong> nelle nostre app esistenti, beneficiando appieno della configurazione HTTP gi\u00e0 in uso.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p id=\"4ea5\"><strong>Nota:<\/strong> l&#8217;implementazione di <strong>HttpClient<\/strong> potrebbe essere rimossa nei futuri aggiornamenti, ma \u00e8 probabile che venga fornita una soluzione alternativa per garantire il funzionamento continuato. Quindi, tenete d&#8217;occhio i futuri aggiornamenti! \ud83e\udee3<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"6116\">Casi d&#8217;uso nel mondo reale<\/h2>\n\n\n\n<p id=\"046b\">La teoria \u00e8 ottima, ma \u00e8 la pratica che conta davvero.<br>Immergiamoci in alcuni esempi reali utilizzando <strong>httpResource<\/strong>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"823e\">Ottimizzazioni per <strong>Forms<\/strong> e <strong>Search<\/strong><\/h3>\n\n\n\n<p id=\"8e7e\">Quando si costruiscono form dinamici o funzionalit\u00e0 di ricerca, ottimizzare le richieste di dati \u00e8 essenziale. Una delle strategie pi\u00f9 comuni \u00e8 ridurre le chiamate API non necessarie controllando quando e come vengono attivate le richieste.<\/p>\n\n\n\n<p id=\"c7b3\">Questo \u00e8 facilmente realizzabile tracciando i cambiamenti dell&#8217;input e applicando tecniche per garantire che le richieste vengano effettuate solo quando l&#8217;utente ha smesso di digitare o quando il valore dell&#8217;input cambia effettivamente.<\/p>\n\n\n\n<p id=\"622d\">Quando gestiamo eventi basati su <strong>Observable<\/strong>, possiamo utilizzare operatori come <strong>debounceTime<\/strong> per ritardare le emissioni fino a quando non \u00e8 passato un tempo specificato senza nuovi valori, o <strong>distinctUntilChanged<\/strong> per garantire che vengano emessi solo valori unici.<\/p>\n\n\n\n<p id=\"b1fc\">Tuttavia, poich\u00e9 i <strong>signal<\/strong> non si basano sul concetto di tempo come gli <strong>Observable<\/strong>, queste strategie non possono essere applicate direttamente quando si utilizza <strong>httpResource<\/strong>.<\/p>\n\n\n\n<p id=\"a0c2\">Per aggirare questa limitazione, possiamo combinare la potenza dei <strong>signal<\/strong> e degli <strong>Observable<\/strong> sfruttando le funzioni <strong>toObservable()<\/strong> e <strong>toSignal()<\/strong> fornite dalla libreria <strong>@angular\/core\/rxjs-interop<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/miro.medium.com\/v2\/resize:fit:1260\/1*yBmAIrZIWbaFpLudnUY08Q.png\" alt=\"\"\/><\/figure>\n\n\n\n<p id=\"7f1c\">Questo ti permette di trasformare i <strong>signal<\/strong> in <strong>Observable<\/strong>, consentendoti di applicare operatori come <strong>debounceTime<\/strong> e <strong>distinctUntilChanged<\/strong>, e poi convertire i risultati di nuovo in un <strong>signal<\/strong> che possiamo utilizzare all&#8217;interno di <strong>httpResource<\/strong>.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"TypeScript\" data-shcb-language-slug=\"typescript\"><span><code class=\"hljs language-typescript shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span><span class=\"hljs-keyword\">import<\/span> { signal } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'@angular\/core'<\/span>;\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-keyword\">import<\/span> { httpResource } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'@angular\/common\/http'<\/span>;\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-keyword\">import<\/span> { toObservable, toSignal } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'@angular\/core\/rxjs-interop'<\/span>;\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-keyword\">const<\/span> RESOURCE_URL = <span class=\"hljs-string\">'https:\/\/jsonplaceholder.typicode.com\/todos\/'<\/span>;\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span>id = signal(<span class=\"hljs-number\">1<\/span>);\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\">\/\/ Converte il signal in un Observable e applica il debounceTime<\/span>\n<\/span><\/span><mark class='shcb-loc'><span>idQuery$ = toObservable(<span class=\"hljs-keyword\">this<\/span>.id).pipe( debounceTime(<span class=\"hljs-number\">3000<\/span>) );\n<\/span><\/mark><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\">\/\/ Converte l'Observable in un signal<\/span>\n<\/span><\/span><mark class='shcb-loc'><span>query = toSignal(<span class=\"hljs-keyword\">this<\/span>.idQuery$);\n<\/span><\/mark><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\">\/\/ Usa il signal query all'interno della httpResource<\/span>\n<\/span><\/span><mark class='shcb-loc'><span>myResource = httpResource.text(\n<\/span><\/mark><mark class='shcb-loc'><span>  <span class=\"hljs-comment\">\/\/ This is triggered only after the debounce<\/span>\n<\/span><\/mark><mark class='shcb-loc'><span>  () =&gt; RESOURCE_URL + <span class=\"hljs-keyword\">this<\/span>.query()\n<\/span><\/mark><mark class='shcb-loc'><span>);\n<\/span><\/mark><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">TypeScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">typescript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p id=\"51b0\"><strong>Nota:<\/strong> l&#8217;operatore <strong>distinctUntilChanged<\/strong> non \u00e8 necessario qui perch\u00e9 i <strong>signal<\/strong> evitano gi\u00e0 di emettere a meno che il loro valore non cambi effettivamente. \ud83e\udd13<\/p>\n<\/blockquote>\n\n\n\n<p id=\"810d\">Questo approccio ibrido ci offre la flessibilit\u00e0 di utilizzare strategie basate sul tempo mantenendo l&#8217;efficienza e la semplicit\u00e0 di <strong>httpResource<\/strong> e <strong>signal<\/strong>.<\/p>\n\n\n\n<p id=\"d9c0\">Ottimo! \ud83e\udd29<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"58f3\">Disabilitare la richiesta senza distruggere la risorsa<\/h3>\n\n\n\n<p id=\"1800\">In alcuni casi, potremmo voler disabilitare la richiesta senza distruggere completamente la risorsa. Ad esempio, quando il recupero dei dati dovrebbe avvenire solo dopo un&#8217;azione specifica dell&#8217;utente, come il clic su un pulsante.<\/p>\n\n\n\n<p id=\"7fe4\">Invece di effettuare la richiesta immediatamente, possiamo abilitarla condizionalmente in base a determinate condizioni, in questo modo:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"TypeScript\" data-shcb-language-slug=\"typescript\"><span><code class=\"hljs language-typescript shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span><span class=\"hljs-keyword\">import<\/span> { httpResource } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'@angular\/common\/http'<\/span>;\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-keyword\">const<\/span> RESOURCE_URL = <span class=\"hljs-string\">'https:\/\/jsonplaceholder.typicode.com\/todos\/'<\/span>;\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span>id = signal(<span class=\"hljs-number\">1<\/span>);\n<\/span><\/span><span class='shcb-loc'><span>shouldFetchData = signal(<span class=\"hljs-literal\">false<\/span>);\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span>myResource = httpResource&lt;User&#91;]&gt;<span class=\"hljs-function\">(<span class=\"hljs-params\"><span class=\"hljs-params\">()<\/span> =&gt; {<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-function\"><span class=\"hljs-params\">  <span class=\"hljs-params\">const<\/span> <span class=\"hljs-params\">shouldFetchData<\/span> = <span class=\"hljs-params\">this<\/span>.<span class=\"hljs-params\">shouldFetchData<\/span><span class=\"hljs-params\">()<\/span>; <span class=\"hljs-comment\">\/\/ Custom condition<\/span><\/span><\/span>\n<\/span><\/span><mark class='shcb-loc'><span><span class=\"hljs-function\"><span class=\"hljs-params\">  <span class=\"hljs-params\">return<\/span> <span class=\"hljs-params\">shouldFetchData<\/span> ? `${<span class=\"hljs-params\">RESOURCE_URL<\/span>}${<span class=\"hljs-params\">this<\/span>.<span class=\"hljs-params\">query<\/span><span class=\"hljs-params\">()<\/span>}` : <span class=\"hljs-params\">undefined<\/span>;<\/span><\/span>\n<\/span><\/mark><span class='shcb-loc'><span><span class=\"hljs-function\"><span class=\"hljs-params\">}<\/span>);<\/span>\n<\/span><\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">TypeScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">typescript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p id=\"fba2\">In questo esempio, <strong>httpResource<\/strong> attiver\u00e0 la richiesta API solo se il <strong>signal<\/strong> <code>shouldFetchData<\/code> ha valore <strong>true<\/strong>.<\/p>\n\n\n\n<p id=\"2cd9\">Se la condizione \u00e8 <strong>false<\/strong>, la funzione restituisce <strong>undefined<\/strong>, impedendo qualsiasi chiamata API e resettando i valori della <strong>httpResource<\/strong>.<\/p>\n\n\n\n<p id=\"c76b\">Restituire <strong>undefined<\/strong> non \u00e8 l&#8217;ideale, ma fa comunque quel che ci serve. \ud83d\ude05<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"6fa3\">HttpResourceRequest in dettaglio<\/h2>\n\n\n\n<p id=\"41a6\">Fornire un oggetto <strong>HttpResourceRequest<\/strong> alla funzione <strong>httpResource()<\/strong> ci consente di specificare dettagli aggiuntivi per personalizzare la richiesta <strong>HTTP<\/strong> effettuata dalla <strong>httpResource<\/strong>, permettendoti di definire le seguenti propriet\u00e0:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>url<\/strong>: l&#8217;URL della richiesta. Non dovrebbe includere i parametri di query, che possono essere specificati tramite la propriet\u00e0 dedicata <strong>params<\/strong>;<\/li>\n\n\n\n<li><strong>method<\/strong>: il metodo HTTP per la richiesta. Per impostazione predefinita, il valore \u00e8 <strong>GET<\/strong>;<\/li>\n\n\n\n<li><strong>body<\/strong>: il body da includere nella richiesta. Se non viene specificata una <strong>Content-Type<\/strong> header, Angular cercher\u00e0 di impostarne una in base al tipo del corpo;<\/li>\n\n\n\n<li><strong>params<\/strong>: parametri di query da aggiungere all&#8217;URL, sia come <strong>HttpParams<\/strong> che come oggetto con coppie chiave-valore, dove i valori possono essere stringhe, numeri, booleani o array di questi tipi;<\/li>\n\n\n\n<li><strong>headers<\/strong>: headers da includere con la richiesta, sia come <strong>HttpHeaders<\/strong> che come oggetto semplice con i nomi delle intestazioni come chiavi e valori di tipo stringa o array;<\/li>\n\n\n\n<li><strong>context<\/strong>: dizionario di coppie chiave-valore per memorizzare informazioni aggiuntive contestuali per la richiesta, consentendo di trasportare metadati personalizzati per la gestione o il logging;<\/li>\n\n\n\n<li><strong>reportProgress<\/strong>: se impostato su <strong>true<\/strong>, abilita gli eventi di progresso per la richiesta.<br>Questi eventi sono forniti tramite il <strong>HttpResource.progress<\/strong> signal;<\/li>\n\n\n\n<li><strong>withCredentials<\/strong>: specifica se impostare il flag <strong>withCredentials<\/strong> sulla richiesta in uscita. Quando \u00e8 <strong>true<\/strong>, consente al browser di inviare cookie e informazioni di autenticazione con la richiesta;<\/li>\n\n\n\n<li><strong>transferCache<\/strong>: configura la cache di trasferimento per il rendering lato server per la richiesta. Pu\u00f2 essere un valore booleano o un oggetto con un array <strong>includeHeaders<\/strong> che specifica quali intestazioni includere nella cache di trasferimento;<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"e48a\">Progettato solo per il recupero dei dati<\/h3>\n\n\n\n<p id=\"b75d\">Anche se possiamo definire un metodo HTTP diverso utilizzando&nbsp;<strong>HttpResourceRequest<\/strong>, il nuovo&nbsp;<strong>httpResource<\/strong>&nbsp;\u00e8 progettato principalmente per il recupero dei dati, proprio come la&nbsp;<strong>Resource API<\/strong>&nbsp;fondamentale.<\/p>\n\n\n\n<p id=\"217c\">Questa flessibilit\u00e0 \u00e8 fornita per consentire all&#8217;API di consumare dati che non necessariamente rispettano le specifiche HTTP standard.<\/p>\n\n\n\n<p>Tuttavia, \u00e8 importante notare che non \u00e8 sicuro utilizzare un&nbsp;<strong>httpResource<\/strong>, o qualsiasi&nbsp;<strong>resource<\/strong>, per salvare o eliminare dati in questo modo, poich\u00e9 ogni aggiornamento potrebbe interrompere le richieste precedentemente avviate. Di conseguenza, operazioni come&nbsp;<strong>POST<\/strong>,&nbsp;<strong>PUT<\/strong>&nbsp;o&nbsp;<strong>DELETE<\/strong>&nbsp;potrebbero non essere garantite per il completamento con successo.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"2e1d\">Grazie per aver letto!&nbsp;\ud83e\udef6\ud83c\udffb<\/h2>\n\n\n\n<p id=\"2374\">Sono entusiasta e onorato di condividere che sono ufficialmente diventato un Google Developer Expert (GDE) in&nbsp;Angular! \ud83c\udf89<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/miro.medium.com\/v2\/resize:fit:1260\/1*50JVWx9WpUTlosCKvUTekw.png\" alt=\"\"\/><\/figure>\n\n\n\n<p id=\"e78a\">Grazie a tutti per il vostro supporto, prometto che scriver\u00f2 pi\u00f9 frequentemente, perch\u00e9 ora la cosa si fa seria. \ud83d\ude1c\ud83d\ude80<\/p>\n\n\n\n<p id=\"15c9\">Non dimenticare di condividerlo con la tua community, amici tech o chiunque potrebbe trovarlo utile! \ud83d\udc4b\ud83d\ude01<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Negli ultimi due anni, Angular ha intrapreso un percorso per rivoluzionare il suo modello reattivo, introducendo i signal come primitive fondamentali per la reattivit\u00e0 sincrona all&#8217;interno del framework. Pi\u00f9 recentemente, questo percorso si \u00e8 esteso al dominio della reattivit\u00e0 asincrona con la nuova Resource API. Con gli ultimi aggiornamenti, Angular ha fatto un ulteriore passo&#8230; <a class=\"more-link\" href=\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-httpresource-un-nuovo-approccio-al-fetch-dei-dati\/\">Read more<\/a><\/p>\n","protected":false},"author":200,"featured_media":32675,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_editorskit_title_hidden":false,"_editorskit_reading_time":0,"_editorskit_is_block_options_detached":false,"_editorskit_block_options_position":"{}","_uag_custom_page_level_css":"","_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","footnotes":""},"categories":[10265],"tags":[10438,10532],"collections":[11708],"class_list":{"0":"post-32514","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-frontend-it","8":"tag-sviluppo-software-it","9":"tag-sviluppo-web","10":"collections-dalla-community","11":"entry"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.9 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Angular httpResource: un nuovo approccio al fetch dei dati<\/title>\n<meta name=\"description\" content=\"La nuova httpResource di Angular estende la Resource API, offrendo un modo pi\u00f9 efficiente per gestire le richieste HTTP.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-httpresource-un-nuovo-approccio-al-fetch-dei-dati\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Angular httpResource: un nuovo approccio al fetch dei dati\" \/>\n<meta property=\"og:description\" content=\"La nuova httpResource di Angular estende la Resource API, offrendo un modo pi\u00f9 efficiente per gestire le richieste HTTP.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-httpresource-un-nuovo-approccio-al-fetch-dei-dati\/\" \/>\n<meta property=\"og:site_name\" content=\"Codemotion Magazine\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Codemotion.Italy\/\" \/>\n<meta property=\"article:published_time\" content=\"2025-04-10T08:14:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-10T08:14:02+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/04\/DALL\u00b7E-2025-04-10-10.13.41-A-horizontal-image-representing-the-concept-of-data-fetching-using-Angulars-httpResource.-The-image-should-feature-a-modern-developer-workspace-with-.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1792\" \/>\n\t<meta property=\"og:image:height\" content=\"1024\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"Davide Passafaro\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CodemotionIT\" \/>\n<meta name=\"twitter:site\" content=\"@CodemotionIT\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Davide Passafaro\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-httpresource-un-nuovo-approccio-al-fetch-dei-dati\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-httpresource-un-nuovo-approccio-al-fetch-dei-dati\/\"},\"author\":{\"name\":\"Davide Passafaro\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/79170e2a1bfc41ddeaa10827ce803828\"},\"headline\":\"Angular httpResource: un nuovo approccio al fetch dei dati\",\"datePublished\":\"2025-04-10T08:14:00+00:00\",\"dateModified\":\"2025-04-10T08:14:02+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-httpresource-un-nuovo-approccio-al-fetch-dei-dati\/\"},\"wordCount\":1613,\"publisher\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-httpresource-un-nuovo-approccio-al-fetch-dei-dati\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/04\/DALL\u00b7E-2025-04-10-10.13.41-A-horizontal-image-representing-the-concept-of-data-fetching-using-Angulars-httpResource.-The-image-should-feature-a-modern-developer-workspace-with-.webp\",\"keywords\":[\"sviluppo software\",\"sviluppo web\"],\"articleSection\":[\"Frontend\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-httpresource-un-nuovo-approccio-al-fetch-dei-dati\/\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-httpresource-un-nuovo-approccio-al-fetch-dei-dati\/\",\"name\":\"Angular httpResource: un nuovo approccio al fetch dei dati\",\"isPartOf\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-httpresource-un-nuovo-approccio-al-fetch-dei-dati\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-httpresource-un-nuovo-approccio-al-fetch-dei-dati\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/04\/DALL\u00b7E-2025-04-10-10.13.41-A-horizontal-image-representing-the-concept-of-data-fetching-using-Angulars-httpResource.-The-image-should-feature-a-modern-developer-workspace-with-.webp\",\"datePublished\":\"2025-04-10T08:14:00+00:00\",\"dateModified\":\"2025-04-10T08:14:02+00:00\",\"description\":\"La nuova httpResource di Angular estende la Resource API, offrendo un modo pi\u00f9 efficiente per gestire le richieste HTTP.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-httpresource-un-nuovo-approccio-al-fetch-dei-dati\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-httpresource-un-nuovo-approccio-al-fetch-dei-dati\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-httpresource-un-nuovo-approccio-al-fetch-dei-dati\/#primaryimage\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/04\/DALL\u00b7E-2025-04-10-10.13.41-A-horizontal-image-representing-the-concept-of-data-fetching-using-Angulars-httpResource.-The-image-should-feature-a-modern-developer-workspace-with-.webp\",\"contentUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/04\/DALL\u00b7E-2025-04-10-10.13.41-A-horizontal-image-representing-the-concept-of-data-fetching-using-Angulars-httpResource.-The-image-should-feature-a-modern-developer-workspace-with-.webp\",\"width\":1792,\"height\":1024},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-httpresource-un-nuovo-approccio-al-fetch-dei-dati\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.codemotion.com\/magazine\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Frontend\",\"item\":\"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Angular httpResource: un nuovo approccio al fetch dei dati\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#website\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/\",\"name\":\"Codemotion Magazine\",\"description\":\"We code the future. Together\",\"publisher\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.codemotion.com\/magazine\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#organization\",\"name\":\"Codemotion\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png\",\"contentUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png\",\"width\":225,\"height\":225,\"caption\":\"Codemotion\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Codemotion.Italy\/\",\"https:\/\/x.com\/CodemotionIT\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/79170e2a1bfc41ddeaa10827ce803828\",\"name\":\"Davide Passafaro\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/11\/Davide-photo-1mb-100x100.png\",\"contentUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/11\/Davide-photo-1mb-100x100.png\",\"caption\":\"Davide Passafaro\"},\"description\":\"My name is Davide Passafaro and I am Senior Frontend Engineer at Awork. I lead two developer communities in Rome, GDG Roma Citt\u00e0 and Angular Rome, and actively contribute to the tech community as a writer and speaker. When i shut down my computer I like to play board games and archery, not both together till now. I also like escape rooms and memes.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/davide-passafaro\/\"],\"url\":\"https:\/\/www.codemotion.com\/magazine\/author\/davidepassafaro\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Angular httpResource: un nuovo approccio al fetch dei dati","description":"La nuova httpResource di Angular estende la Resource API, offrendo un modo pi\u00f9 efficiente per gestire le richieste HTTP.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-httpresource-un-nuovo-approccio-al-fetch-dei-dati\/","og_locale":"en_US","og_type":"article","og_title":"Angular httpResource: un nuovo approccio al fetch dei dati","og_description":"La nuova httpResource di Angular estende la Resource API, offrendo un modo pi\u00f9 efficiente per gestire le richieste HTTP.","og_url":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-httpresource-un-nuovo-approccio-al-fetch-dei-dati\/","og_site_name":"Codemotion Magazine","article_publisher":"https:\/\/www.facebook.com\/Codemotion.Italy\/","article_published_time":"2025-04-10T08:14:00+00:00","article_modified_time":"2025-04-10T08:14:02+00:00","og_image":[{"width":1792,"height":1024,"url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/04\/DALL\u00b7E-2025-04-10-10.13.41-A-horizontal-image-representing-the-concept-of-data-fetching-using-Angulars-httpResource.-The-image-should-feature-a-modern-developer-workspace-with-.webp","type":"image\/webp"}],"author":"Davide Passafaro","twitter_card":"summary_large_image","twitter_creator":"@CodemotionIT","twitter_site":"@CodemotionIT","twitter_misc":{"Written by":"Davide Passafaro","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-httpresource-un-nuovo-approccio-al-fetch-dei-dati\/#article","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-httpresource-un-nuovo-approccio-al-fetch-dei-dati\/"},"author":{"name":"Davide Passafaro","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/79170e2a1bfc41ddeaa10827ce803828"},"headline":"Angular httpResource: un nuovo approccio al fetch dei dati","datePublished":"2025-04-10T08:14:00+00:00","dateModified":"2025-04-10T08:14:02+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-httpresource-un-nuovo-approccio-al-fetch-dei-dati\/"},"wordCount":1613,"publisher":{"@id":"https:\/\/www.codemotion.com\/magazine\/#organization"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-httpresource-un-nuovo-approccio-al-fetch-dei-dati\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/04\/DALL\u00b7E-2025-04-10-10.13.41-A-horizontal-image-representing-the-concept-of-data-fetching-using-Angulars-httpResource.-The-image-should-feature-a-modern-developer-workspace-with-.webp","keywords":["sviluppo software","sviluppo web"],"articleSection":["Frontend"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-httpresource-un-nuovo-approccio-al-fetch-dei-dati\/","url":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-httpresource-un-nuovo-approccio-al-fetch-dei-dati\/","name":"Angular httpResource: un nuovo approccio al fetch dei dati","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-httpresource-un-nuovo-approccio-al-fetch-dei-dati\/#primaryimage"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-httpresource-un-nuovo-approccio-al-fetch-dei-dati\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/04\/DALL\u00b7E-2025-04-10-10.13.41-A-horizontal-image-representing-the-concept-of-data-fetching-using-Angulars-httpResource.-The-image-should-feature-a-modern-developer-workspace-with-.webp","datePublished":"2025-04-10T08:14:00+00:00","dateModified":"2025-04-10T08:14:02+00:00","description":"La nuova httpResource di Angular estende la Resource API, offrendo un modo pi\u00f9 efficiente per gestire le richieste HTTP.","breadcrumb":{"@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-httpresource-un-nuovo-approccio-al-fetch-dei-dati\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-httpresource-un-nuovo-approccio-al-fetch-dei-dati\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-httpresource-un-nuovo-approccio-al-fetch-dei-dati\/#primaryimage","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/04\/DALL\u00b7E-2025-04-10-10.13.41-A-horizontal-image-representing-the-concept-of-data-fetching-using-Angulars-httpResource.-The-image-should-feature-a-modern-developer-workspace-with-.webp","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/04\/DALL\u00b7E-2025-04-10-10.13.41-A-horizontal-image-representing-the-concept-of-data-fetching-using-Angulars-httpResource.-The-image-should-feature-a-modern-developer-workspace-with-.webp","width":1792,"height":1024},{"@type":"BreadcrumbList","@id":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/angular-httpresource-un-nuovo-approccio-al-fetch-dei-dati\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codemotion.com\/magazine\/"},{"@type":"ListItem","position":2,"name":"Frontend","item":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/"},{"@type":"ListItem","position":3,"name":"Angular httpResource: un nuovo approccio al fetch dei dati"}]},{"@type":"WebSite","@id":"https:\/\/www.codemotion.com\/magazine\/#website","url":"https:\/\/www.codemotion.com\/magazine\/","name":"Codemotion Magazine","description":"We code the future. Together","publisher":{"@id":"https:\/\/www.codemotion.com\/magazine\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.codemotion.com\/magazine\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.codemotion.com\/magazine\/#organization","name":"Codemotion","url":"https:\/\/www.codemotion.com\/magazine\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png","width":225,"height":225,"caption":"Codemotion"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Codemotion.Italy\/","https:\/\/x.com\/CodemotionIT"]},{"@type":"Person","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/79170e2a1bfc41ddeaa10827ce803828","name":"Davide Passafaro","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/image\/","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/11\/Davide-photo-1mb-100x100.png","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/11\/Davide-photo-1mb-100x100.png","caption":"Davide Passafaro"},"description":"My name is Davide Passafaro and I am Senior Frontend Engineer at Awork. I lead two developer communities in Rome, GDG Roma Citt\u00e0 and Angular Rome, and actively contribute to the tech community as a writer and speaker. When i shut down my computer I like to play board games and archery, not both together till now. I also like escape rooms and memes.","sameAs":["https:\/\/www.linkedin.com\/in\/davide-passafaro\/"],"url":"https:\/\/www.codemotion.com\/magazine\/author\/davidepassafaro\/"}]}},"featured_image_src":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/04\/DALL\u00b7E-2025-04-10-10.13.41-A-horizontal-image-representing-the-concept-of-data-fetching-using-Angulars-httpResource.-The-image-should-feature-a-modern-developer-workspace-with--600x400.webp","featured_image_src_square":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/04\/DALL\u00b7E-2025-04-10-10.13.41-A-horizontal-image-representing-the-concept-of-data-fetching-using-Angulars-httpResource.-The-image-should-feature-a-modern-developer-workspace-with--600x600.webp","author_info":{"display_name":"Davide Passafaro","author_link":"https:\/\/www.codemotion.com\/magazine\/author\/davidepassafaro\/"},"uagb_featured_image_src":{"full":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/04\/DALL\u00b7E-2025-04-10-10.13.41-A-horizontal-image-representing-the-concept-of-data-fetching-using-Angulars-httpResource.-The-image-should-feature-a-modern-developer-workspace-with-.webp",1792,1024,false],"thumbnail":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/04\/DALL\u00b7E-2025-04-10-10.13.41-A-horizontal-image-representing-the-concept-of-data-fetching-using-Angulars-httpResource.-The-image-should-feature-a-modern-developer-workspace-with--150x150.webp",150,150,true],"medium":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/04\/DALL\u00b7E-2025-04-10-10.13.41-A-horizontal-image-representing-the-concept-of-data-fetching-using-Angulars-httpResource.-The-image-should-feature-a-modern-developer-workspace-with--300x171.webp",300,171,true],"medium_large":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/04\/DALL\u00b7E-2025-04-10-10.13.41-A-horizontal-image-representing-the-concept-of-data-fetching-using-Angulars-httpResource.-The-image-should-feature-a-modern-developer-workspace-with--768x439.webp",768,439,true],"large":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/04\/DALL\u00b7E-2025-04-10-10.13.41-A-horizontal-image-representing-the-concept-of-data-fetching-using-Angulars-httpResource.-The-image-should-feature-a-modern-developer-workspace-with--1024x585.webp",1024,585,true],"1536x1536":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/04\/DALL\u00b7E-2025-04-10-10.13.41-A-horizontal-image-representing-the-concept-of-data-fetching-using-Angulars-httpResource.-The-image-should-feature-a-modern-developer-workspace-with--1536x878.webp",1536,878,true],"2048x2048":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/04\/DALL\u00b7E-2025-04-10-10.13.41-A-horizontal-image-representing-the-concept-of-data-fetching-using-Angulars-httpResource.-The-image-should-feature-a-modern-developer-workspace-with-.webp",1792,1024,false],"small-home-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/04\/DALL\u00b7E-2025-04-10-10.13.41-A-horizontal-image-representing-the-concept-of-data-fetching-using-Angulars-httpResource.-The-image-should-feature-a-modern-developer-workspace-with--100x100.webp",100,100,true],"sidebar-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/04\/DALL\u00b7E-2025-04-10-10.13.41-A-horizontal-image-representing-the-concept-of-data-fetching-using-Angulars-httpResource.-The-image-should-feature-a-modern-developer-workspace-with--180x128.webp",180,128,true],"genesis-singular-images":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/04\/DALL\u00b7E-2025-04-10-10.13.41-A-horizontal-image-representing-the-concept-of-data-fetching-using-Angulars-httpResource.-The-image-should-feature-a-modern-developer-workspace-with--896x504.webp",896,504,true],"archive-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/04\/DALL\u00b7E-2025-04-10-10.13.41-A-horizontal-image-representing-the-concept-of-data-fetching-using-Angulars-httpResource.-The-image-should-feature-a-modern-developer-workspace-with--400x225.webp",400,225,true],"gb-block-post-grid-landscape":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/04\/DALL\u00b7E-2025-04-10-10.13.41-A-horizontal-image-representing-the-concept-of-data-fetching-using-Angulars-httpResource.-The-image-should-feature-a-modern-developer-workspace-with--600x400.webp",600,400,true],"gb-block-post-grid-square":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/04\/DALL\u00b7E-2025-04-10-10.13.41-A-horizontal-image-representing-the-concept-of-data-fetching-using-Angulars-httpResource.-The-image-should-feature-a-modern-developer-workspace-with--600x600.webp",600,600,true]},"uagb_author_info":{"display_name":"Davide Passafaro","author_link":"https:\/\/www.codemotion.com\/magazine\/author\/davidepassafaro\/"},"uagb_comment_info":0,"uagb_excerpt":"Negli ultimi due anni, Angular ha intrapreso un percorso per rivoluzionare il suo modello reattivo, introducendo i signal come primitive fondamentali per la reattivit\u00e0 sincrona all&#8217;interno del framework. Pi\u00f9 recentemente, questo percorso si \u00e8 esteso al dominio della reattivit\u00e0 asincrona con la nuova Resource API. Con gli ultimi aggiornamenti, Angular ha fatto un ulteriore passo&#8230;&hellip;","lang":"it","_links":{"self":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/32514","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/users\/200"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/comments?post=32514"}],"version-history":[{"count":2,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/32514\/revisions"}],"predecessor-version":[{"id":32676,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/32514\/revisions\/32676"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/media\/32675"}],"wp:attachment":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/media?parent=32514"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/categories?post=32514"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/tags?post=32514"},{"taxonomy":"collections","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/collections?post=32514"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}