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

Formateur Python en ligne pour débutants

Apprenez Python facilement sans surcharge théorique. Résolvez des tâches pratiques avec vérification automatique et écrivez du code directement dans le navigateur.

Start Course

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 fondamentale. Qu'il s'agisse d'obtenir des données météo, d'envoyer un formulaire ou de s'intégrer à une passerelle de paiement, vous aurez besoin d'un client HTTP. Dans cet article, nous allons voir comment créer des requêtes HTTP en JavaScript (Node.js) correctement : du choix de l'outil à la gestion des erreurs et à l'optimisation. Vous apprendrez à écrire un code fiable et performant.

1. Choix de l'outil : fonctionnalités natives vs bibliothèques

Node.js propose plusieurs façons d'effectuer des requêtes HTTP. Le choix dépend de la complexité de la tâche et des préférences personnelles.

1.1. Module intégré `http` / `https`

C'est l'approche la plus bas niveau. Elle offre un contrôle total, mais nécessite beaucoup de code pour des requêtes simples.

const https = require('https');

function getUsers() {  return new Promise((resolve, reject) => {    const url = 'https://jsonplaceholder.typicode.com/users';    https.get(url, (res) => {      let data = '';      res.on('data', chunk => data += chunk);      res.on('end', () => {        try {          resolve(JSON.parse(data));        } catch (e) {          reject(e);        }      });    }).on('error', reject);  });}

getUsers().then(console.log).catch(console.error);

1.2. `fetch` global (avec Node.js 18+)

Depuis la version 18, Node.js dispose d'un fetch natif, familier aux navigateurs. C'est une API moderne et pratique.

async function getPosts() {  try {    const response = await fetch('https://jsonplaceholder.typicode.com/posts');    if (!response.ok) {      throw new Error(`Erreur HTTP ! statut : ${response.status}`);    }    const data = await response.json();    return data;  } catch (error) {    console.error('Erreur fetch :', error);    throw error;  }}

getPosts().then(posts => console.log(posts.slice(0, 2)));

1.3. Bibliothèques populaires : `axios`

axios est la bibliothèque la plus populaire pour les requêtes HTTP. Elle offre une API pratique, la prise en charge des promesses, des intercepteurs et l'analyse JSON automatique.

const axios = require('axios');

async function createTodo() {  try {    const response = await axios.post('https://jsonplaceholder.typicode.com/todos', {      title: 'Apprendre les clients HTTP',      completed: false,      userId: 1    });    console.log('Créé :', response.data);    return response.data;  } catch (error) {    console.error('Erreur :', error.response?.data || error.message);  }}

createTodo();

Conclusion : Pour les scripts simples, utilisez fetch. Pour les projets sérieux avec de nombreuses requêtes et intercepteurs, utilisez axios. Réservez le module http pour les cas spécifiques.

2. Types de requêtes principaux et travail avec les données

Voyons comment envoyer correctement des requêtes GET, POST, PUT et DELETE avec axios.

2.1. GET — récupération de données

async function getUser(id) {  try {    const { data } = await axios.get(`https://jsonplaceholder.typicode.com/users/${id}`);    return data;  } catch (error) {    throw new Error(`Impossible de récupérer l'utilisateur ${id} : ${error.message}`);  }}

2.2. POST — création d'une ressource

Transmettez les données dans le corps de la requête. Il est important de spécifier le type de contenu (Content-Type). Axios le fait automatiquement pour JSON.

async function createUser(userData) {  const response = await axios.post('https://jsonplaceholder.typicode.com/users', userData, {    headers: {      'Content-Type': 'application/json'    }  });  return response.data;}