Traitement de l'API en JavaScript et React : des bases au niveau avancé

👋 Salut les front-enders !

Aujourd'hui, nous allons analyser l'un des sujets les plus importants dans le monde de JavaScript et React : le travail avec l'API. Nous allons apprendre à envoyer des requêtes HTTP, à gérer les erreurs et à utiliser des bibliothèques populaires telles que fetch, axios et TanStack Query.

📡 Qu'est-ce qu'une API ?

API (Application Programming Interface) est une interface à travers laquelle les programmes échangent des données entre eux. Par exemple, votre application React peut recevoir des messages d'un serveur distant via une API.

🛠️ Les API sont souvent créées à l'aide de frameworks :

• JavaScript — Express.js

• Python — Django / Flask

• Go — Gin

• Java — Spring Boot

• C# — ASP.NET Core

🔄 Qu'est-ce que le traitement API ?

Le traitement de l'API est le processus d'envoi de requêtes HTTP au serveur et de traitement de la réponse reçue. En JavaScript et React, les plus couramment utilisés sont :

• fetch — méthode de navigateur intégrée

• axios — bibliothèque externe populaire

• TanStack Query (anciennement React Query) est une bibliothèque pour la gestion pratique des données asynchrones dans React

📬 Méthodes HTTP de base

⚙️ Travailler avec l'API via fetch

Requête GET simple

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(res => res.json())
  .then(data => scrib.show(data))
  .catch(err => scrib.show('Error:', err));

Requête POST avec corps

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    title: 'JS is cool!',
    body: 'Scribbler allows you to combine HTML and JS',
    userId: 1
  })
})
  .then(res => res.json())
  .then(data => scrib.show(data))
  .catch(err => scrib.show('Error:', err));

Traitement des erreurs via try/catch

async function getData() {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
    if (!response.ok) throw new Error('Network error');
    const data = await response.json();
    scrib.show(data);
  } catch (err) {
    scrib.show('Error:', err);
  } finally {
    scrib.show('Request completed');
  }
}
getData();

⚡ Utilisation de axios

axios offre une syntaxe plus propre et un traitement des erreurs pratique.

Requête GET

import axios from 'axios';

axios.get('https://jsonplaceholder.typicode.com/posts/1')
  .then(res => scrib.show(res.data))
  .catch(err => scrib.show('Error:', err));

Requête POST

axios.post('https://jsonplaceholder.typicode.com/posts', {
  title: 'Axios rules!',
  body: 'Error handling is much easier',
  userId: 1
}, {
  headers: { 'Content-Type': 'application/json' }
})
  .then(res => scrib.show(res.data))
  .catch(err => scrib.show('Error:', err));

Traitement avancé des erreurs

axios.get('https://jsonpl.typicode.com/posts')
  .catch(error => {
    if (error.response) {
      scrib.show('Server error:', error.response.status);
    } else if (error.request) {
      scrib.show('No response from the server');
    } else {
      scrib.show('Request error:', error.message);
    }
  });

⚛️ API dans React (useEffect + useState)

import { useEffect, useState } from 'react';

function Posts() {
  const [posts, setPosts] = useState([]);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then(res => {
        if (!res.ok) throw new Error('Error retrieving data');
        return res.json();
      })
      .then(setPosts)
      .catch(err => setError(err.message));
  }, []);

  if (error) return <p>Ошибка: {error}</p>;

  return (
    <div>
      <h2>Посты</h2>
      <ul>{posts.map(p => <li key={p.id}>{p.title}</li>)}</ul>
    </div>
  );
}

⚙️ TanStack Query (React Query)

import { useQuery } from '@tanstack/react-query';
import axios from 'axios';

const fetchPosts = async () => {
  const { data } = await axios.get('https://jsonplaceholder.typicode.com/posts');
  return data;
};

function Posts() {
  const { data: posts, error, isLoading } = useQuery({
    queryKey: ['posts'],
    queryFn: fetchPosts
  });

  if (isLoading) return <p>Загрузка...</p>;
  if (error) return <p>Ошибка: {error.message}</p>;

  return <ul>{posts.map(post => <li key={post.id}>{post.title}</li>)}</ul>;
}

✅ Conclusions

📌 Le traitement des API est une compétence clé dans le développement Web. L'essentiel :

• Maîtriser fetch et axios

• Comprendre les méthodes HTTP

• Être capable de gérer les erreurs

• Utiliser useEffect dans React

• Automatiser le chargement des données avec TanStack Query