Aller au contenu

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.

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);
// Lecture de la réponse (ici en JSON)
let resultat = await reponse.json();

La même chose sans await

fetch(url, options)
    .then((reponse) => reponse.json())
    .then((resultat) => /* Le code à effectuer */);
Dans le deuxième exemple. la fonction json() retourne aussi une promesse. Donc le second then sert à récupérer le résultat.

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 (response.ok) { // Si le code de statut est entre 200 et 299
  // Code à effectuer lors d'un succès
  let resultat = await reponse.json();
  console.log("Resultat : ", resultat);
} else {
  console.log("Erreur code HTTP : ", response.status);
}

Maintenant pour récupérer le contenu de la réponse, on doit utiliser une seconde fonction à la réponse qui va la convertir dans le type requis. Puisqu'on fonctionne uniquement avec du JSON, on va utiliser la fonction json(). Notez que cette fonction retourne une promesse qui doit être traité adéquatement.

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

    fetch(`https://demo-render-6ez9.onrender.com/api/pokemons/${pokemon_id}`)
        // Envoi de la requète et récupération de la réponse    
        .then(response => response.json())
        // Traitement de la réponse
        .then(data => {
            console.log(data);
            document.getElementById('pokemon-name').innerText = data.nom;
        });
}

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 le headers, 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
1
2
3
4
5
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:"Mathieu",
    type_primaire:"Professeur",
    type_secondaire:"-",
    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)

Références