Sök…
Syntax
- lovande = hämta (url) .then (funktion (svar) {})
- löfte = hämta (url, alternativ)
- löfte = hämta (begär)
parametrar
| alternativ | detaljer |
|---|---|
method | HTTP-metoden som ska användas för begäran. ex: GET , POST , PUT , DELETE , HEAD . Standardinställningar för GET . |
headers | Ett Headers objekt som innehåller ytterligare HTTP-rubriker att inkludera i begäran. |
body | Begäran nyttolast, kan vara en string eller ett FormData objekt. Standardvärden är undefined |
cache | Cache-läget. default , reload , no-cache |
referrer | Hänvisaren till begäran. |
mode | cors , no-cors , same-origin . Standardvärdet för no-cors . |
credentials | omit , same-origin , include . Standard att omit . |
redirect | follow , error , manual . Standard att follow . |
integrity | Associerade integritetsmetadata. Standard som tom sträng. |
Anmärkningar
Fetch-standarden definierar förfrågningar, svar och processen som binder dem: hämta.
Bland andra gränssnitt definierar standarden Request and Response Objects, utformade för att användas för alla operationer som involverar nätverksförfrågningar.
En användbar applikation av dessa gränssnitt är GlobalFetch , som kan användas för att ladda fjärrresurser.
För webbläsare som ännu inte stöder Fetch-standarden har GitHub en polyfyll tillgänglig. Dessutom finns det en Node.js-implementering som är användbar för server / klientkonsistens.
I avsaknad av avbokningsbara löften kan du inte avbryta hämtningsbegäran ( github-fråga ). Men det finns ett förslag från T39 i steg 1 om avbokningsbara löften.
GlobalFetch
GlobalFetch- gränssnittet visar fetch , som kan användas för att begära resurser.
fetch('/path/to/resource.json')
.then(response => {
if (!response.ok()) {
throw new Error("Request failed!");
}
return response.json();
})
.then(json => {
console.log(json);
});
Det beslutade värdet är ett svar Object. Det här objektet innehåller svarets kropp, såväl som status och rubriker.
Ställ in begärhuvud
fetch('/example.json', {
headers: new Headers({
'Accept': 'text/plain',
'X-Your-Custom-Header': 'example value'
})
});
POST-data
Posterar formulärdata
fetch(`/example/submit`, {
method: 'POST',
body: new FormData(document.getElementById('example-form'))
});
Posterar JSON-data
fetch(`/example/submit.json`, {
method: 'POST',
body: JSON.stringify({
email: document.getElementById('example-email').value,
comment: document.getElementById('example-comment').value
})
});
Skicka kakor
Hämtningsfunktionen skickar inte cookies som standard. Det finns två möjliga sätt att skicka cookies:
- Skicka bara kakor om webbadressen har samma ursprung som det samtalskriptet.
fetch('/login', {
credentials: 'same-origin'
})
- Skicka alltid cookies, även för samtal mellan andra länder.
fetch('https://otherdomain.com/login', {
credentials: 'include'
})
Få JSON-data
// 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));
Använda Fetch för att visa frågor från Stack Overflow API
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'})`
}
});
