Anwendungsbeispiel für Fetch() in JavaScript (Code)

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.

Häufige Fallstricke beim Abrufen:

• 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'}).
  

Roh-XHR-Anfrage

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();

Abrufanforderung

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() akzeptiert einen zweiten optionalen Parameter, um die Init-Parameter verschiedener Konfigurationen zu steuern.

fetch(url).then(response => response.json())
  .then(data => console.log(data))
  .catch(e => console.log("Oops, error", e))

Anfrage mit Anmeldeinformationen

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'  
})

Datei hochladen

Verwenden Sie

,

und <input type="file" />FormData()fetch()Header

Verwenden Sie den Headers-Konstruktor, um ein Header-Objekt zu erstellen. Das Header-Objekt ist ein Mehrschlüssel-Wertepaar:

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:

Die Syntax ist prägnant und semantischer
Basiert auf der Standard-Promise-Implementierung und unterstützt Async/Await
Isomorphismus ist praktisch, verwenden Sie isomorphic-fetch

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!