Chapitre 4.2 : Envoi de requêtes GET
Temps d'étude : 45 minutes
1. GET : Requête de télémétrie de la flotte spatiale
Une requête GET est la commande principale pour récupérer des données. Dans notre Centre de Contrôle de Mission (CCM), cela équivaut à la requête : "Centre de Gestion de Flotte, rapportez la situation !"
Nous allons utiliser fetch pour envoyer deux types de requêtes GET à notre serveur FastAPI :
- Obtention de toute la collection : "Montrez-moi toute ma flotte".
- Obtention d'une seule ressource : "Donnez-moi les informations détaillées sur le vaisseau avec l'ID 2".
💡 Analogie spatiale :
GET /spaceships— c'est une requête de diffusion à toute la flotte pour demander ses indicatifs d'appel.
GET /spaceships/3— c'est une requête adressée à un vaisseau spécifique (ISS) pour qu'il transmette les données complètes de ses systèmes.
2. Le problème CORS : "Interférences interplanétaires"
Avant d'envoyer une requête, nous devons résoudre un problème important. Par défaut, pour des raisons de sécurité, les navigateurs empêchent une page web (notre CCM), chargée à partir d'un "domaine" (file:///... ou http://localhost:5500), de faire des requêtes vers une API sur un autre "domaine" (http://127.0.0.1:8000).
Cette politique est appelée CORS (Cross-Origin Resource Sharing).
Pour permettre à notre front-end de communiquer avec le back-end, nous devons configurer le serveur FastAPI pour qu'il dise au navigateur : "Tout va bien, je fais confiance aux requêtes provenant de cette adresse".
Étape 1 : Installation de python-multipart
C'est nécessaire pour le bon fonctionnement du middleware.
Étape 2 : Configuration de CORS dans main.py
Ouvrez votre fichier main.py du projet FastAPI et ajoutez le code suivant :
# main.py
from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware # <-- Importation du middleware
# ... votre code restant (modèles, db_spaceships) ...
app = FastAPI(
title="Fleet Management API",
# ...
)
# --- CONFIGURATION CORS ---
# Spécifie quels "domaines" (origines) peuvent envoyer des requêtes
origins = [
"http://localhost",
"http://localhost:8080",
"http://127.0.0.1:5500", # Adresse pour Live Server dans VS Code
"null" # Pour les requêtes provenant de fichiers locaux file:///
]
app.add_middleware(
CORSMiddleware,
allow_origins=origins, # Autorise les origines spécifiées
allow_credentials=True,
allow_methods=["*"], # Autorise toutes les méthodes (GET, POST, etc.)
allow_headers=["*"], # Autorise tous les en-têtes
)
# --- VOS POINTS DE TERMINAISON CI-DESSOUS ---
@app.get("/")
# ...
uvicorn pour que les modifications prennent effet !
3. Récupération de la liste de tous les vaisseaux
Nous allons créer une interface pour afficher notre flotte.
Étape 1 : Mise à jour de index.html
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>CCM - Gestion de Flotte</title>
<style>
body { font-family: sans-serif; }
.ship-list { list-style: none; padding: 0; }
.ship-list li { border: 1px solid #ccc; margin-bottom: 10px; padding: 15px; border-radius: 5px; }
</style>
</head>
<body>
<h1>Panneau de contrôle de la flotte spatiale</h1>
<button id="load-fleet-btn">Demander les données de la flotte</button>
<h2>Liste des appareils :</h2>
<ul id="fleet-list" class="ship-list">
<li>En attente de commande...</li>
</ul>
<script src="app.js"></script> <!-- Connexion du script externe -->
</body>
</html>
Étape 2 : Création de app.js
À côté de index.html, créez un fichier app.js. Nous y déporterons toute la logique.
// app.js
const API_BASE_URL = 'http://127.0.0.1:8000'; // URL de notre serveur FastAPI
const loadFleetBtn = document.getElementById('load-fleet-btn');
const fleetList = document.getElementById('fleet-list');
// Fonction pour charger et afficher la flotte
async function fetchAndDisplayFleet() {
try {
fleetList.innerHTML = '<li>Chargement de la télémétrie...</li>';
// Envoi de la requête GET vers /spaceships
const response = await fetch(`${API_BASE_URL}/spaceships`);
if (!response.ok) {
throw new Error(`Erreur réseau : ${response.status}`);
}
const ships = await response.json(); // Récupération du tableau de vaisseaux
// Effacement de la liste et affichage des données
fleetList.innerHTML = '';
if (ships.length === 0) {
fleetList.innerHTML = '<li>Aucun appareil n\'est enregistré dans le registre.</li>';
return;
}
ships.forEach(ship => {
const listItem = document.createElement('li');
listItem.innerHTML = `
<strong>${ship.name} (ID: ${ship.id})</strong><br>
Type: ${ship.type}<br>
Année de lancement: ${ship.launch_year}<br>
Statut: ${ship.status}
`;
fleetList.appendChild(listItem);
});
} catch (error) {
console.error('Impossible de charger les données de la flotte :', error);
fleetList.innerHTML = `<li>Erreur : ${error.message}</li>`;
}
}
// Ajout de l'écouteur d'événement au bouton
loadFleetBtn.addEventListener('click', fetchAndDisplayFleet);
- async/await : Nous avons utilisé une nouvelle syntaxe, plus pratique, pour travailler avec les promesses. Nous l'examinerons en détail au chapitre 4.5. Pour l'instant, sachez simplement que
await"attend" l'exécution d'une promesse sans bloquer la page. try...catch: Une excellente façon de gérer les erreurs dans les fonctionsasync.
Étape 3 : Testons
Ouvrez index.html dans votre navigateur (idéalement via l'extension Live Server de VS Code, qui le lancera sur http://127.0.0.1:5500). Cliquez sur le bouton "Demander les données de la flotte". La liste de vos vaisseaux de FastAPI devrait apparaître sur la page !
4. Récupération des données d'un seul vaisseau
Maintenant, ajoutons un formulaire pour demander des informations par ID spécifique.
Étape 1 : Ajout du formulaire dans index.html
<!-- index.html, après la liste -->
<hr>
<h2>Requête par ID</h2>
<form id="ship-form">
<input type="number" id="ship-id-input" placeholder="Entrez l'ID de l'appareil" required>
<button type="submit">Trouver l'appareil</button>
</form>
<div id="ship-details" class="ship-list"></div>
Étape 2 : Ajout de la logique dans app.js
// app.js, à la fin du fichier
const shipForm = document.getElementById('ship-form');
const shipIdInput = document.getElementById('ship-id-input');
const shipDetails = document.getElementById('ship-details');
async function fetchShipById(event) {
event.preventDefault(); // Empêche le rechargement de la page
const shipId = shipIdInput.value;
if (!shipId) {
alert('Veuillez entrer un ID.');
return;
}
try {
shipDetails.innerHTML = '<li>Recherche de l\'appareil...</li>';
// Envoi de la requête GET vers /spaceships/{id}
const response = await fetch(`${API_BASE_URL}/spaceships/${shipId}`);
if (response.status === 404) {
throw new Error('Aucun appareil avec cet ID n\'a été trouvé dans le registre.');
}
if (!response.ok) {
throw new Error(`Erreur réseau : ${response.status}`);
}
const ship = await response.json();
shipDetails.innerHTML = `
<li>
<strong>${ship.name} (ID: ${ship.id})</strong><br>
Type: ${ship.type}<br>
Année de lancement: ${ship.launch_year}<br>
Statut: ${ship.status}
</li>
`;
} catch (error) {
console.error(`Erreur lors de la recherche de l'appareil ${shipId}:`, error);
shipDetails.innerHTML = `<li>Erreur : ${error.message}</li>`;
}
}
shipForm.addEventListener('submit', fetchShipById);
- Nous avons ajouté une gestion séparée du statut
404pour donner à l'utilisateur un message d'erreur plus clair.
Étape 3 : Testons Actualisez la page, entrez l'ID d'un vaisseau existant (par exemple, 1) et cliquez sur "Trouver l'appareil". Vous devriez voir ses données. Essayez d'entrer un ID inexistant (par exemple, 99) — vous verrez un message d'erreur.