Fetch, pour actualiser la page vue

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, quand on l'emploie 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 si l'on recherche une compatibilité totale, on continuera d'utiliser Ajax pour mettre à jour le contenu d'une page web. Si par ailleurs on cherche une interaction avec le serveur, l'objet WebSocket est cette fois plus approprié que fetch. Dans les autres cas, fetch offre une plus grande simplicité comme on va les voir avec les démonstrations suivantes.

Vous pouvez comparer le code des démos ci-dessous et celui des Démos Fetch avec celui des mêmes examples que j'ai réaliséss avec Ajax quelques années plus tôt: Démos Ajax.

Charger un texte

Fetch charge une ressource qui est convertie en chaîne avec la méthode text(). On emploie await pour attendre que le résultat soit disponible avant de modifier la page.

<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 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/demo.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

Prendre en charge les erreurs

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...

• Compatibilité avec les navigateurs.
• WebSocket. Tutoriel et démonstrations.