1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
|
---
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>
|
