In diesem Artikel geht es um die Verwendungsbeispiele (Code) von Fetch() in JavaScript. Ich hoffe, dass er für Freunde hilfreich ist.
Fetch() bietet eine Möglichkeit, Ressourcen im gesamten Netzwerk asynchron anzufordern und wird verwendet, um auf Teile der HTTP-Pipeline zuzugreifen und diese zu betreiben, wie z. B. Anfragen und Antworten.
Wenn ein HTTP-Statuscode empfangen wird, der auf einen Fehler hinweist, wird das von fetch() zurückgegebene Promise nicht als abgelehnt markiert (auch wenn das Statuscode ist 404 oder 500). fetch() markiert den Promise-Status als gelöst (resolve gibt jedoch einen Wert zurück, aber die OK-Eigenschaft ist auf false gesetzt). Ein Netzwerkfehler oder eine blockierte Anfrage wird als abgelehnt markiert.
fetch() sendet oder empfängt keine Cookies vom Server. Das Senden von Cookies erfordert das Setzen der Option fetch(url, {credentials: 'include'}).
var xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.responseType = 'json';
xhr.onload = function() {
console.log(xhr.response);
};
xhr.onerror = function() {
console.log("Oops, error");
};
xhr.send();fetch(url).then(function(response) {
return response.json();
}).then(function(data) {
console.log(data);
}).catch(function(e) {
console.log("Oops, error");
});Pfeilfunktionen verwenden: und auf der Konsole drucken. Geben Sie den Ressourcenpfad an, geben Sie dann ein Antwortobjekt zurück und verwenden Sie die Methode json(), um den JSON-Inhalt abzurufen.
Fetch-Parameter
fetch(url).then(response => response.json())
.then(data => console.log(data))
.catch(e => console.log("Oops, error", e))Anfrage mit Anmeldeinformationen
// Example POST method implementation:
postData('http://example.com/answer', {answer: 42})
.then(data => console.log(data)) // JSON from `response.json()` call
.catch(error => console.error(error))
function postData(url, data) {
// Default options are marked with *
return fetch(url, {
body: JSON.stringify(data), // must match 'Content-Type' header
cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
credentials: 'same-origin', // include, same-origin, *omit
headers: {
'user-agent': 'Mozilla/4.0 MDN Example',
'content-type': 'application/json'
},
method: 'POST', // *GET, POST, PUT, DELETE, etc.
mode: 'cors', // no-cors, cors, *same-origin
redirect: 'follow', // manual, *follow, error
referrer: 'no-referrer', // *client, no-referrer
})
.then(response => response.json()) // parses response to JSON
}Wenn Anmeldeinformationen von derselben Quelle gesendet werden:
fetch('https://example.com', {
//将credentials: 'include'添加到传递给fetch()方法的init对象
credentials: 'include'
})Stellen Sie sicher, dass der Browser nicht enthalten ist Die Anfrage enthält Anmeldeinformationen:
fetch('https://example.com', {
credentials: 'same-origin'
})JSON-Daten hochladen
fetch('https://example.com', {
credentials: 'omit'
}) und <input type="file" />FormData()fetch()Header
var url = 'https://example.com/profile';
var data = {username: 'example'};
fetch(url, {
method: 'POST', // or 'PUT'
body: JSON.stringify(data), // data can be `string` or {object}!
headers: new Headers({
'Content-Type': 'application/json'
})
}).then(res => res.json())
.catch(error => console.error('Error:', error))
.then(response => console.log('Success:', response));Der Inhalt kann abgerufen werden:
var content = "Hello World";
var myHeaders = new Headers();
myHeaders.append("Content-Type", "text/plain");
myHeaders.append("Content-Length", content.length.toString());
myHeaders.append("X-Custom-Header", "ProcessThisImmediately");Zusammenfassend lässt sich sagen, dass das Die Hauptvorteile von Fetch sind:
Das obige ist der detaillierte Inhalt vonAnwendungsbeispiel für Fetch() in JavaScript (Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
