L'API Fetch en JavaScript, qu'est ce que c'est ?

Si vous êtes développeur front-end, vous avez sûrement déjà rencontré le besoin de récupérer des informations depuis le navigateur.

Aujourd'hui, nous allons voir comment utiliser l'API fetch disponible dans la quasi totalité des navigateurs.

Le besoin

Dans certaines situations, il peut être avantageux de récupérer des informations directement depuis le navigateur plutôt qu'avant le rendu de la page sur le serveur (par exemple avec PHP).

Dans le cas d'un formulaire de recherche, il n'est pas forcément nécessaire de recharger complètement la page pour la régénérer sur le serveur, nous pourrions ici faire une requête Ajax en arrière plan qui serait plus rapide.

Pour ce faire, nous aurons besoin d'une API REST. Pour faire simple, une API REST est une collection d'URI sur lesquelles nous pouvons faire des requêtes HTTP (GET, POST, PATCH,...) et récupérer des informations, préférablement en JSON.

EX: GET "https://jsonplaceholder.typicode.com/todos/1"

Résultat:

{
  "userId": 1,
  "id": 1,
  "title": "delectus aut autem",
  "completed": false
}

Utilisation

Pour répondre à notre besoin, la méthode la plus simple (et la plus moderne) est d'utiliser fetch.

Sans plus attendre, passons au code. ▶️

Pour lancer une requête, c'est aussi simple que d'appeler la fonction avec notre URI, ainsi que la méthode HTTP correspondante.

fetch('https://jsonplaceholder.typicode.com/todos', { method: 'GET' })

Cependant ceci ne suffit pas pour récupérer le résultat de la requête, puisque fetch retourne une promesse.

Nous utilisons ici .then() pour récupérer le résultat de cette promesse.

fetch('https://jsonplaceholder.typicode.com/todos', { method: 'GET' })
  .then(function (response) {
    // `response` contiendra ces propriétés (en partie)

    /*
      readonly headers: Headers; -> https://developer.mozilla.org/fr/docs/Web/HTTP/Headers
      readonly ok: boolean; -> `true` si la requête s'est bien déroulée, `false` sinon
      readonly status: number; -> https://developer.mozilla.org/fr/docs/Web/HTTP/Status

      blob(): Promise<Blob>; -> Conversion du résultat en Blob
      formData(): Promise<FormData>; -> Conversion du résultat en formData
      json(): Promise<any>; -> Conversion du résultat en JSON
      text(): Promise<string>; -> Conversion du résultat en texte
    */
  })

Dans le cadre de notre besoin, ce qui nous intéresse, c'est de recevoir le résultat en JSON, nous utiliserons donc response.json() qui retourne également une promesse.

fetch('https://jsonplaceholder.typicode.com/todos', { method: 'GET' })
  .then(function (response) {
    return response.json()
  })
  .then(function (json) {
    // `json` est le vrai résultat de notre requête !
  })

Dans la plupart des cas (et selon vos conventions de code), les requêtes fetch s'écrivent:

fetch('https://jsonplaceholder.typicode.com/todos', { method: 'GET' })
  .then((response) => response.json())
  .then((json) => { /* ... */ })

fetch permet également de passer plusieurs options à notre requête HTTP, par exemple des headers.

Certaines requêtes comme les POST ou PUT peuvent récupérer un body, également pris en charge par fetch !

const options = {
  method: 'POST',

  headers: {
    // Nous n'accepterons que le JSON en résultat.
    'Accept': 'application/json',
    // Dans le cas d'une requête contenant un body,
    // par exemple une POST ou PUT, on définit le format du body.
    'Content-Type': 'application/json',
    // Cas d'usage courant pour gérer l'authentification avec une API REST.
    'Authorization': 'Bearer ${token}'
  },

  body: JSON.stringify({
    title: 'Un post',
    content: 'Contenu de mon post'
  })
}

fetch('https://example.com/posts', options)
  .then((response) => response.json())
  .then((createdPost) => { /* ... */ })

Conclusion

fetch est une façon très simple (beaucoup moins verbeuse que XMLHttpRequest) de faire des requêtes HTTP et permet d'améliorer la performance d'un site dans certains cas.

Nous sommes toujours curieux chez Alsacréations, n'hésitez pas à nous faire des retours d'expérience en relation avec fetch 😉.