Interprétation de la méthode fetch en h5 (résumé)

En tant que nouvel objet dans H5, fetch est né pour remplacer l'existence d'ajax. Son objectif principal est simplement de se combiner avec ServiceWorkers pour réaliser les optimisations suivantes :

1. Optimiser l'expérience hors ligne
2. Restez évolutif

Bien sûr, si ServiceWorkers coopère avec la base de données côté navigateur IndexedDB, alors félicitations, chaque navigateur peut devenir un serveur proxy. (Cependant, je ne pense pas que ce soit une bonne chose. Cela rendra le frontal de plus en plus lourd, empruntant l'ancien chemin de l'architecture c/s précédente)

Puisqu'il s'agit d'une nouvelle méthode de h5, certains navigateurs plus anciens ne la prennent pas en charge. Pour ceux qui ne prennent pas en charge cette méthode.

Le navigateur doit ajouter un polyfill supplémentaire :

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

chercher(récupérer):

HTML :

 fetch('/users.html') //Ce qui est renvoyé ici est un objet Promise. Les navigateurs qui ne le prennent pas en charge doivent utiliser le ployfill ou le transcoder correspondant via Babel et d'autres transcodeurs avant d'exécuter then(function(response) { return. réponse .text()}) .then(function(body) { document.body.innerHTML = body})

JSON :

 fetch('/users.json') .then(function(response) { return réponse.json()}) .then(function(json) { console.log('parsed json', json)}) .catch(function (ex) { console.log('analyse échouée', ex)})

Métadonnées de réponse :

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

Formulaire de publication :

 var form = document.querySelector('form')fetch('/users', { méthode : 'POST', corps : new FormData(form)})

Publier du JSON :

 fetch('/users', { méthode : 'POST', en-têtes : { 'Accepter' : 'application/json', 'Content-Type' : 'application/json' }, corps : JSON.stringify({ //ici Le nom du corps de la demande de publication est-il : 'Hubot', login : 'hubot', })})

Téléchargement de fichiers :

 var input = document.querySelector('input[type=file]')var data = new FormData()data.append('file', input.files[0]) //Obtenir le contenu du fichier sélectionné data.append( ' utilisateur', 'hubot')fetch('/avatars', { méthode : 'POST', corps : données})

(1) Différences avec ajax :

1. La méthode patch ne générera pas d'erreur lors de la récupération des données, même une erreur 404 ou 500, sauf s'il s'agit d'une erreur réseau ou si le processus de requête est interrompu. Mais bien sûr, il existe une solution, voici la démonstration :

 function checkStatus(response) { if (response.status >= 200 && Response.status < 300) { // Détermine si le code d'état de la réponse est une réponse de retour normale // Renvoie l'objet de réponse d'origine normalement} else { var error = new Error (response .statusText) //Si c'est anormal, un message d'état d'erreur de réponse sera émis error.response = erreur de lancement de réponse }}function parseJSON(response) { return réponse.json()}fetch('/users') .then(checkStatus) .then(parseJSON) .then(function(data) { console.log('requête réussie avec réponse JSON', données) }).catch( function (erreur) { console.log ('échec de la demande', erreur) })

2. Un problème très critique est que la méthode fetch n'envoie pas de cookies, ce qui est très fatal lorsqu'il est nécessaire de maintenir une connexion constante entre le client et le serveur, car le serveur doit identifier une session via des cookies pour maintenir la session. état. Si vous souhaitez L'envoi de cookies nécessite de modifier les informations :

 fetch('/users', { informations d'identification : 'same-origin' //Envoyer des cookies dans le même domaine})fetch('https://segmentfault.com', { informations d'identification : 'include' //Envoyer des cookies entre domaines} )

La figure ci-dessous est le résultat de l'accès inter-domaines au segment

À tout le moins, l'URL demandée et l'URL de réponse sont identiques, mais si une opération telle que la redirection est effectuée, le fichier réponse.url peut être différent dans XHR, le fichier réponse.url après la redirection peut ne pas être précis et doit être défini. : réponse.headers['X-Request-URL'] = request.url convient à (Firefox < 32, Chrome < 37, Safari ou IE.)

Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.