Ricerca…
Sintassi
- promise = fetch (url) .then (function (response) {})
- promise = fetch (url, options)
- promise = fetch (richiesta)
Parametri
| Opzioni | Dettagli |
|---|---|
method | Il metodo HTTP da utilizzare per la richiesta. ex: GET , POST , PUT , DELETE , HEAD . Il valore predefinito è GET . |
headers | Un oggetto Headers contenente intestazioni HTTP aggiuntive da includere nella richiesta. |
body | Il carico utile della richiesta può essere una string o un oggetto FormData . Il valore predefinito è undefined |
cache | La modalità di memorizzazione nella cache. default , reload , no-cache |
referrer | Il referrer della richiesta. |
mode | cors , no-cors , same-origin . Predefinito a no-cors . |
credentials | omit , same-origin , include . Predefinito per omit . |
redirect | follow , error , manual . Predefinito da follow . |
integrity | Metadati di integrità associati. Il valore predefinito è una stringa vuota. |
Osservazioni
Lo standard Fetch definisce le richieste, le risposte e il processo che li lega: il recupero.
Tra le altre interfacce, lo standard definisce gli oggetti di Request e Response , progettati per essere utilizzati per tutte le operazioni che coinvolgono le richieste di rete.
Un'utile applicazione di queste interfacce è GlobalFetch , che può essere utilizzata per caricare risorse remote.
Per i browser che non supportano ancora lo standard Fetch, GitHub ha un polyfill disponibile. Inoltre, esiste anche un'implementazione Node.js che è utile per coerenza server / client.
In assenza di promesse cancellabili non è possibile annullare la richiesta di recupero ( problema github ). Ma c'è una proposta del T39 nella fase 1 per le promesse cancellabili.
GlobalFetch
L'interfaccia GlobalFetch espone la funzione di fetch , che può essere utilizzata per richiedere risorse.
fetch('/path/to/resource.json')
.then(response => {
if (!response.ok()) {
throw new Error("Request failed!");
}
return response.json();
})
.then(json => {
console.log(json);
});
Il valore risolto è un oggetto risposta . Questo oggetto contiene il corpo della risposta, così come lo stato e le intestazioni.
Imposta intestazioni di richiesta
fetch('/example.json', {
headers: new Headers({
'Accept': 'text/plain',
'X-Your-Custom-Header': 'example value'
})
});
Dati POST
Pubblicazione dei dati del modulo
fetch(`/example/submit`, {
method: 'POST',
body: new FormData(document.getElementById('example-form'))
});
Pubblicazione di dati JSON
fetch(`/example/submit.json`, {
method: 'POST',
body: JSON.stringify({
email: document.getElementById('example-email').value,
comment: document.getElementById('example-comment').value
})
});
Invia i cookie
La funzione di recupero non invia i cookie per impostazione predefinita. Esistono due modi per inviare i cookie:
- Invia solo cookie se l'URL è della stessa origine dello script chiamante.
fetch('/login', {
credentials: 'same-origin'
})
- Invia sempre i cookie, anche per le chiamate incrociate.
fetch('https://otherdomain.com/login', {
credentials: 'include'
})
Ottenere dati JSON
// get some data from stackoverflow
fetch("https://api.stackexchange.com/2.2/questions/featured?order=desc&sort=activity&site=stackoverflow")
.then(resp => resp.json())
.then(json => console.log(json))
.catch(err => console.log(err));
Utilizzo del recupero per visualizzare le domande dall'API di overflow dello stack
const url =
'http://api.stackexchange.com/2.2/questions?site=stackoverflow&tagged=javascript';
const questionList = document.createElement('ul');
document.body.appendChild(questionList);
const responseData = fetch(url).then(response => response.json());
responseData.then(({items, has_more, quota_max, quota_remaining}) => {
for (const {title, score, owner, link, answer_count} of items) {
const listItem = document.createElement('li');
questionList.appendChild(listItem);
const a = document.createElement('a');
listItem.appendChild(a);
a.href = link;
a.textContent = `[${score}] ${title} (by ${owner.display_name || 'somebody'})`
}
});