WindowOrWorkerGlobalScope.fetch()
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
(en-US) che rappresenta la risposta alla tua richiesta.
WorkerOrGlobalScope
è implementato sia da Window
sia da WorkerGlobalScope
(en-US), 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
(en-US) 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()
(en-US).
Sintassi
Promise<Response> fetch(input[, init]);
Parametri
- input
- Definisce la risorsa ceh vuoi recuperare. Questa può essere:
- Una
USVString
(en-US) contenente l'URL diretto della risorsa che vuoi recuperare. Alcuni browsers accettanoblob:
edata:
come schemi. - Un oggetto
Request
(en-US).
- Una
- 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
(en-US) o un oggetto letterale con valoriByteString
(en-US).body
: Qualsiasi corpo si voglia aggiungere alla richiesta: può essere un oggettoBlob
(en-US),BufferSource
(en-US),FormData
(en-US),URLSearchParams
(en-US), oUSVString
(en-US). 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
(en-US) oPasswordCredential
(en-US).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
(en-US) 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()
(en-US).signal
: Un'istanza oggettoAbortSignal
(en-US); permette di comunicare con una richiesta di recupero e di interromperla se lo si desidera con unAbortController
(en-US).
Valore di ritorno
Una Promise
(en-US) che risolve ad un oggetto Response
(en-US).
Eccezioni
Tipo | Descrizione |
---|---|
AbortError |
La richiesta è stata interrotta (tramite AbortController.abort() (en-US)). |
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
(en-US) usando il costruttore relativo, per poi recuperarlo con una chiamata fetch()
. Siccome stiamo recuperando un'immagine, eseguiamo Body.blob()
(en-US) 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 (en-US) o PasswordCredential (en-US) com un valore possibile per init.credentials . |
Compatibilità Browser
BCD tables only load in the browser