Client HTTP en JavaScript : faire des requêtes correctement de A à Z

Client HTTP en JavaScript : faire des requêtes correctement — de A à Z

Dans le développement web moderne, l'interaction avec les API externes et les serveurs est une tâche courante mais cruciale. Que vous écriviez un microservice sur Node.js, que vous analysiez des données ou que vous créiez un bot, vous aurez besoin d'un client HTTP fiable. Dans cet article, nous allons voir comment faire des requêtes HTTP en JavaScript (Node.js) correctement, examiner les bibliothèques populaires, la gestion des erreurs, les timeouts et les meilleures pratiques.

1. Outils intégrés : module http et node-fetch

Node.js dispose des modules intégrés http et https, mais leur API est de bas niveau et peu pratique pour une utilisation quotidienne. C'est pourquoi on utilise le plus souvent des bibliothèques d'encapsulation.

1.1. node-fetch (v3+)

À partir de la version 18, Node.js prend en charge nativement fetch (expérimental). Pour les versions plus anciennes ou des fonctionnalités étendues, utilisez le paquet node-fetch.

// Installation : npm install node-fetch\nimport fetch from 'node-fetch';\n\nasync function getUsers() {\n  try {\n    const response = await fetch('https://jsonplaceholder.typicode.com/users');\n    if (!response.ok) {\n      throw new Error(`Erreur HTTP ! statut : ${response.status}`);\n    }\n    const data = await response.json();\n    console.log(data);\n  } catch (error) {\n    console.error('Erreur de requête :', error.message);\n  }\n}\n\ngetUsers();

1.2. fetch intégré (Node.js 18+)

S'utilise de la même manière que le fetch du navigateur :

// Node.js 18+ sans paquets supplémentaires\nasync function postData() {\n  const response = await fetch('https://api.example.com/data', {\n    method: 'POST',\n    headers: { 'Content-Type': 'application/json' },\n    body: JSON.stringify({ key: 'value' })\n  });\n  return response.json();\n}

2. Axios — le standard en or des clients HTTP

Axios est la bibliothèque la plus populaire pour les requêtes HTTP en JavaScript. Elle offre une interface pratique, la prise en charge des promesses, des intercepteurs et la transformation automatique du JSON.

2.1. Installation et requête GET de base

// npm install axios\nconst axios = require('axios');\n\nasync function fetchUsers() {\n  try {\n    const response = await axios.get('https://jsonplaceholder.typicode.com/users');\n    console.log(response.data); // données déjà parsées\n  } catch (error) {\n    console.error('Erreur :', error.message);\n  }\n}

2.2. Requête POST avec données

async function createUser() {\n  const newUser = { name: 'Ivan', email: 'ivan@example.com' };\n  const response = await axios.post('https://jsonplaceholder.typicode.com/users', newUser);\n  console.log('Utilisateur créé :', response.data);\n}

2.3. Configuration du timeout et des en-têtes

Le timeout est une option cruciale pour éviter le blocage de l'application :

async function fetchWithTimeout() {\n  try {\n    const response = await axios.get('https://slow-api.example.com/data', {\n      timeout: 5000, // 5 secondes\n      headers: {\n        'Authorization': 'Bearer token123',\n        'Accept': 'application/json'\n      }\n    });\n    return response.data;\n  } catch (error) {\n    if (error.code === 'ECONNABORTED') {\n      console.error('Timeout de la requête');\n    }\n  }\n}

3. Techniques avancées et meilleures pratiques

3.1. Gestion des erreurs et tentatives de répétition (retry)

Les réseaux sont instables, il est donc important d'implémenter un mécanisme de tentatives répétées :

async function fetchWithRetry(url, retries = 3) {\n  for (let i = 0; i < retries; i++) {\n    try {\n      const response = await axios.get(url);\n      return response.data;\n    } catch (error) {\n      if (i === retries - 1) throw error; // dernière tentative\n      console.log(`Tentative ${i + 1} échouée, nouvelle tentative dans ${(i + 1) * 1000}ms...`);\n      await new Promise(