Maison >interface Web >js tutoriel >Utilisez Fetch pour faire des requêtes http
Cette fois, je vais vous présenter quelques-unes des précautions concernant l'utilisation de Fetch pour faire des requêtes http. Ce qui suit est un cas pratique, jetons-y un coup d'œil.
L'Ajax traditionnel utilise XMLHttpRequest (XHR) pour envoyer des requêtes d'obtention de données, sans prêter attention au principe de séparation. L'API Fetch est conçue sur la base de Promise et est conçue pour résoudre les problèmes XHR.
XMLHttpRequest est une API mal conçue avec une configuration et des méthodes d'appel très déroutantes.
Utilisez XHR pour envoyer une requête json :
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();
Après avoir utilisé fetch pour effectuer la requête :
fetch(url).then(function(response){ return response.json(); }).then(function(data){ console.log(data); }).catch(function(e){ console.log('error' + e); });
Méthode d'écriture es6 :
fetch(url).then(response=>response.json()) .then(data=>console.log(data)) .catch(e=>console.log('error' + e));
Traiter le texte/html Réponse :
fetch(url).then(response=>response.text()) .then(data=>console.log(data)) .catch(e=>console.log('error' + e));
Obtenir les informations d'en-tête :
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);
Définir les informations d'en-tête
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);
Envoyer le formulaire
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);
Soumettre des données JSON
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);
fonctionnalités de récupération
Syntaxe simple, plus sémantique
Basé sur l'implémentation standard de Promise, prend en charge async/await
L'isomorphisme est pratique, utilisez isomorphic-fetch
compatibilité de récupération
Compatibilité du navigateur
la prise en charge native de la récupération n'est pas élevée, mais vous pouvez utiliser certains polyfills.
IE8 est la syntaxe es3 et doit introduire es5 polyfill : es5-shim
Syntaxe de promesse de prise en charge : es6-promise
fetch polyfill : fetch-polyfill
Pour utiliser jsonp, vous devez également introduire : fetch-jsonp
Pour activer le mode d'exécution de babel, vous pouvez utiliser async/await
fetchFAQ
fetch La requête n'inclut pas les cookies par défaut. Vous devez définir fetch(url,{credentials: 'include'});
Le serveur ne rejettera pas s'il renvoie 400. ou 500 codes d'erreur. Seules les demandes d'erreur réseau ne peuvent pas être rejetées uniquement une fois terminées ;
Résumé
L'API de récupération semble simple, mais il s'agit d'une amélioration apportée par l'amélioration et l'amélioration continues. de la syntaxe js.
Étant donné que diverses bibliothèques sont généralement introduites dans les projets pour résoudre des problèmes sous-jacents, elles ne prêtent pas beaucoup d'attention à l'ajout et à l'expansion des API de base. Au fil du temps, elles développeront un sentiment de séparation par rapport aux normes. À l'avenir, nous devrions accorder plus d'attention aux changements et à la mise en œuvre de base de l'API sous-jacente.
Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !
Lecture recommandée :
Utilisation du CSS dans React.js
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!