Apprendre les API REST en JavaScript

Apprentissage des API REST en JavaScript

Les API REST (Representational State Transfer Application Programming Interfaces) sont largement utilisées pour créer des applications en réseau. Cet article vous aidera à comprendre comment utiliser les API REST en JavaScript, couvrant les implémentations côté client et côté serveur.

---

1. Qu'est-ce qu'une API REST ?

Une API REST permet aux clients (tels que les navigateurs ou les applications mobiles) de communiquer avec les serveurs pour récupérer ou manipuler des données. Il suit une architecture sans état utilisant des méthodes HTTP standard.

Concepts de base

1. Ressources : représentées par des points de terminaison (par exemple, /users pour les données utilisateur).
2. Méthodes HTTP :
   • GET : Récupérer des données.
   • POST : Créez une nouvelle ressource.
   • PUT : Mettre à jour une ressource existante.
   • SUPPRIMER : Supprimer une ressource.
3. Format de données : JSON est couramment utilisé pour échanger des données.
4. Codes d'état HTTP :
   • 200 OK : Succès.
   • 201 Créé : Ressource créée.
   • 400 Bad Request : erreur côté client.
   • 404 Not Found : ressource introuvable.
   • 500 Erreur de serveur interne : problème de serveur.

---

2. Outils et configuration

• Pour le côté client :

  • Navigateur (JavaScript avec bibliothèque fetch ou axios).
  • Utilisez des API comme https://jsonplaceholder.typicode.com pour vous entraîner.

• Pour le côté serveur :

  • Installez Node.js et utilisez le framework Express.

---

3. Travailler avec les API REST côté client

JavaScript fournit l'API fetch() et des bibliothèques tierces comme axios pour interagir avec les API REST.

---

Récupération de données à l'aide de fetch()

Voici comment récupérer des données à partir d'une API REST.

// Fetch data from an API
const fetchUsers = async () => {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/users');
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    const users = await response.json(); // Parse JSON data
    console.log(users);
  } catch (error) {
    console.error('Error fetching users:', error);
  }
};

fetchUsers();

Explication :

1. fetch(url) : effectue une requête HTTP.
2. réponse.json() : convertit la réponse au format JSON.
3. La gestion des erreurs est implémentée à l'aide de try...catch pour détecter les erreurs réseau ou les réponses non valides.

---

Envoi de données avec POST

Pour créer une nouvelle ressource, utilisez la méthode POST avec l'API fetch().

const createUser = async () => {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/users', {
      method: 'POST', // HTTP method
      headers: {
        'Content-Type': 'application/json', // Specify JSON format
      },
      body: JSON.stringify({ // Convert JavaScript object to JSON
        name: 'Jane Doe',
        email: 'jane.doe@example.com',
      }),
    });

    const newUser = await response.json(); // Parse JSON response
    console.log(newUser);
  } catch (error) {
    console.error('Error creating user:', error);
  }
};

createUser();

Points clés :

• L'option méthode spécifie la méthode HTTP.
• L'option en-têtes est utilisée pour indiquer le type de contenu.
• Le corps contient la charge utile JSON.

---

4. Création d'API REST côté serveur

Sur le backend, Node.js avec le framework Express est couramment utilisé pour créer des API REST.

Configuration de votre environnement

1. Installez Node.js : téléchargez Node.js.
2. Initialiser un nouveau projet :

// Fetch data from an API
const fetchUsers = async () => {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/users');
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    const users = await response.json(); // Parse JSON data
    console.log(users);
  } catch (error) {
    console.error('Error fetching users:', error);
  }
};

fetchUsers();

---

Création d'une API REST simple

Voici un exemple de serveur API REST de base.

const createUser = async () => {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/users', {
      method: 'POST', // HTTP method
      headers: {
        'Content-Type': 'application/json', // Specify JSON format
      },
      body: JSON.stringify({ // Convert JavaScript object to JSON
        name: 'Jane Doe',
        email: 'jane.doe@example.com',
      }),
    });

    const newUser = await response.json(); // Parse JSON response
    console.log(newUser);
  } catch (error) {
    console.error('Error creating user:', error);
  }
};

createUser();

Explication :

• Middleware : app.use(express.json()) analyse les requêtes JSON entrantes.
• Itinéraires :
  • GET /users : récupère tous les utilisateurs.
  • GET /users/:id : Récupère un utilisateur spécifique.
  • POST /users : ajoutez un nouvel utilisateur.
  • PUT /users/:id : mettre à jour les détails de l'utilisateur.
  • DELETE /users/:id : Supprimer un utilisateur.

---

5. Tester votre API REST

Vous pouvez tester votre API à l'aide d'outils tels que Postman ou d'utilitaires de ligne de commande comme curl.

Utiliser Postman

1. Installez Postman à partir d'ici.
2. Créer une nouvelle demande :
   • GET http://localhost:3000/users : récupère tous les utilisateurs.
   • POST http://localhost:3000/users : Ajouter un utilisateur avec un corps JSON.

Utiliser curl

   mkdir rest-api-demo
   cd rest-api-demo
   npm init -y
   npm install express

---

6. Meilleures pratiques pour le développement d'API REST

1. Utilisez des noms de points de terminaison significatifs (par exemple, /users au lieu de /data).
2. Validez les entrées de l'utilisateur pour éviter les données invalides ou nuisibles.
3. Suivez les codes d'état HTTP cohérents.
4. Documentez votre API à l'aide d'outils comme Swagger ou Postman.

---

mon dépôt de code de travail

Conclusion

Les API REST sont la pierre angulaire du développement Web moderne. En apprenant à interagir avec les API REST en JavaScript, tant côté client que côté serveur, vous acquerrez un ensemble de compétences puissantes pour créer et intégrer des applications. La pratique est la clé : commencez par utiliser des API publiques, puis créez votre propre API à l'aide de Node.js et Express.

---

N'hésitez pas à poser des questions ou à demander des éclaircissements sur n'importe quelle partie de ce guide !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!