Fetch vs Ajax

Comment utiliser fetch avec async/await en JavaScript. Comparaison avec Ajax

Fetch est une API des navigateurs pour charger des textes, images, données structurées, de façon asynchrone pour mettre à jour une page HTML.

On trouvera que cela ressemble un peu à la définition d'Ajax! Mais Fetch est construit sur l'objet Promise ce qui simplifie beaucoup le code, surtout si on l'emploi en conjonction avec async/await. On pourrait aussi utiliser des promises avec l'objet XMLHttpRequest, mais cela, ajouté au code déjà plus complexe d'Ajax produirait un programme nettement plus imposant.

Fetch est compatible avec tous les navigateurs récents y compris Edge, mais pas avec Internet Explorer. Par conséquent si l'on recherche une compatibilité maximale, on continuera d'utiliser Ajax pour mettre à jour une page web. Si par ailleurs on cherche une interaction avec le serveur, l'objet WebSocket est également plus approprié que fetch. Dans les autres cas, fetch offre une grande simplicité pour charger du contenu dans une page, comme on va les voir avec les démonstrations suivantes.

Charger un texte

Fetch charge une ressource qui est convertie en chaîne avec la méthode text(). Les deux retournent une promise, aussi on emploi await pour attendre que le résultat soit retourné. 

<fieldset>
<p id="textdemo"></p>
</fieldset>

<script>
var textdemo = document.getElementById('textdemo');

async function loadText(fname) {
	var str = await fetch(fname)
	textdemo.innerHTML = await str.text()
}

loadText("demotext.txt")
</script>

Charger une image

Dans le cas d'une image, fetch retourne un contenu sous forme de blob avec la méthode blob(). Alors que la balise image requiert qu'une URL soit assignée à l'attribut src. On convertit donc le contenu obtenu par fetch en URL avec la méthode createObjectURL de URL. 

<fieldset>
<img id="imgdemo" />
</fieldset>

<script>
var imgdemo = document.getElementById('imgdemo');

async function loadImage(fname) {
	var response = await fetch(fname)
	imgdemo.src =  URL.createObjectURL( await response.blob() )
}

loadImage("images/angry-birds.jpg")
</script>

Charger un fichier JSON

Un fichier JSON est chargé comme une ressource par fetch et parsé en objet JavaScript avec la méthode json(). On peut alors accéder aux valeurs des attributs de l'objet par leur nom. 

<fieldset>
<p>Name <input type="text" id="jsondemo1" value="" /></p>
<p>Year <input type="text" id="jsondemo2" value="" /></p>
</fieldset>

<script>
async function loadJSON(fname) {
	var response = await fetch(fname)
	var j =  await response.json()
	document.getElementById('jsondemo1').value = j.name
	document.getElementById('jsondemo2').value = j.year
}

loadJSON("demojson.json")
</script>

Name

Year

Ajouter un contrôle

On peut aussi vouloir prévoir l'éventualité que la ressource chargée ne soit accessible sur le serveur. Même s'il existe différents moyens de contrôler le retour de fetch, le plus simple est un try catch. 

<fieldset>
<p id="ctrldemo"></p>
</fieldset>

<script>
var ctrldemo = document.getElementById('ctrldemo')

async function loadCTRL(fname) {
	try {
		var response = await fetch(fname)
		var j =  await response.json()
		ctrldemo.innerHTML = JSON.stringify(j)
	}
	catch(err) {
		ctrldemo.innerHTML = "Error, can't load " + fname + " " + err
	}
}

loadCTRL("demojson.json")
</script>

Exemple quand le fichier est trouvé:

Exemple quand le fichier n'existe pas:

Voir aussi...

© 13 juillet 2017 Xul.fr