Comment effectuer des requêtes HTTP dans Node.js avec l'API Fetch

L'API Fetch est l'un des moyens les plus utilisés pour effectuer des requêtes HTTP en JavaScript. Elle vous permet d'envoyer et de recevoir des données depuis des serveurs de manière simple et efficace. Bien qu'elle ait été utilisée dans des applications basées sur un navigateur, les récentes mises à jour de Node.js ont introduit une prise en charge expérimentale de l'API Fetch afin que vous puissiez écrire du code côté serveur sans avoir recours à des bibliothèques tierces.

Cet article vous montrera comment utiliser l'API Fetch dans Node.js pour effectuer des requêtes HTTP. Que vous ayez besoin d'effectuer des requêtes GET ou POST, de gérer des en-têtes ou de comparer l'API Fetch avec Axios, cet article vous aidera à démarrer. Allons-y !

Table des matières

1. Pourquoi utiliser Fetch API pour les requêtes HTTP ?
2. Configuration de l'API Fetch dans Node.js
3. Effectuer des requêtes GET avec l'API Fetch
4. Gestion des en-têtes de réponse dans l'API Fetch
5. Envoi de requêtes POST avec l'API Fetch
6. Gestion des erreurs dans l'API Fetch
7. Fetch API vs Axios : principales différences
8. Réflexions finales
9. FAQ - Foire Aux Questions

Pourquoi utiliser Fetch API pour les requêtes HTTP ?

L'API Fetch est un moyen moderne et flexible de réaliser des requêtes HTTP en JavaScript. Elle simplifie le processus de communication avec les API et les serveurs à l'aide de promesses et rend votre code plus propre et plus facile à gérer.

Voici quelques raisons pour lesquelles les développeurs aiment l'API Fetch :

1. Prise en charge intégrée dans JavaScript moderne
   L'API Fetch est prise en charge dans tous les navigateurs et, depuis Node.js 17.5, elle est également prise en charge dans JavaScript côté serveur. Pas besoin de bibliothèques tierces comme Axios ou node-fetch.

2. Approche basée sur les promesses
   Contrairement aux méthodes plus anciennes comme XMLHttpRequest, Fetch API utilise des promesses afin que vous puissiez éviter l'enfer des rappels et écrire du code asynchrone plus lisible.

3. Flexible et personnalisable
   Fetch API prend en charge toutes les méthodes HTTP courantes (GET, POST, PUT, DELETE) et vous permet d'ajouter des en-têtes personnalisés, de gérer facilement les données JSON et de gérer différents types de requêtes et de réponses.

4. Solution légère
   Étant donné que l'API Fetch est intégrée aux environnements JavaScript modernes, vous n'avez pas besoin d'installer de bibliothèques supplémentaires, ce qui réduit les dépendances de votre projet et améliore l'efficacité.

Configuration de l'API Fetch dans Node.js

Avant de pouvoir utiliser l'API Fetch dans Node.js, vous devez configurer correctement votre environnement. L'API Fetch est disponible nativement dans Node.js 17.5 et versions ultérieures, mais elle est encore expérimentale dans certaines versions. Passons en revue le processus de configuration.

Étape 1 : Vérifiez votre version de Node.js

Pour utiliser l'API Fetch sans installer de bibliothèques supplémentaires, vous avez besoin de Node.js 17.5 ou supérieur. Exécutez la commande suivante dans votre terminal pour vérifier votre version de Node.js :

noeud -v

Si votre version est inférieure à 17.5, téléchargez la dernière à partir du site web officiel.

Étape 2 : Activer l'API de récupération expérimentale (facultatif)

Si vous utilisez la version 17.5 ou supérieure mais que vous trouvez toujours Fetch API expérimental, vous devrez peut-être l'activer. --experimental-fetch lors de l'exécution de votre code :

nœud --experimental-fetch votre_code.js

Étape 3 : Créer un projet Node.js

Si vous partez de zéro, créez un nouveau projet Node.js. Utilisez les commandes suivantes pour initialiser votre projet et créer un fichier pour votre code :

mkdir fetch-api-démo
cd fetch-api-démo
npm init -y
-nous app.js

Étape 4 : utiliser l'API Fetch

Vous pouvez désormais écrire le code de l'API Fetch directement dans votre fichier app.js. Par exemple, une requête GET de base ressemble à ceci :

rapporter('https://jsonplaceholder.typicode.com/posts/1')
  .puis((RAPIDE) => réponse.json())
  .puis((données,) => {
    console.enregistrer(données);
  })
  .capture((erreur) => {
    console.erreur('Erreur:', erreur);
  });

Utilisation d'une bibliothèque tierce (facultatif)

Si vous travaillez avec une ancienne version de Node.js ou si vous préférez ne pas effectuer de mise à niveau, vous pouvez toujours utiliser l'API Fetch en installant la bibliothèque node-fetch. Installez-la avec :

npm installer node-fetch

Ensuite, importez-le et utilisez-le dans votre code comme ceci :

const chercher = exigent('récupération de nœud');

rapporter('https://jsonplaceholder.typicode.com/posts/1')
  .puis((RAPIDE) => réponse.json())
  .puis((données,) => {
    console.enregistrer(données);
  })
  .capture((erreur) => {
    console.erreur('Erreur:', erreur);
  });

La configuration de l'API Fetch dans Node.js est simple. Une fois cela fait, vous pouvez commencer à effectuer des requêtes HTTP. Dans la section suivante, nous verrons comment utiliser l'API Fetch pour les requêtes GET.

Effectuer des requêtes GET avec l'API Fetch

Les requêtes GET sont le type de requête HTTP le plus courant utilisé pour récupérer des données à partir d'un serveur. Avec Fetch API dans Node.js, créer des requêtes GET est facile. Voyons comment créer des requêtes GET et gérer les réponses.

Exemple de requête GET de base

L'API Fetch vous permet de récupérer des données à l'aide de fetch() fonction qui prend l'URL de la ressource comme premier paramètre. Voici un exemple de création d'une requête GET de base :

rapporter('https://jsonplaceholder.typicode.com/posts/1')
  .puis((RAPIDE) => réponse.json()) // Analyser la réponse JSON
  .puis((données,) => {
    console.enregistrer('Poste:', données);
  })
  .capture((erreur) => {
    console.erreur('Erreur:', erreur);
  });

Explication:

• fetch() envoie une requête HTTP GET à l'URL.
• response.json() extrait les données JSON de la réponse.
• then() gère les données de réponse.
• catch() détecte toutes les erreurs.

Utilisation d'Async-Await pour les requêtes GET

Async-await rend le code plus propre. Voici la même requête GET utilisant async-await :

(async () => {
  Essai {
    const réponse = attendre rapporter('https://jsonplaceholder.typicode.com/posts/1');
    const données = attendre réponse.json();
    console.enregistrer('Poste:', données);
  } capture (erreur) {
    console.erreur('Erreur:', erreur);
  }
}) ();

Principaux avantages de l’utilisation d’Async-Await :

• Il simplifie la gestion des promesses en évitant les imbrications .then() appels.
• C'est plus facile à lire, surtout pour une logique complexe.

Récupérer plusieurs ressources

Vous pouvez également récupérer plusieurs ressources à la fois. Voici un exemple :

rapporter('https://jsonplaceholder.typicode.com/posts')
  .puis((RAPIDE) => réponse.json())
  .puis((données,) => {
    console.enregistrer(« Messages : », données);
  })
  .capture((erreur) => {
    console.erreur('Erreur:', erreur);
  });

Ce code récupère une liste de publications de l'API et les enregistre dans la console.

Ajout de paramètres de requête

Pour inclure des paramètres de requête dans votre requête GET, ajoutez-les à l'URL comme ceci :

const identifiant utilisateur = 1;
rapporter(`https://jsonplaceholder.typicode.com/posts?userId=${userId}`)
  .puis((RAPIDE) => réponse.json())
  .puis((données,) => {
    console.enregistrer(« Messages des utilisateurs : », données);
  })
  .capture((erreur) => {
    console.erreur('Erreur:', erreur);
  });

Gestion des réponses

L'API Fetch offre la flexibilité nécessaire pour gérer différents types de réponses, comme du texte brut, du JSON ou du binaire. Voici comment gérer une réponse en texte brut :

rapporter('https://jsonplaceholder.typicode.com/posts/1')
  .puis((RAPIDE) => réponse.texte())
  .puis((données,) => {
    console.enregistrer(« Réponse en texte brut : », données);
  })
  .capture((erreur) => {
    console.erreur('Erreur:', erreur);
  });

Les requêtes GET sont le pain quotidien de toute API Web. Avec Fetch API, vous pouvez les exécuter et conserver votre code propre et lisible. Dans la section suivante, nous verrons comment gérer les en-têtes de réponse dans Fetch API.

Gestion des en-têtes de réponse dans l'API Fetch

Les en-têtes de réponse fournissent des métadonnées importantes sur une réponse HTTP, telles que le type de contenu, les détails du serveur ou les instructions de mise en cache. Avec Fetch API, vous pouvez accéder à ces en-têtes et les utiliser facilement.

Accéder aux en-têtes de réponse

Le Response objet renvoyé par le fetch() La fonction possède une propriété headers. Cette propriété est une Headers objet qui vous permet de lire et de modifier les en-têtes de réponse. Voici un exemple :

rapporter('https://jsonplaceholder.typicode.com/posts/1')
  .puis((RAPIDE) => {
    // Boucle à travers les en-têtes
    pour (laisser [clé, valeur] of réponse.têtes) {
      console.enregistrer(`${clé}: ${valeur}`);
    }
    retourner réponse.json();
  })
  .puis((données,) => {
    console.enregistrer('Poste:', données);
  })
  .capture((erreur) => {
    console.erreur('Erreur:', erreur);
  });

Que se passe-t-il ici :

• response.headers est un objet avec tous les en-têtes renvoyés par le serveur.
• La boucle for…of parcourt chaque en-tête et imprime les paires clé-valeur.

En-têtes fréquemment utilisés

Certains des en-têtes les plus courants sont :

• Content-Type: Le type de média de la ressource (par exemple application/json)
• Cache-Control:Spécifie le comportement de mise en cache.
• Autorisation:Contient les informations d'authentification.

Vous pouvez accéder à des en-têtes spécifiques en utilisant le get() méthode:

rapporter('https://jsonplaceholder.typicode.com/posts/1')
  .puis((RAPIDE) => {
    const contentType = réponse.têtes.obtenez('type de contenu');
    console.enregistrer(« Type de contenu : », type de contenu);
    retourner réponse.json();
  })
  .puis((données,) => {
    console.enregistrer('Poste:', données);
  })
  .capture((erreur) => {
    console.erreur('Erreur:', erreur);
  });

CORS et en-têtes restreints

Lors de l'utilisation de l'API Fetch dans un navigateur, les règles de partage des ressources entre origines croisées (CORS) peuvent restreindre les en-têtes accessibles. Seuls les en-têtes suivants sont exposés par défaut :

• Cache-Control
• Content-Language
• Content-Type
• Expires
• Last-Modified
• Pragma

Dans Node.js, rien de tout cela ne s'applique, vous avez donc un accès complet à tous les en-têtes.

Cas d'utilisation pratique : Vérification du statut de la réponse

Vous pouvez utiliser des en-têtes pour vérifier l'état de la réponse avant de traiter le corps.

rapporter('https://jsonplaceholder.typicode.com/posts/1')
  .puis((RAPIDE) => {
    if (réponse.ok) {
      console.enregistrer(« La réponse est OK »);
    } d'autre {
      console.enregistrer(« Erreur de réponse : », réponse.statuts);
    }
    retourner réponse.json();
  })
  .puis((données,) => {
    console.enregistrer('Poste:', données);
  })
  .capture((erreur) => {
    console.erreur('Erreur:', erreur);
  });

Cela garantit que vous ne traitez que les réponses valides, ce qui rend votre code plus robuste.

En comprenant et en utilisant les en-têtes de réponse, vous pouvez gérer les métadonnées, gérer les erreurs et optimiser vos requêtes API. Dans la section suivante, nous verrons comment envoyer des requêtes POST avec Fetch API.

Envoi de requêtes POST avec l'API Fetch

Fetch API facilite l'envoi de requêtes HTTP POST aux API. Une requête POST est utilisée lorsque vous souhaitez envoyer des données à un serveur, par exemple pour soumettre des données de formulaire ou créer un nouvel enregistrement dans une base de données.

Envoi d'une requête POST de base

Pour envoyer une requête POST, vous devez inclure le method propriété dans le fetch() Objet options. De plus, la propriété body est utilisée pour spécifier les données que vous souhaitez envoyer. Voici un exemple :

const URL = 'https://jsonplaceholder.typicode.com/posts';
const données = {
  titre: « Nouveau message »,
  corps: «Voici le contenu du message.»,
  identifiant d'utilisateur: 1,
};

rapporter(url, {
  méthode: 'PUBLIER',
  têtes: {
    'Type de contenu': 'application/json',
  },
  corps: JSON.stringifier(données), // Convertir les données en chaîne JSON
})
  .puis((RAPIDE) => réponse.json())
  .puis((données,) => {
    console.enregistrer('Réponse:', données);
  })
  .capture((erreur) => {
    console.erreur('Erreur:', erreur);
  });

Que se passe-t-il ici :

1. URL: Le point de terminaison de la requête POST.
2. Méthode:Spécifie la méthode HTTP (POST).
3. En-têtes: Définit Content-Type pour indiquer au serveur que les données sont JSON.
4. Les chuchotements :Contient les données codées en JSON à envoyer.

Pourquoi utiliser JSON.stringify ?

Lors de l'envoi de données avec l'API Fetch, il doit s'agir d'une chaîne. C'est là que JSON.stringify() intervient : il transforme votre objet JavaScript en une chaîne JSON que le serveur peut comprendre.

Gestion des réponses du serveur

Après avoir envoyé une requête POST, vous recevez généralement une réponse du serveur. La réponse peut inclure l'état de la requête et toutes les nouvelles données créées sur le serveur.

rapporter(url, {
  méthode: 'PUBLIER',
  têtes: {
    'Type de contenu': 'application/json',
  },
  corps: JSON.stringifier(données),
})
  .puis((RAPIDE) => {
    if (réponse.ok) {
      console.enregistrer(« POST réussi »);
    } d'autre {
      console.enregistrer('Erreur:', réponse.statuts);
    }
    retourner réponse.json();
  })
  .puis((données,) => {
    console.enregistrer(« Ressource créée : », données);
  })
  .capture((erreur) => {
    console.erreur('Erreur:', erreur);
  });

Cas d'utilisation réel

Supposons que vous créez un formulaire d'inscription d'utilisateur. Voici comment vous pouvez envoyer les données du formulaire à l'aide d'une requête POST :

const utilisateur = {
  prénom: « John Doe »,
  email: '[email protected]',
  Mot de passe: « mot de passe sécurisé »,
};

rapporter('https://exemple.com/api/register', {
  méthode: 'PUBLIER',
  têtes: {
    'Type de contenu': 'application/json',
  },
  corps: JSON.stringifier(utilisateur),
})
  .puis((RAPIDE) => réponse.json())
  .puis((données,) => {
    console.enregistrer(« Utilisateur enregistré : », données);
  })
  .capture((erreur) => {
    console.erreur('Erreur:', erreur);
  });

L'utilisation de l'API Fetch pour les requêtes POST vous permet d'envoyer des données aux serveurs. Nous aborderons ensuite la gestion des erreurs afin que vos requêtes soient robustes.

Gestion des erreurs dans l'API Fetch

La gestion des erreurs est une partie importante des requêtes HTTP avec l'API Fetch. Elle garantit que votre application gère les problèmes de réseau, les réponses non valides ou les erreurs inattendues.

Pourquoi la gestion des erreurs est-elle importante ?

Lorsque vous effectuez des requêtes HTTP, de nombreuses choses peuvent mal se passer :

• Le serveur est en panne.
• L'URL est erronée.
• La réponse n’est pas celle que nous attendions.
• Le réseau interrompra la demande.

Si vous ne gérez pas les erreurs, votre application échouera ou plantera et l'utilisateur passera un mauvais moment.

Gestion des erreurs avec then et catch

L'API Fetch renvoie une promesse. Vous pouvez utiliser l' .catch() méthode pour gérer les erreurs lors de la requête.

Voici un exemple :

rapporter('https://invalid-url.example.com')
  .puis((RAPIDE) => {
    if (!réponse.ok) {
      renversement nouvelle Erreur(`Erreur HTTP ! Statut : ${response.status}`);
    }
    retourner réponse.json();
  })
  .puis((données,) => {
    console.enregistrer('Données:', données);
  })
  .capture((erreur) => {
    console.erreur(« Erreur lors de la récupération : », erreur);
  });

Points clés:

• if (!response.ok) vérifie si l'état de la réponse HTTP est compris entre 200 et 299. Dans le cas contraire, une erreur est générée.
• .catch() détecte à la fois les erreurs réseau et les erreurs générées dans le .then() chaîne.

Utilisation de Try-Catch avec Async-Await

Pour un code plus propre, vous pouvez utiliser async et await avec try-catch bloquer pour gérer les erreurs.

Voici le même exemple :

(async () => {
  Essai {
    const réponse = attendre rapporter('https://invalid-url.example.com');
    if (!réponse.ok) {
      renversement nouvelle Erreur(`Erreur HTTP ! Statut : ${response.status}`);
    }
    const données = attendre réponse.json();
    console.enregistrer('Données:', données);
  } capture (erreur) {
    console.erreur(« Erreur lors de la récupération : », erreur);
  }
}) ();

Avantages de Try-Catch :

• Plus facile à lire et à comprendre, en particulier pour la logique complexe.
• Regroupe le code de gestion des erreurs en un seul endroit.

Gestion des délais d'attente

Par défaut, l'API Fetch ne prend pas en charge les délais d'expiration des requêtes. Cependant, vous pouvez créer un délai d'expiration personnalisé à l'aide de Promise.race().

Voici comment le mettre en œuvre :

const récupérerAvecTimeout = (url, options, délai d'attente = 5000) => {
  retourner Promesse.breed([
    rapporter(url, options),
    nouvelle Promesse((_, rejeter) => setTimeout(() => rejeter(nouvelle Erreur(« La demande a expiré »)), temps mort)),
  ]);
};

(async () => {
  Essai {
    const réponse = attendre récupérerAvecTimeout('https://exemple.com/données', {}, 3000);
    const données = attendre réponse.json();
    console.enregistrer('Données:', données);
  } capture (erreur) {
    console.erreur('Erreur:', erreur.message);
  }
}) ();

Que se passe-t-il ici :

• Promise.race() exécute deux promesses : une pour la demande de récupération et une pour le délai d'attente.
• Si la demande de récupération prend plus de temps que le délai d'expiration (3 secondes dans cet exemple), la promesse de délai d'expiration rejette l'opération.

Scénarios d'erreur courants à surveiller

1. URL invalides: Assurez-vous que vos points de terminaison d'API sont corrects. 2.** Problèmes de réseau** : gérez les cas où le réseau n'est pas disponible.
2. Réponses non JSON:Si le serveur envoie des données non JSON, la méthode response.json() générera une erreur.
3. Problèmes CORS: Assurez-vous que le serveur autorise les requêtes inter-origines si vous l'exécutez dans un navigateur.

Journalisation des erreurs pour le débogage

Lorsqu'une erreur se produit, sa journalisation peut aider au débogage :

rapporter('https://exemple.com/api')
  .puis((RAPIDE) => réponse.json())
  .capture((erreur) => {
    console.erreur(« Récupération échouée : », erreur);
    // Connectez-vous à un service de surveillance des erreurs comme Sentry ou Rollbar
  });

La gestion des erreurs rendra votre application plus stable et plus fiable. Dans la section suivante, nous comparerons Fetch avec Axios pour vous aider à décider lequel utiliser.

Fetch API vs Axios : principales différences

Lorsque vous travaillez avec des requêtes HTTP dans Node.js ou dans le navigateur, l'API Fetch et Axios sont deux options. Les deux sont excellentes mais différentes. Comparons-les en fonction de points clés pour vous aider à choisir.

Lequel devriez-vous utiliser ?

Fetch API et Axios ont tous deux leur utilité, mais cela dépend de votre projet :

• Utiliser l'API Fetch si vous souhaitez une solution native, sans dépendances externes, et que votre projet cible les navigateurs modernes ou Node.js (avec support expérimental).
• Utiliser Axios si vous avez besoin de fonctionnalités supplémentaires telles que des intercepteurs, une gestion des erreurs plus simple, des délais d'attente intégrés ou l'annulation des demandes. Axios est également adapté à la prise en charge des navigateurs plus anciens.

Réflexions finales

Dans ce blog, nous avons expliqué comment effectuer des requêtes HTTP dans Node.js avec l'API Fetch. Nous avons étudié la configuration de Fetch, la création de requêtes GET et POST, la gestion des en-têtes de réponse et la comparaison de Fetch avec Axios.

L'API Fetch est un moyen simple et moderne de réaliser des requêtes HTTP dans Node.js et les navigateurs. Elle est légère et fonctionne dans la plupart des cas. Mais si vous avez besoin d'intercepteurs ou de délais d'attente intégrés, Axios pourrait être un meilleur choix.

En résumé, l'API Fetch est bonne pour la plupart des cas et constitue un moyen simple et efficace de gérer les requêtes réseau dans Node.js.

FAQ - Foire Aux Questions

Q. Quelle est la différence entre Fetch API et Axios ?

Fetch API et Axios sont deux moyens de faire des requêtes HTTP en JavaScript, mais il existe des différences clés. Fetch est une fonctionnalité native du navigateur et est fournie avec le support expérimental de Node.js, Axios est une bibliothèque tierce. Axios simplifie des choses comme l'analyse automatique de JSON et les intercepteurs de requêtes/réponses, que Fetch ne propose pas par défaut. Fetch, en revanche, est plus simple et ne nécessite pas de dépendances supplémentaires.

Q. Comment gérer les erreurs avec Fetch API dans Node.js ?

La gestion des erreurs dans l'API Fetch est simple. Étant donné que Fetch renvoie une promesse, vous pouvez utiliser .catch() pour détecter les erreurs ou utiliser try...catch avec async/await. Par exemple, en utilisant async/await, vous pouvez gérer les erreurs comme suit :

Essai {
  const réponse = attendre rapporter(url);
  const données = attendre réponse.json();
  console.enregistrer(données);
} capture (erreur) {
  console.erreur('Erreur:', erreur);
}

Cela garantit que tous les problèmes tels que les pannes de réseau ou les URL non valides sont correctement traités.

Q. Puis-je utiliser l'API Fetch pour les requêtes POST dans Node.js ?

Oui, l'API Fetch fonctionne parfaitement pour effectuer des requêtes POST. Il vous suffit de spécifier le method as POST et inclure un body (généralement JSON). Voici un exemple :

const réponse = attendre rapporter(url, {
  méthode: 'PUBLIER',
  têtes: { 'Type de contenu': 'application/json' },
  corps: JSON.stringifier({ clé: 'valeur' }),
});
const données = attendre réponse.json();
console.enregistrer(données);

Cela envoie des données au serveur et gère la réponse au format JSON.