---
title: Fetch API
slug: Web/API/Fetch_API
tags:
  - API
  - Documentazione
  - Fetch
  - Response
  - Sperimentale
  - XMLHttpRequest
  - request
translation_of: Web/API/Fetch_API
---
<p>{{DefaultAPISidebar("Fetch API")}}{{ SeeCompatTable }}</p>

<p>La Fetch API fornisce un'interfaccia per ottenere risorse (anche attraverso la rete). Sembrerá familiare a tutti coloro che hanno usato {{domxref("XMLHttpRequest")}}, ma la nuova API fornisce un'insieme piú potente e flessibile di funzionalitá.</p>

<h2 id="Concetti_e_uso">Concetti e uso</h2>

<p>Fetch fornisce una definizione generica di oggetti {{domxref("Request")}} e {{domxref("Response")}} (e altri inclusi nelle richieste di rete). Questo permette loro di essere usati ovunque necessari, in futuro, sia che servano per service workers, Cache API e altri oggetti simili che usano o modificano richieste e risposte, sia per qualunque altro caso d'uso che richieda di generare le proprie risposte via codice.</p>

<p>Esso fornisce anche una definizione per concetti correlati come CORS e la semantica degli header HTTP di tipo origin, ovviando alla necessità di doverli definire separatamente altrove.</p>

<p>Per effettuare una richiesta e ottenere una risorsa, si usa il metodo {{domxref("GlobalFetch.fetch")}}. Esso è implementato in piú interfacce (specificatamente {{domxref("Window")}} e {{domxref("WorkerGlobalScope")}}). Questo lo rende disponibile all'incirca in ogni contesto in cui si puó voler ottenere risorse.</p>

<p>Il metodo <code>fetch()</code> richiede un parametro obbligatorio, il percorso (path) alla risorsa che si vuole ottenere, e ritorna una {{domxref("Promise")}} che risolve la {{domxref("Response")}} a quella richiesta, sia essa stata eseguita con successo oppure no. Si puó anche passare in via opzionale un oggetto <code>init</code> (per definire opzioni facoltative) come secondo parametro (per l'elenco completo delle opzioni visitare {{domxref("Request")}}).</p>

<p>Non appena una {{domxref("Response")}} è recuperata, vi è un certo numero di metodi disponibile allo scopo di definire cosa sia il corpo della risposta e come dovrebbe essere gestito (in dettaglio : {{domxref("Body")}}.)</p>

<p>È possibile creare una richiesta e una risposta direttamente usando i costruttori delle classi {{domxref("Request.Request","Request()")}} e {{domxref("Response.Response","Response()")}}, ma non e' una pratica comune. Invece, e' piu' frequente che essi vengano creati come risultato delle altre azioni della API (ad esempio, {{domxref("FetchEvent.respondWith")}} dei service workers.)</p>

<div class="note">
<p><strong>Note</strong>: Puoi trovare informazioni aggiuntive riguardo l'uso di fetch sulla pagina <a href="/docs/Web/API/Fetch_API/Using_Fetch">Using Fetch</a>, e studiare i concetti sulla pagina <a href="/docs/Web/API/Fetch_API/Basic_concepts">Fetch basic concepts</a>.</p>
</div>

<h3 id="Annullare_un_fetch">Annullare un fetch</h3>

<p>I browsers hanno cominciato a supportare in via sperimentale le interfacce {{domxref("AbortController")}} e {{domxref("AbortSignal")}} (meglio note come Abort API), che permettono di annullare operazioni come Fetch e XHR quando non sono ancora state completate. Per maggiori informazioni controlla la pagina con la descrizione delle interfacce.</p>

<h2 id="Fetch_Interfaces">Fetch Interfaces</h2>

<dl>
 <dt>{{domxref("GlobalFetch")}}</dt>
 <dd>Contiene il metodo globale <code>fetch()</code> usato per ottenere una risorsa.</dd>
 <dt>{{domxref("Headers")}}</dt>
 <dd>Rappresenta un header di richiesta/risposta, permettendo di interrogarlo ed eseguire azioni differenti in base ai risultati.</dd>
 <dt>{{domxref("Request")}}</dt>
 <dd>Rappresenta una richiesta.</dd>
 <dt>{{domxref("Response")}}</dt>
 <dd>Rappresenta una risposta a una richiesta.</dd>
</dl>

<h2 id="Fetch_mixin">Fetch mixin</h2>

<dl>
 <dt>{{domxref("Body")}}</dt>
 <dd>Fornisce metodi relativi al corpo di una richiesta/risposta permettendo di dichiarare quale sia il tipo di contenuto e come dovrebbe essere gestito.</dd>
</dl>

<h2 id="Specifiche">Specifiche</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specifiche</th>
   <th scope="col">Stato</th>
   <th scope="col">Commento</th>
  </tr>
  <tr>
   <td>{{SpecName('Fetch')}}</td>
   <td>{{Spec2('Fetch')}}</td>
   <td>Definizione di cui sopra</td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilitá_coi_Browsers">Compatibilitá coi Browsers</h2>

<p>{{ CompatibilityTable() }}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Edge</th>
   <th>Firefox (Gecko)</th>
   <th>IE</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Supporto base</td>
   <td>{{CompatChrome(42)}}</td>
   <td>14</td>
   <td>{{CompatGeckoDesktop(39)}}<br>
    34<sup>[1]</sup><br>
    {{ CompatGeckoDesktop(52)}}<sup>[2]</sup></td>
   <td>{{CompatNo}}</td>
   <td>29<br>
    28<sup>[1]</sup></td>
   <td>10.1</td>
  </tr>
  <tr>
   <td>{{domxref('ReadableStream')}}</td>
   <td>{{CompatChrome(43)}}</td>
   <td>14</td>
   <td>{{CompatNo}}<sup>[3]</sup></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android Webview</th>
   <th>Chrome for Android</th>
   <th>Edge</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Supporto base</td>
   <td>{{CompatChrome(42)}}</td>
   <td>{{CompatChrome(42)}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>10.1</td>
  </tr>
  <tr>
   <td>{{domxref('ReadableStream')}}</td>
   <td>{{CompatChrome(43)}}</td>
   <td>{{CompatChrome(43)}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatNo}}<sup>[3]</sup></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] Questa API è implementata ma dev'essere abilitata da un'opzione di Firefox.</p>

<p>[2] Per le versioni di Firefox precedenti la 52, <code>get()</code> ottiene solamente il primo valore nell'header specificato, mentre <code>getAll()</code> ottiene tutti i valori. Dalla versione 52 in avanti, <code>get()</code> ottiene tutti i valori e <code>getAll()</code> è stato eliminato.</p>

<p>[3] La lettura degli streams è disponibile nell'attuale versione di Firefox, ma deve essere abilitata tramite le opzioni <code>dom.streams.enabled</code> e <code>javascript.options.streams</code>.</p>

<h2 id="Guarda_anche">Guarda anche</h2>

<ul>
 <li><a href="/docs/Web/API/Fetch_API/Using_Fetch">Using Fetch</a></li>
 <li><a href="/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
 <li><a href="/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li>
 <li><a href="/docs/Web/HTTP">HTTP</a></li>
 <li><a href="https://github.com/github/fetch">Fetch polyfill</a></li>
 <li><a href="/docs/Web/API/Fetch_API/Basic_concepts">Fetch basic concepts</a></li>
</ul>