Aller au contenu

Langage avancé API Fetch

Remplaçant de l’objet XMLHttpRequest pour AJAX. C’est donc une API permettant de travailler avec HTTP, mais beaucoup plus souple, plus simple d’utilisation et plus puissante.

L’API Fetch définit des abstractions pour Request, Response, Headers, Body, ainsi qu’une méthode globale fetch().

Cette API est basée sur les promesses JavaScript, la fonction fetch() retournant une Promise.

Exemple simple#

fetch('file.json')
.then(result => result.json())
.then(console.log)

Et avec gestion d’erreurs :

fetch('file.json')
.then(result => result.json())
.then(console.log, console.error)

// ou
fetch('file.json')
.then(result => result.json())
.then(console.log)
.catch(console.error)

La variable result est un objet de type Response. Trois méthodes peuvent être utilisées pour extraire le contenu de la réponse : blob(), text() et json().

Données#

Passage de variables simplifié :

// object FormData
const data = new FormData()
data.append('prenom', 'vincent')

fetch('/name', {
  method: 'post',
  body: data
})
.then(result => result.text())
.then(console.log, console.error)

// or JSON
const data = {prenom: 'vincent'}

fetch('/name', {
  method: 'post',
  body: JSON.stringify(data)
})
.then(result => result.text())
.then(console.log, console.error)

Gestion des erreurs#

Notes#

En ES7, il est possible de remplacer les promesses par async/await

(async () => {
  const result = await fetch('file.json')
  const json = await result.json()
  console.log(json)
})()

Exercice - Graphique Bitcoin#

Nous allons créer un graphique sur le cours du Bitcoin en € sur la dernière année. Pour cela :

* Pour le graphique, utilisez la librairie Chart.js. Dans le constructeur de Chart, l’objet config.data.labels contiendra notre tableau de dates, et config.data.datasets[0].data nos valeurs