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

async/await dans 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!