10 API web natives au lieu de bibliothèques JS

API Web natives : 10 alternatives aux bibliothèques JS populaires

Fetch remplace Axios, jQuery.ajax et d'autres bibliothèques similaires. Disponible depuis 2017 dans tous les navigateurs modernes, il prend en charge les promesses, le streaming et toutes les méthodes HTTP.

Exemple avec Axios :

import axios from 'axios';

const api = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 5000,
  headers: { 'Content-Type': 'application/json' }
});

const { data: users } = await api.get('/users');

Alternative native :

const BASE_URL = 'https://api.example.com';

const res = await fetch(`${BASE_URL}/users`);
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const users = await res.json();

const res2 = await fetch(`${BASE_URL}/users`, {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name: 'Marvel', role: 'developer' })
});
const newUser = await res2.json();

Pour annuler une requête, utilisez AbortController :

const controller = new AbortController();
fetch('/api/data', { signal: controller.signal });
controller.abort();

Quand utiliser des bibliothèques ? Dans les grands projets nécessitant des intercepteurs, une logique de réessai ou une authentification centralisée.

FormData pour la sérialisation de formulaires

FormData automatise la collecte des données de formulaire — y compris les fichiers — sans parsing manuel. Disponible depuis 2015.

Au lieu de gérer manuellement :

const formData = new FormData(form);

form.addEventListener('submit', async (e) => {
  e.preventDefault();
  await fetch('/api/upload', {
    method: 'POST',
    body: formData
  });
});

Création programmatique :

const formData = new FormData();
formData.append('name', 'Marvel');
formData.append('avatar', fileInput.files[0]);

Le navigateur définit automatiquement multipart/form-data avec une limite.

Limites : pas de validation intégrée ni de gestion d'état multétapes — utilisez React Hook Form ou Formik dans ces cas.

URL et URLSearchParams pour l’analyse d’URL

Les classes natives URL et URLSearchParams remplacent les expressions régulières et des bibliothèques comme URL.js. Prises en charge depuis 2018.

const url = new URL('https://example.com/search?q=web+apis&page=2&sort=recent#results');

url.hostname; // 'example.com'
url.searchParams.get('q'); // 'web apis'

url.searchParams.set('page', '3');
url.searchParams.append('filter', 'new');
console.log(url.toString());

Création de chaînes de requête :

const params = new URLSearchParams({ q: 'hello world', page: '1' });
params.toString(); // 'q=hello+world&page=1'

Encodage/décodage automatiques évitent les erreurs de parsing.

API Popover pour les éléments flottants

Depuis janvier 2025 (Chrome 114+, Firefox 125+, Safari 17+), l’API Popover permet des infobulles, menus déroulants et popovers sans Floating UI ou Tippy.js.

Balisage HTML :

<button popovertarget="my-popover">Activer le popover</button>
<div id="my-popover" popover>Contenu du popover</div>

Contrôle programmatique :

const popover = document.querySelector('#my-popover');
popover.showPopover();
popover.hidePopover();

Stylisation :

#my-popover:popover-open {
  animation: fadeIn 0.2s ease-out;
}
#my-popover::backdrop {
  background: rgba(0, 0, 0, 0.15);
}

Prise en charge intégrée du niveau supérieur, fermeture par clic ou touche Échap, piège de focus et navigation au clavier.

popover="auto" — fermeture automatique, popover="manual" — fermeture explicite.

Quand les bibliothèques sont meilleures ? Lorsqu’un positionnement précis avec middleware (flip, shift) est nécessaire.

Avantages des API natives

Passer aux interfaces intégrées apporte :

• Taille du bundle nulle — les APIs font partie du moteur du navigateur
• Performance — exécution hors thread principal quand possible
• Maintenance — mises à jour fournies par les éditeurs de navigateurs
• Compatibilité — fonctionne sous Node.js (là où disponible)
• Moins de vulnérabilités — pas de code tiers

Ce qui compte

• Les API natives couvrent 80–90 % des tâches courantes, réduisant les dépendances
• Fetch + AbortController remplacent entièrement les clients HTTP basiques
• FormData gère 95 % des scénarios de téléchargement de formulaires sans bibliothèque
• URLSearchParams élimine les erreurs de parsing liées aux regex
• L’API Popover standardise les composants UI accessibles

Ces interfaces permettent d’optimiser les projets intermédiaires à avancés sans sacrifier la fonctionnalité.

— Editorial Team