Quand il s'agit de gérer les requêtes HTTP en JavaScript, Axios et Fetch sont depuis longtemps les outils incontournables. Cependant, il existe une alternative puissante et moderne que les développeurs devraient envisager —  Ky. Léger et doté de fonctionnalités avancées, Ky rend le traitement des requêtes HTTP plus facile et plus efficace. Dans cet article, nous expliquerons pourquoi Ky se démarque, avec des comparaisons directes avec Axios et Fetch API.

1. Présentation des API Ky, Axios et Fetch

Axios

Axios est un client HTTP populaire basé sur des promesses pour JavaScript. Il simplifie les requêtes HTTP en offrant des fonctionnalités telles que l'analyse automatique JSON, les intercepteurs de requêtes et les délais d'attente personnalisés. Cependant, la taille de son fichier peut devenir un inconvénient, notamment pour les applications légères.

Récupérer l'API

Fetch est une API de navigateur intégrée permettant d'effectuer des requêtes HTTP. Bien que largement utilisé, Fetch présente certaines limites : il n'inclut pas la gestion des erreurs par défaut ni les tentatives intégrées, ce qui oblige les développeurs à écrire du code supplémentaire, même pour les fonctionnalités de base.

Ky

Ky est une alternative légère (157 ~ Ko) à Axios et Fetch, construite sur Fetch mais offrant une API plus riche en fonctionnalités. Avec des tentatives intégrées, une gestion simplifiée des erreurs et des hooks de requête personnalisables, Ky établit un équilibre entre simplicité et puissance.

Pourquoi choisir Ky ?

• Léger : seulement 157 ~ Ko, idéal pour les applications sensibles aux performances.
• Modern : Construit sur l'API Fetch mais avec de meilleures valeurs par défaut.
• Support de nouvelle tentative : tentatives automatiques en cas d'échec des demandes.
• Hooks : Manipulation facile des requêtes et des réponses avec les hooks beforeRequest et afterResponse.

2. Pourquoi Ky est meilleur : principales caractéristiques et avantages

Léger et performant

Cela fait de Ky un excellent choix pour les applications où les performances et la taille du bundle sont essentielles. Bien qu'il soit léger, Ky ne sacrifie pas les fonctionnalités essentielles telles que les tentatives et la gestion des erreurs.

API simple, fonctionnalités puissantes

La syntaxe de Ky est aussi simple que Fetch, mais elle offre plus de puissance intégrée. Par exemple, faire une requête GET avec Ky est aussi simple que :

import ky from 'ky';
const data = await ky.get('https://api.example.com/data').json();

Pourquoi est-ce mieux que Fetch ?

• Analyse JSON automatique : Pas besoin d'analyser manuellement la réponse.
• Gestion des erreurs : Ky renvoie des erreurs significatives pour les codes HTTP comme 404 ou 500.
• Retries : Ky réessaye automatiquement les requêtes ayant échoué, contrairement à Fetch, qui échoue silencieusement.

Nouvelles tentatives intégrées

Ky est livré avec une prise en charge intégrée des nouvelles tentatives, une fonctionnalité cruciale pour gérer les conditions de réseau peu fiables. Axios propose également une fonctionnalité de nouvelle tentative, mais vous devez utiliser un plugin supplémentaire ou le configurer vous-même. En revanche, Ky fournit cette fonctionnalité par défaut sans configuration.

await ky.get('https://api.example.com/data', { retry: 2 });

Dans cet exemple, Ky réessayera la requête jusqu'à 2 fois en cas d'échec, sans aucune configuration supplémentaire.

3. beforeRequest et afterResponse : la puissance des hooks dans Ky

L'une des fonctionnalités les plus intéressantes de Ky est son système de hooks, en particulier beforeRequest et afterResponse. Ces hooks vous donnent un contrôle total sur vos requêtes et réponses HTTP sans avoir besoin d'un middleware externe, dont Axios a souvent besoin.

beforeRequest Hook : améliorez facilement les demandes

Avec Ky, vous pouvez facilement modifier les requêtes sortantes à l'aide du hook beforeRequest. Que vous ayez besoin d'ajouter des jetons d'authentification ou de modifier des en-têtes, beforeRequest vous facilite la tâche.

Exemple : Ajout d'un jeton d'autorisation à chaque requête.

ky.extend({
  hooks: {
    beforeRequest: [
      request => {
        const token = localStorage.getItem('authToken');
        request.headers.set('Authorization', `Bearer ${token}`);
      }
    ]
  }
});

Cela réduit le code répétitif, ce qui facilite la gestion de l'authentification à l'échelle mondiale.

afterResponse Hook : simplifiez la gestion des réponses

Avec le hook afterResponse, vous pouvez manipuler les réponses dans l'ensemble de votre application. Ce hook est particulièrement utile pour gérer les tentatives sur des codes d'état spécifiques, comme l'actualisation des jetons expirés.

Exemple : Actualisation automatique d'un token expiré sur une réponse 401 non autorisée.

ky.extend({
  hooks: {
    afterResponse: [
      async (request, options, response) => {
        if (response.status === 401) {
          const newToken = await refreshAuthToken();
          request.headers.set('Authorization', `Bearer ${newToken}`);
          return ky(request);
        }
      }
    ]
  }
});

Avec cette configuration, vous pouvez actualiser les jetons de manière transparente sans dupliquer la logique dans votre application.

4. Gestion des erreurs : API Ky vs Axios vs Fetch

Axios

Axios offre une gestion des erreurs décente via des intercepteurs, mais il lui manque la simplicité qu'offre Ky dès le départ. Axios nécessite souvent une logique personnalisée pour les tentatives et la gestion des codes d'état d'erreur.

Récupérer l'API

La gestion des erreurs de Fetch est limitée par défaut. Il ne génère pas d'erreurs pour les codes d'état HTTP comme 404 ou 500, obligeant les développeurs à vérifier manuellement les statuts de réponse.

Ky

Ky excelle dans la gestion des erreurs. Il génère automatiquement des erreurs pour les réponses HTTP non-2xx et fournit une fonctionnalité de nouvelle tentative pour les demandes ayant échoué sans avoir besoin de code supplémentaire. Cela fait de Ky une solution robuste pour gérer les erreurs avec élégance.

try {
  const data = await ky.get('https://api.example.com/data').json();
} catch (error) {
  console.error('Request failed:', error);
}

Ky enveloppe l'intégralité de la requête dans une promesse, générant automatiquement une erreur si le code d'état de la réponse indique un échec, ce qui simplifie le débogage.

5. Exemples pratiques : Ky en action

Mettons Ky à l'épreuve avec quelques exemples pratiques qui mettent en valeur sa simplicité et sa puissance.

Exemple 1 : faire une requête GET

const response = await ky.get('https://api.example.com/items').json();
console.log(response);

Ky gère automatiquement l'analyse JSON et génère une erreur pour tous les codes d'état non-2xx, ce que Fetch ne fait pas.

Exemple 2 : requête POST avec tentatives

const response = await ky.post('https://api.example.com/create', {
  json: { name: 'Ky' },
  retry: 3
}).json();
console.log(response);

Ky réessaye la requête POST jusqu'à 3 fois en cas d'échec, offrant une meilleure fiabilité que Fetch ou Axios sans configuration supplémentaire.

6. Conclusion : Ky vaut-il le changement ?

Si vous recherchez une solution moderne , légère et riche en fonctionnalités pour effectuer des requêtes HTTP en JavaScript, Ky est un excellent choix. Bien qu'Axios et Fetch soient encore largement utilisés, Ky offre des avantages clés tels que des tentatives automatiques, des hooks pour personnaliser les demandes et les réponses et une meilleure gestion des erreurs par défaut.

Pour les développeurs qui privilégient la simplicité , les performances et le contrôle sur les requêtes HTTP, Ky vaut vraiment la peine d'être considéré comme un outil principal dans vos projets JavaScript.

Pour plus d'exemples et des informations détaillées sur l'API, vous pouvez visiter https://www.npmjs.com/package/ky.