Fetch API sous Javascript

Fetch nous offre une interface JavaScript qui nous permet de faire des requêtes http et d'en récupérer les réponses. C'est inclus nativement dans Javascript, aucune librairie n'est à installer. Fetch fonctionne de façon asynchrone et utilise les promesses (retourne un Promise qu'on peut gérer avec await).

Manuel

https://developer.mozilla.org/fr/docs/Web/API/Fetch_API

Syntaxe

// Envoi de la requête et récupération de la réponse
let reponse = await fetch(url, options);

Récupérer la réponse

Pour récupérer le code de statut de la réponse, on peut utiliser la propriété status. Si on veut uniquement vérifier que la requête retourne un résultat positif (un code entre 200 et 299) la propriété ok nous retournera un boolean.

let reponse = await fetch(url);

if (reponse.ok) { // Si le code de statut est entre 200 et 299
  // Code à effectuer lors d'un succès
  console.log("Resultat : ", resultat);
} else {
  console.log("Erreur code HTTP : ", reponse.status);
}

Pour récupérer le contenu de la réponse, on doit utiliser une méthode sur la réponse qui va la convertir dans le type requis. Puisqu'on fonctionne uniquement avec du JSON, on va utiliser la méthode json(). Notez que cette méthode est async.

script.js

async function recupererPokemon() {
  const pokemon_id = document.getElementById('pokemon-id').value;

  try {
    const response = await fetch(`https://demo-render-6ez9.onrender.com/api/pokemons/${pokemon_id}`);
    if (!response.ok) {
      console.error('Erreur HTTP:', response.status);
      return;
    }
    // Convertir la réponse en JSON: async -> await nécessaire
    const data = await response.json();
    console.log(data);
  } catch (err) {
    console.error('Erreur réseau:', err);
  }
}

Modifier les informations de l'entête

Dans le paramêtre options de fetch, on peut envoyer un objet Javascript qui contient un ensemble de propriétés. Pour ajouter des informations dans les entêtes, utilisez la propriété headers avec un objet qui contient les valeurs.

Par exemple pour envoyer une clé api comme on le fait à l'exercice 5 :

script.js
let response = fetch(url, {
  headers: {
    Authorization: 'cle_api dzIdZzvrPmokuWqkjbcN'
  }
});

Envoyer des données dans le corps de la requête

Encore avec le paramêtre options, on peut définir la méthode http à utiliser et le body. Pour envoyer des données en JSON, il faut spécifier dans le header le Content-Type et utiliser JSON.stringify pour convertir un objet JavaScript en JSON.

let pokemon = {
    nom:"Pantoufleur",
    type_primaire:"Tisane",
    type_secondaire:"Pyjama",
    pv:10,
    attaque:10,
    defense:10
};

let reponse = await fetch('http://localhost:3000/api/pokemons', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json;charset=utf-8'
  },
  body: JSON.stringify(pokemon)
});

let resultat = await reponse.json();
console.log(resultat)