Suche…
Syntax
- promise = fetch (url) .then (Funktion (Antwort) {})
- Promise = Abruf (URL, Optionen)
- Versprechen = Abruf (Anfrage)
Parameter
| Optionen | Einzelheiten |
|---|---|
method | Die für die Anforderung zu verwendende HTTP-Methode. zB: GET , POST , PUT , DELETE , HEAD . Standardeinstellung auf GET . |
headers | Ein Headers Objekt, das zusätzliche HTTP-Header enthält, die in die Anforderung aufgenommen werden sollen. |
body | Die Anforderungsnutzlast kann eine string oder ein FormData Objekt sein. Der Standardwert ist undefined |
cache | Der Cache-Modus. default , reload , no-cache |
referrer | Der Referrer der Anfrage. |
mode | cors , no-cors same-origin . Der Standardwert ist " no-cors . |
credentials | omit , same-origin , include . Standardwerte zum omit . |
redirect | follow , error , manual . Standardeinstellungen follow . |
integrity | Zugehörige Integritätsmetadaten. Der Standardwert ist eine leere Zeichenfolge. |
Bemerkungen
Der Abrufstandard definiert Anforderungen, Antworten und den Prozess, der sie bindet: Abrufen.
Neben anderen Schnittstellen definiert der Standard Request und Response Objekte, die für alle Vorgänge mit Netzwerkanforderungen bestimmt sind.
Eine nützliche Anwendung dieser Schnittstellen ist GlobalFetch , mit dem Remote-Ressourcen geladen werden können.
Für Browser, die den Fetch-Standard noch nicht unterstützen, verfügt GitHub über eine Polyfill . Darüber hinaus gibt es eine Node.js-Implementierung , die für die Server / Client-Konsistenz nützlich ist.
Wenn keine stornierbaren Versprechen vorliegen, können Sie die Abrufanforderung nicht abbrechen ( Problem mit Github ). Es gibt jedoch einen Vorschlag des T39 in Stufe 1 für kündbare Versprechen.
GlobalFetch
Die GlobalFetch Schnittstelle macht die fetch die verwendet werden können , Mittel zu beantragen.
fetch('/path/to/resource.json')
.then(response => {
if (!response.ok()) {
throw new Error("Request failed!");
}
return response.json();
})
.then(json => {
console.log(json);
});
Der aufgelöste Wert ist ein Antwortobjekt . Dieses Objekt enthält den Hauptteil der Antwort sowie Status und Header.
Anforderungsheader festlegen
fetch('/example.json', {
headers: new Headers({
'Accept': 'text/plain',
'X-Your-Custom-Header': 'example value'
})
});
Post-Daten
Buchungsformulardaten
fetch(`/example/submit`, {
method: 'POST',
body: new FormData(document.getElementById('example-form'))
});
JSON-Daten buchen
fetch(`/example/submit.json`, {
method: 'POST',
body: JSON.stringify({
email: document.getElementById('example-email').value,
comment: document.getElementById('example-comment').value
})
});
Cookies senden
Die Abruffunktion sendet standardmäßig keine Cookies. Es gibt zwei Möglichkeiten, Cookies zu senden:
- Senden Sie Cookies nur, wenn die URL den gleichen Ursprung wie das aufrufende Skript hat.
fetch('/login', {
credentials: 'same-origin'
})
- Senden Sie immer Cookies, auch wenn Sie Anrufe aus anderen Ländern führen.
fetch('https://otherdomain.com/login', {
credentials: 'include'
})
JSON-Daten abrufen
// 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));
Verwenden von Abrufen zum Anzeigen von Fragen aus der 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'})`
}
});