Qu’est-ce que Punk API ?

Punk API donne accès à des informations issues du catalogue de recettes DIY Dog de BrewDog : noms, descriptions, ingrédients et caractéristiques des bières.

Les principales routes

Les routes suivantes utilisent la méthode GET pour consulter les données.

La liste accepte notamment les filtres beer_name, abv_lt et ibu_gt. Le paramètre page est requis.

Tutoriel : afficher une fiche dans une page web

Nous allons consulter une bière précise, puis afficher son nom, sa description et son degré d’alcool.

Prérequis : une page utilisant Bootstrap pour la mise en forme et un navigateur récent. Servez votre page avec un serveur local, par exemple Live Server dans Visual Studio Code.

1. Préparer la zone d’affichage

Ajoutez ce contenu dans votre page :

<section class="container py-4" aria-labelledby="titre-catalogue">     <h2 id="titre-catalogue">Catalogue de bières</h2>      <button id="charger-biere" type="button"             class="btn btn-primary mb-3">         Charger la fiche     </button>      <p id="statut" role="status" aria-live="polite"></p>      <div id="fiche-biere" class="card d-none">         <div class="card-body">             <h3 id="nom-biere" class="card-title h4"></h3>             <p id="description-biere" class="card-text"></p>             <p class="mb-0">                 <strong>Degré d’alcool :</strong>                 <span id="alcool-biere"></span>             </p>         </div>     </div> </section>

2. Récupérer les données avec JavaScript

Placez ce script après le HTML précédent ou dans un fichier JavaScript chargé avec l’attribut defer.

const bouton = document.querySelector("#charger-biere"); const statut = document.querySelector("#statut"); const fiche = document.querySelector("#fiche-biere");  const nom = document.querySelector("#nom-biere"); const description = document.querySelector("#description-biere"); const alcool = document.querySelector("#alcool-biere");  async function chargerBiere() {     bouton.disabled = true;     statut.textContent = "Chargement en cours…";     fiche.classList.add("d-none");      try {         const response = await fetch(             "https://punkapi.dev/v3/beers/366"         );          if (!response.ok) {             throw new Error(`Erreur HTTP : ${response.status}`);         }          const biere = await response.json();          if (!biere || typeof biere.name !== "string") {             throw new Error("Les données reçues sont invalides.");         }          nom.textContent = biere.name;         description.textContent =             biere.description || "Description indisponible.";          alcool.textContent = typeof biere.abv === "number"             ? `${biere.abv.toLocaleString("fr-FR")} %`             : "Non renseigné";          fiche.classList.remove("d-none");         statut.textContent = "Fiche chargée.";     } catch (error) {         console.error(error);         statut.textContent =             "Impossible de charger la fiche. Réessayez plus tard.";     } finally {         bouton.disabled = false;     } }  bouton.addEventListener("click", chargerBiere);

3. Comprendre le fonctionnement

• async permet d’utiliser await dans la fonction.
• fetch() lance la requête réseau. await attend son résultat sans bloquer l’interface.
• response.ok vérifie que le statut HTTP indique un succès.
• response.json() transforme la réponse JSON en données JavaScript.
• textContent affiche les valeurs comme du texte, sans les interpréter comme du HTML.
• finally réactive le bouton, que la requête réussisse ou échoue.

Construire une recherche par nom

Utilisez URL et searchParams pour préparer les paramètres proprement :

const recherche = "punk ipa";  const url = new URL("https://punkapi.dev/v3/beers"); url.searchParams.set("page", "1"); url.searchParams.set("per_page", "10"); url.searchParams.set(     "beer_name",     recherche.trim().replace(/\s+/g, "_") );  console.log(url.toString());

Envoyez ensuite cette URL avec fetch(url). Pour afficher les résultats, examinez la structure JSON renvoyée par la route de liste : le code de fiche précédent attend un objet représentant une seule bière.

Que faire si la requête échoue ?

Ouvrez les outils de développement du navigateur, puis consultez les onglets Console et Réseau. Vérifiez l’adresse appelée, le statut HTTP et le contenu reçu.

Si le navigateur signale un problème CORS, le service doit autoriser votre origine ou être appelé depuis votre backend. Le mode no-cors ne permet pas de lire la réponse JSON.