Verwenden Sie Fetch, um http-Anfragen zu stellen

Dieses Mal werde ich Ihnen einige der Vorsichtsmaßnahmen für die Verwendung von Fetch zum Erstellen von HTTP-Anfragen vorstellen. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

Traditionelles Ajax verwendet XMLHttpRequest (XHR), um Anfragen zum Abrufen von Daten zu senden, ohne auf das Trennungsprinzip zu achten. Die Fetch-API basiert auf Promise und soll XHR-Probleme lösen.

XMLHttpRequest ist eine schlecht gestaltete API mit sehr verwirrenden Konfigurations- und Aufrufmethoden.
Verwenden Sie XHR, um eine JSON-Anfrage zu senden:

var xhr = new XMLHttpRequest();
xhr.open('GET',url);
xhr.responseType = 'json';
xhr.onload = function(){    console.log(xhr.response);
}
xhr.onerror = function(){    console.log('xhr error');
}
xhr.send();

Nachdem Sie fetch verwendet haben, um die Anfrage zu stellen:

fetch(url).then(function(response){    return response.json();
}).then(function(data){    console.log(data);
}).catch(function(e){    console.log('error' + e);
});

es6-Schreibmethode:

fetch(url).then(response=>response.json())
    .then(data=>console.log(data))
    .catch(e=>console.log('error' + e));

Text/HTML-Antwort verarbeiten:

fetch(url).then(response=>response.text())
    .then(data=>console.log(data))
    .catch(e=>console.log('error' + e));

Header-Informationen abrufen:

fetch(url).then((response)=>{    console.log(response.status);    console.log(response.statusText);    console.log(response.headers.get('Content-Type'));    console.log(response.headers.get('Date'));    return response.json();
}).then(data=>console.log(data))
  .catch(e=>console.log('error' + e);

Header-Informationen festlegen

fetch(url,{    headers:{        'Accept': 'application/json',        'Content-Type': 'application/json'
    }
}).then(response=>response.json())
  .then(data=>console.log(data))
  .catch(e=>console.log('error' + e);

Formular absenden

fetch(url,{    method: 'post',    body: new FormData(document.getElementById('form'))
}).then(response=>response.json())
  .then(data=>console.log(data))
  .catch(e=>console.log('error' + e);

JSON-Daten senden

fetch(url,{    method: 'post',    body: JSON.stringify({        username: document.getElementById('username').value,        password: document.getElementById('password').value
    })
}).then(response=>response.json())
  .then(data=>console.log(data))
  .catch(e=>console.log('error' + e);

Abruffunktionen

Einfache Syntax, mehr Semantik

Basierend auf der Standard-Promise-Implementierung, unterstützt Async/Wait

Isomorphismus ist praktisch, verwenden Sie isomorphic-fetch

Fetch-Kompatibilität

Browserkompatibilität

Die native Unterstützung für Fetch ist nicht hoch, aber Sie können einige Polyfills verwenden.

IE8 ist es3-Syntax und muss es5-Polyfill einführen: es5-shim

Syntax für Unterstützungsversprechen: es6-promise

Fetch-Polyfill: fetch-polyfill

Um JSONP zu verwenden, müssen Sie außerdem Folgendes einführen: fetch-jsonp

Um den Laufzeitmodus von babel zu aktivieren, können Sie async/await

fetchFAQ

include'});

Da in Projekten im Allgemeinen verschiedene Bibliotheken eingeführt werden, um zugrunde liegende Probleme zu lösen, schenken sie der Hinzufügung und Erweiterung grundlegender APIs nicht viel Aufmerksamkeit. Mit der Zeit entwickeln sie ein Gefühl der Trennung von Standards. In Zukunft sollten wir den Änderungen und der grundlegenden Implementierung der zugrunde liegenden API mehr Aufmerksamkeit schenken.

CSS-Verwendung in React.js

async/await in JS

Das obige ist der detaillierte Inhalt vonVerwenden Sie Fetch, um http-Anfragen zu stellen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!