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 :

  • Faites une requete asynchrone sur https://api.coincap.io/v2/assets/bitcoin/history?interval=d1 pour récupérer les valeurs du Bitcoin sur les 364 derniers jours. Retournez un objet contenant une clé valeur avec un tableau pour les valeurs, et une clé dates avec un tableau des dates associées
  • Faites une requete asynchrone sur https://cdn.jsdelivr.net/gh/fawazahmed0/currency-api@1/latest/currencies/usd.json pour récupérer le taux de change USD-EUR. Retournez simplement le taux de change
  • Lorsque les deux requêtes sont terminées, creéz un graphique* avec les données de la première requête, en convertissant les valeurs avec le taux de change.

* 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