Interpretation der Abrufmethode in h5 (Zusammenfassung)

Als neues Objekt in H5 wurde fetch geboren, um die Existenz von Ajax zu ersetzen. Sein Hauptzweck besteht lediglich darin, mit ServiceWorkers zu kombinieren, um die folgenden Optimierungen zu erreichen:

1. Optimieren Sie das Offline-Erlebnis
2. Bleiben Sie skalierbar

Wenn ServiceWorkers natürlich mit der browserseitigen Datenbank IndexedDB zusammenarbeitet, dann herzlichen Glückwunsch, jeder Browser kann zum Proxyserver werden. (Ich denke jedoch nicht, dass dies eine gute Sache ist. Dadurch wird das Frontend immer schwerer und der alte Weg der vorherigen C/S-Architektur wird eingeschlagen.)

Da es sich um eine neue Methode von h5 handelt, muss es einige ältere Browser geben, die sie nicht unterstützen. Für diejenigen, die diese Methode nicht unterstützen

Der Browser muss eine zusätzliche Polyfüllung hinzufügen:

[Link]: https://github.com/fis-components/whatwg-fetch

ferch(holen):

HTML:

 fetch('/users.html') //Was hier zurückgegeben wird, ist ein Promise-Objekt, das das entsprechende Ployfill oder die Transcodierung durch babel und andere Transcoder verwenden muss, bevor es ausgeführt wird Antwort .text()}) .then(function(body) { document.body.innerHTML = body})

JSON:

 fetch('/users.json') .then(function(response) { return Response.json()}) .then(function(json) { console.log('parsed json', json)}) .catch(function (ex) { console.log('parsing failed', ex)})

Antwortmetadaten:

 fetch('/users.json').then(function(response) { console.log(response.headers.get('Content-Type')) console.log(response.headers.get('Date')) Konsole .log(response.status) console.log(response.statusText)})

Postformular:

 var form = document.querySelector('form')fetch('/users', { method: 'POST', body: new FormData(form)})

JSON-Beitrag:

 fetch('/users', { method: 'POST', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' }, body: JSON.stringify({ //here Ist der Anfragetextname der Post-Anfrage: „Hubot“, Login: „hubot“, })})

Datei-Upload:

 var input = document.querySelector('input[type=file]')var data = new FormData()data.append('file', input.files[0]) //Den ausgewählten Dateiinhalt abrufen data.append( ' user', 'hubot')fetch('/avatars', { method: 'POST', body: data})

(1) Unterschiede zu Ajax:

1. Die Patch-Methode gibt beim Abrufen von Daten keinen Fehler aus, auch keinen 404- oder 500-Fehler, es sei denn, es handelt sich um einen Netzwerkfehler oder der Anforderungsprozess wird unterbrochen. Aber natürlich gibt es eine Lösung, hier ist die Demonstration:

 function checkStatus(response) { if (response.status >= 200 && Response.status < 300) { //Bestimmen Sie, ob der Antwortstatuscode normal ist. Antwort zurückgeben //Das ursprüngliche Antwortobjekt normal zurückgeben} else { var error = neuer Fehler (response .statusText) //Wenn es abnormal ist, wird eine Antwortfehlerstatusmeldung ausgegeben. error.response = Antwort löst Fehler aus }}function parseJSON(response) { return Response.json()}fetch('/users') .then(checkStatus) .then(parseJSON) .then(function(data) { console.log('Anfrage erfolgreich mit JSON-Antwort', Daten) }).catch( function(error) { console.log('request failed', error) })

2. Ein sehr kritisches Problem besteht darin, dass die Abrufmethode keine Cookies sendet. Dies ist sehr schwerwiegend, wenn eine ständige Verbindung zwischen dem Client und dem Server aufrechterhalten werden muss, da der Server eine Sitzung über Cookies identifizieren muss, um die Sitzung aufrechtzuerhalten Wenn Sie Cookies senden möchten, müssen Sie die Informationen ändern:

 fetch('/users', { credentials: 'same-origin' //Cookies in derselben Domäne senden})fetch('https://segmentfault.com', { credentials: 'include' //Cookies über Domänen hinweg senden} )

Die folgende Abbildung ist das Ergebnis des domänenübergreifenden Zugriffs auf das Segment

Wenn nichts anderes passiert, sind die angeforderte URL und die Antwort-URL identisch, aber wenn eine Operation wie eine Umleitung ausgeführt wird, ist die Antwort-URL möglicherweise unterschiedlich. In XHR muss die Antwort-URL nach der Umleitung möglicherweise nicht korrekt sein : Response.headers['X-Request-URL'] = request.url ist geeignet für (Firefox < 32, Chrome < 37, Safari oder IE.)

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.