Zoeken…
Syntaxis
- belofte = fetch (url) .then (functie (antwoord) {})
- belofte = ophalen (url, opties)
- belofte = ophalen (verzoek)
parameters
| opties | Details |
|---|---|
method | De HTTP-methode die voor het verzoek moet worden gebruikt. bijv .: GET , POST , PUT , DELETE , HEAD . Standaard ingesteld op GET . |
headers | Een object Headers met aanvullende HTTP-headers om in de aanvraag op te nemen. |
body | De payload van het verzoek kan een string of een FormData object zijn. Standaard undefined |
cache | De cachemodus. default , reload , no-cache |
referrer | De verwijzer van het verzoek. |
mode | cors , no-cors , same-origin . Standaard ingesteld op no-cors . |
credentials | omit , same-origin , include . Wordt standaard omit . |
redirect | follow , error , manual . Standaardwaarden follow . |
integrity | Bijbehorende integriteitsmetadata. Standaard wordt een lege string gebruikt. |
Opmerkingen
De Fetch-standaard definieert verzoeken, antwoorden en het proces dat ze bindt: ophalen.
Onder andere interfaces definieert de standaard Request en Response Objects, ontworpen om te worden gebruikt voor alle bewerkingen waarbij netwerkverzoeken betrokken zijn.
Een nuttige toepassing van deze interfaces is GlobalFetch , die kan worden gebruikt om externe bronnen te laden.
Voor browsers die de Fetch-standaard nog niet ondersteunen, heeft GitHub een polyfill beschikbaar. Daarnaast is er ook een Node.js-implementatie die handig is voor server / client-consistentie.
Bij afwezigheid van annuleerbare beloften kun je het ophaalverzoek niet afbreken ( github-probleem ). Maar er is een voorstel van de T39 in fase 1 voor opzegbare beloften.
GlobalFetch
De GlobalFetch -interface blootstelt het fetch functie, die gebruikt kunnen worden op het verzoek van de middelen.
fetch('/path/to/resource.json')
.then(response => {
if (!response.ok()) {
throw new Error("Request failed!");
}
return response.json();
})
.then(json => {
console.log(json);
});
De opgeloste waarde is een responsobject . Dit object bevat de hoofdtekst van de reactie, evenals de status en headers.
Verzoekkoppen instellen
fetch('/example.json', {
headers: new Headers({
'Accept': 'text/plain',
'X-Your-Custom-Header': 'example value'
})
});
POST-gegevens
Formuliergegevens posten
fetch(`/example/submit`, {
method: 'POST',
body: new FormData(document.getElementById('example-form'))
});
JSON-gegevens plaatsen
fetch(`/example/submit.json`, {
method: 'POST',
body: JSON.stringify({
email: document.getElementById('example-email').value,
comment: document.getElementById('example-comment').value
})
});
Verzend cookies
De ophaalfunctie verzendt standaard geen cookies. Er zijn twee mogelijke manieren om cookies te verzenden:
- Verzend alleen cookies als de URL van dezelfde oorsprong is als het oproepscript.
fetch('/login', {
credentials: 'same-origin'
})
- Stuur altijd cookies, zelfs voor oproepen van andere herkomst.
fetch('https://otherdomain.com/login', {
credentials: 'include'
})
JSON-gegevens verkrijgen
// 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));
Fetch gebruiken om vragen van de Stack Overflow API weer te geven
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'})`
}
});