Fetch vs. AjaxCall
Quelle est la différence entre un AJAX typique et une API Fetch?
Considérez le scénario suivant:
function ajaxCall(url) {
return new Promise(function(resolve, reject) {
var req = new XMLHttpRequest();
req.open('GET', url);
req.onload = function() {
if (req.status == 200) {
resolve(req.response);
} else {
reject(Error(req.statusText));
}
};
req.onerror = function() {
reject(Error("Network Error"));
};
req.send();
});
}
ajaxCall('www.testSite').then(x => {
console.log(x)
}) // returns html of site
fetch('www.testSite').then(x => {
console.log(x)
}) // returns object with information about call
c'est Ce que l' fetch renvoie:
Response {type: "cors", url: "www.testSite", status: 200, ok: true, statusText: "OK"…}
pourquoi renvoie-t-il des choses différentes?
Est-il un moyen pour fetch pour retourner la même chose qu'un appel AJAX typique?
2 réponses
L'API Fetch a intégré des méthodes pour différents types de données.
Pour un texte/html normal, vous utiliserez le text() méthode, qui renvoie une promesse aussi bien, et enchaîne avec une autre puis appelle.
fetch('www.testSite').then( x => {
return x.text();
}).then( y => {
console.log(y);
});
les entrées pour le contenu retourné sont comme suit
- clone () - crée un clone d'un objet Response.
- error () - renvoie un nouvel objet de réponse associé à une erreur réseau.
- redirect() - Crée une nouvelle réponse avec une URL différente.
- arrayBuffer () - renvoie une promesse qui se résout avec un ArrayBuffer.
- blob () - renvoie une promesse qui se résout avec une Blob.
- formData () - renvoie une promesse qui se résout avec un objet FormData.
- json () - renvoie une promesse qui se résout avec un objet JSON.
- text () - renvoie une promesse qui se résout avec un USVString (text).
Il vous permet également de envoyer des choses au serveur,ou ajouter vos propres en-têtes, etc.
fetch('www.testSite', {
method : 'post',
headers : new Headers({
'Content-Type': 'application/x-www-form-urlencoded'
}),
body : new FormData(document.getElementById('myform'))
}).then( response => {
return response.json(); // server returned valid JSON
}).then( parsed_result => {
console.log(parsed_result);
});
votre ajaxCall renvoie le responsabiletext de L'objet XMLHttpRequest. Il est de filtrage.
vous devez lire le texte de la réponse dans le code fetch.
fetch('www.testSite').then( x => { console.log(x.text()); } )
vous pouvez aussi utiliser x.json() ou x.blob()