Il metodo fetch()
del mixin WindowOrWorkerGlobalScope
avvia il processo di recupero di una risorsa dalla rete. Questo ritorna una "promise" che si risolve all'oggetto Response
che rappresenta la risposta alla tua richiesta.
WorkerOrGlobalScope
è implementato sia da Window
sia da WorkerGlobalScope
, ciò significa che il metodo fetch()
è disponibile in quasi tutti i contesti nei quali potresti voler recuperare risorse..
Una promise fetch()
responge con un TypeError
quando viene incontrato un errore di rete, sebbene questo stia spesso a significare un errore di permessi o simili. Un controllo accurato per un fetch()
di successo richiederebbe di controllare che la promise si sia risolta, e anche il controllo che la proprietà Response.ok
ha valore true
. Uno stato HTTP 404 non costituisce un errore di rete.
Il metodo fetch()
è controllato dalla direttiva connect-src
della Content Security Policy piuttosto che dalla direttiva delle risorse che sta recuperando.
Nota: I parametri del metodo fetch()
sono identici a quelli del costruttore Request()
.
Sintassi
Promise<Response> fetch(input[, init]);
Parametri
- input
- Definisce la risorsa ceh vuoi recuperare. Questa può essere:
- init Optional
- Un oggetto opzioni contenente qualsiasi impostazione personalizzata che si vuole applicare alla richiesta. Le opzioni possibili sono:
method
: Il metodo di richiesta, es.,GET
,POST
.headers
: Qualsiasi header si voglia aggiungere alla richiesta, contenuto in un oggettoHeaders
o un oggetto letterale con valoriByteString
.body
: Qualsiasi corpo si voglia aggiungere alla richiesta: può essere un oggettoBlob
,BufferSource
,FormData
,URLSearchParams
, oUSVString
. Si noti che una richiesta che usa il metodoGET
oHEAD
non può avere un corpo.mode
: La modalità che si vuole usare per la richiesta, es.,cors
,no-cors
, osame-origin
.credentials
: Le credenziali che si vuole vengano usate per la richiesta:omit
,same-origin
, oinclude
. Per inviare automaticamente dei cookies per il dominio corrente, questa opzione deve essere indicata. Iniziando da Chrome 50, questa proprietà accetta anche un'istanzaFederatedCredential
oPasswordCredential
.cache
: La modalità cache ceh si vuole usare per la richiesta:default
,no-store
,reload
,no-cache
,force-cache
, oonly-if-cached
.redirect
: Il metodo di reindirizzamento:follow
(seguire automaticamente i reindirizzamenti),error
(interrompere con un errore se avviene un reindirizzamento), omanual
(gestire manualmente i reindirizzamento). In Chrome il valore di default èfollow
(prima di Chrome 47 era impostato amanual
).referrer
: UnaUSVString
che specificano-referrer
,client
, o una URL. Il valore predefinito èclient
.referrerPolicy
: Specifica il valore dello header HTTP del referente. Può essere:no-referrer
,no-referrer-when-downgrade
,origin
,origin-when-cross-origin
,unsafe-url
.integrity
: Contiene il valore di integrità della sottorisorsa (subresource integrity) della richiesta (es.,sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=
).keepalive
: L'opzionekeepalive
può essere usata per premettere alla richiesta di sopravvivere alla pagina. Il recupero di una risorsa con l'opzionekeepalive
sostituisce l'APINavigator.sendBeacon()
.signal
: Un'istanza oggettoAbortSignal
; permette di comunicare con una richiesta di recupero e di interromperla se lo si desidera con unAbortController
.
Valore di ritorno
Eccezioni
Tipo | Descrizione |
---|---|
AbortError |
La richiesta è stata interrotta (tramite AbortController.abort() ). |
TypeError |
Da Firefox 43, fetch() produrrà un TypeError se la URL possiede credenziali, come http://user:password@example.com . |
Esempi
Nel nostro esempio Fetch Request (vedi Fetch Request live) viene creata un nuovo oggetto Request
usando il costruttore relativo, per poi recuperarlo con una chiamata fetch()
. Siccome stiamo recuperando un'immagine, eseguiamo Body.blob()
alla risposta per dargli il tipo MIME adeguato in modo che venga gestito correttamente, poi creiamo un Oggetto URL dello stesso e lo mostriamo in un elemento <img>
.
var myImage = document.querySelector('img');
var myRequest = new Request('flowers.jpg');
fetch(myRequest).then(function(response) {
return response.blob();
}).then(function(response) {
var objectURL = URL.createObjectURL(response);
myImage.src = objectURL;
});
Nel nostro esempio Fetch with init then Request (vedi Fetch Request init live) facciamo la stessa cosa eccetto che passiamo un oggetto per l'inizializzazione quando invochiamo fetch()
:
var myImage = document.querySelector('img');
var myHeaders = new Headers();
myHeaders.append('Content-Type', 'image/jpeg');
var myInit = { method: 'GET',
headers: myHeaders,
mode: 'cors',
cache: 'default' };
var myRequest = new Request('flowers.jpg');
fetch(myRequest,myInit).then(function(response) {
...
});
Si noti che si può passare l'oggetto per l'inizializzazione insieme al costruttore Request
per ottenere lo stesso effetto, es.:
var myRequest = new Request('flowers.jpg', myInit);
Si può anche usare un oggetto letterale come headers
in init
.
var myInit = { method: 'GET',
headers: {
'Content-Type': 'image/jpeg'
},
mode: 'cors',
cache: 'default' };
var myRequest = new Request('flowers.jpg', myInit);
Specificazioni
Specificazioni | Status | Comment |
---|---|---|
Fetch The definition of 'fetch()' in that specification. |
Living Standard | Definito in un WindowOrWorkerGlobalScope parziale nella specifica più recente. |
Fetch The definition of 'fetch()' in that specification. |
Living Standard | Definizione iniziale |
Credential Management Level 1 | Working Draft | Aggiunge l'istanza FederatedCredential o PasswordCredential com un valore possibile per init.credentials . |
Compatibilità Browser
BCD tables only load in the browser