Comment faire une requête GET HTTP en Javascript ?

Apprenez GET HTTP en Javascript. Découvrez Apidog, plateforme web pour tester et intégrer facilement les API.

Louis Dupont

Louis Dupont

5 June 2025

Comment faire une requête GET HTTP en Javascript ?

```html

Vous êtes-vous déjà demandé comment les sites web communiquent entre eux et échangent des données ? Comment accédez-vous aux informations d’une source en ligne et les affichez-vous sur votre propre page web ? Comment envoyez-vous des requêtes et recevez-vous des réponses sur Internet ?

Si vous êtes curieux de connaître ces questions, vous êtes au bon endroit. Dans cet article de blog, je vais vous montrer comment effectuer une requête HTTP GET en Javascript, l’un des moyens les plus courants et les plus utiles d’interagir avec les API web et comment Apidog peut vous aider.

💡
Apidog est une plateforme de collaboration API tout-en-un qui fournit une documentation API, un débogage API, une simulation API et des tests automatisés API. Il offre des capacités avancées pour gérer les requêtes javascript GET. Téléchargez Apidog gratuitement.
button

Mais tout d’abord, comprenons ce qu’est une requête HTTP GET et pourquoi vous en avez besoin.

Qu’est-ce qu’une requête HTTP GET ?

HTTP signifie Hypertext Transfer Protocol, qui est un ensemble de règles qui définissent comment les messages sont formatés et transmis sur le web. HTTP est le fondement de la communication de données pour le World Wide Web.

Une requête est un message que vous envoyez à un serveur, demandant des informations ou une action. Une réponse est un message que le serveur vous renvoie, contenant les informations ou le résultat que vous avez demandés.

Une requête GET est un type de requête HTTP qui demande au serveur de vous envoyer des données. Par exemple, lorsque vous tapez une URL dans votre navigateur, vous envoyez une requête GET au serveur, demandant la page web qui correspond à cette URL. Le serveur répond ensuite avec le code HTML de la page web, que votre navigateur affiche.

Javascript get Request

Une requête GET comporte deux composants principaux : une URL et une chaîne de requête. Une URL est l’adresse de la ressource à laquelle vous souhaitez accéder, telle que https://example.com. Une chaîne de requête est une partie de l’URL qui contient des informations ou des paramètres supplémentaires, tels que ?name=John&age=25. Une chaîne de requête commence par un point d’interrogation (?) et se compose de paires clé-valeur séparées par des esperluettes (&).

Une requête GET ressemble à ceci :

https://example.com?name=John&age=25

Dans cet exemple, nous envoyons une requête GET à https://example.com, avec deux paramètres : name et age. Le serveur utilisera ces paramètres pour traiter notre requête et nous envoyer la réponse appropriée.

Pourquoi avez-vous besoin d’une requête HTTP GET ?

Une requête HTTP GET est utile lorsque vous souhaitez récupérer des données d’un serveur web, sans rien modifier sur le serveur. Par exemple, vous souhaiterez peut-être obtenir les derniers articles d’actualités, les bulletins météorologiques, les cours des actions ou les profils d’utilisateurs à partir d’une source en ligne.

Cependant, tous les serveurs web ne sont pas ouverts et accessibles à tous. Certains serveurs web nécessitent une authentification, une autorisation ou un paiement pour accéder à leurs données. Ces serveurs web sont appelés API web.

Une API web est une interface de programmation d’applications qui vous permet d’interagir avec un serveur web par programmation, en utilisant des méthodes et des paramètres prédéfinis. Une API web agit comme un pont entre votre application et le serveur web, vous permettant d’échanger des données de manière structurée et standardisée.

Par exemple, si vous souhaitez obtenir la température actuelle à Paris à partir d’une API web météorologique, vous devrez peut-être envoyer une requête GET comme celle-ci :

https://api.weather.com?city=Paris&key=123456

Dans cet exemple, nous envoyons une requête GET à https://api.weather.com, avec deux paramètres : city et key. Le paramètre city spécifie l’emplacement pour lequel nous souhaitons obtenir les informations météorologiques, et le paramètre key est un identifiant unique qui prouve que nous sommes autorisés à utiliser l’API web. L’API web répondra ensuite avec la température actuelle à Paris, dans un format que nous pouvons facilement analyser et utiliser dans notre application.

Il existe de nombreuses API web disponibles sur Internet, couvrant divers domaines et sujets. Certaines API web sont gratuites et ouvertes, tandis que d’autres sont payantes et restreintes. Certaines API web sont simples et faciles à utiliser, tandis que d’autres sont complexes et avancées. Certaines API web sont bien documentées et fiables, tandis que d’autres sont mal documentées et peu fiables.

Comment trouver et choisir la meilleure API web pour vos besoins ? Comment apprendre à utiliser une API web et quels paramètres envoyer ? Comment gérer les erreurs et les exceptions lors de l’utilisation d’une API web ? Comment optimiser les performances et la sécurité de vos requêtes API web ?

Ce sont quelques-unes des questions que vous pouvez rencontrer lorsque vous travaillez avec des API web. Heureusement, il existe un outil qui peut vous aider avec tous ces défis et plus encore. Cet outil s’appelle Apidog.

button

Comment effectuer des requêtes HTTP GET en Javascript

Effectuer des requêtes HTTP GET en JavaScript est un moyen courant d’interagir avec des serveurs ou des API et de récupérer des données. Il existe plusieurs méthodes que vous pouvez utiliser pour effectuer des requêtes HTTP GET en JavaScript, telles que :

Comment envoyer une requête GET en JavaScript à l’aide de XMLHttpRequest

L’objet XMLHttpRequest est une fonctionnalité JavaScript native utilisée pour communiquer avec les serveurs et charger du contenu dans les pages web sans actualiser le navigateur. Lorsque vous souhaitez extraire des données d’un serveur, vous utilisez la requête GET. Pour envoyer avec succès une requête GET à l’aide de XMLHttpRequest en JavaScript, il est important de s’assurer que les étapes suivantes sont effectuées correctement :

  1. Tout d’abord, créez un nouvel objet XMLHttpRequest :
const xhr = new XMLHttpRequest();
  1. Ensuite, spécifiez l’URL du point de terminaison de l’API auquel vous souhaitez effectuer une requête GET :
const url = 'https://api.example.com/data';
  1. Ensuite, utilisez la méthode open() pour initialiser la requête :
xhr.open('GET', url);
  1. Ensuite, utilisez la propriété onreadystatechange pour définir une fonction de rappel qui sera appelée lorsque l’état de la requête change :
xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};
  1. Enfin, utilisez la méthode send() pour envoyer la requête :
xhr.send();

Dans cet exemple, nous effectuons une requête GET vers le point de terminaison de l’API spécifié par la variable url. Nous utilisons la propriété onreadystatechange pour définir une fonction de rappel qui sera appelée lorsque l’état de la requête change. Lorsque la requête est terminée et que le code d’état est 200, nous enregistrons le texte de la réponse dans la console.

Comment effectuer une requête GET avec l’API Fetch

L’API Fetch est une interface JavaScript contemporaine qui fonctionne sur des promesses, permettant l’envoi de requêtes HTTP à partir de navigateurs et de Node.js (à partir de la version 18) vers des serveurs. Elle peut gérer les mêmes tâches que l’objet XMLHttpRequest, mais d’une manière plus conviviale pour JavaScript en raison de son utilisation de promesses. De plus, elle peut être utilisée par d’autres technologies comme les Service Workers.

Explorons comment effectuer une requête HTTP GET à l’aide de l’API Fetch.

  1. Tout d’abord, créez un nouveau fichier JavaScript et ajoutez le code suivant pour importer l’API Fetch :
import fetch from 'node-fetch';
  1. Ensuite, spécifiez l’URL du point de terminaison de l’API auquel vous souhaitez effectuer une requête GET :
const url = 'https://api.example.com/data';
  1. Ensuite, utilisez l’API Fetch pour effectuer la requête GET :
fetch(url)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));
  1. Enfin, exécutez le fichier JavaScript pour voir les résultats de la requête GET.

L’API Fetch fournit un moyen simple et intuitif d’effectuer des requêtes HTTP GET en JavaScript. En suivant ces étapes, vous pouvez facilement effectuer des requêtes GET vers n’importe quel point de terminaison d’API.

Voici un exemple de la façon d’effectuer une requête HTTP GET à l’aide de l’API Fetch pour récupérer des données de l’API OpenWeatherMap :

const apiKey = 'YOUR_API_KEY';
const city = 'Seattle';
const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}`;

fetch(url)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

Dans cet exemple, nous effectuons une requête GET vers l’API OpenWeatherMap pour récupérer les données météorologiques de Seattle. Nous transmettons notre clé API et le nom de la ville pour laquelle nous souhaitons récupérer des données en tant que paramètres de requête dans l’URL.

En suivant ces étapes, vous pouvez facilement effectuer des requêtes HTTP GET à l’aide de l’API Fetch en JavaScript.

Axios, jquery, Javascrip illustration

Effectuer une requête HTTP GET avec Axios

Axios est une bibliothèque cliente HTTP. Cette bibliothèque est basée sur des promesses qui simplifient l’envoi de requêtes HTTP asynchrones aux points de terminaison REST. Nous enverrons une requête GET au point de terminaison de l’API JSONPlaceholder Posts.

Axios, contrairement à l’API Fetch, n’est pas intégré. Cela signifie que vous devez installer Axios dans votre projet JavaScript.

Voici les instructions étape par étape :

  1. Tout d’abord, installez Axios à l’aide de npm ou de yarn :
npm install axios

ou

yarn add axios
  1. Ensuite, importez Axios dans votre fichier JavaScript :
import axios from 'axios';
  1. Ensuite, spécifiez l’URL du point de terminaison de l’API auquel vous souhaitez effectuer une requête GET :
const url = 'https://api.example.com/data';
  1. Enfin, utilisez Axios pour effectuer la requête GET :
axios.get(url)
  .then(response => console.log(response.data))
  .catch(error => console.error('Error:', error));

Dans cet exemple, nous effectuons une requête GET vers le point de terminaison de l’API spécifié par la variable url. Nous utilisons la méthode then pour gérer la réponse et la méthode catch pour gérer les erreurs qui peuvent survenir.

Voici un autre exemple de la façon d’effectuer une requête HTTP GET à l’aide d’Axios pour récupérer des données de l’API OpenWeatherMap :

const apiKey = 'YOUR_API_KEY';
const city = 'Seattle';
const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}`;

axios.get(url)
  .then(response => console.log(response.data))
  .catch(error => console.error('Error:', error));

Dans cet exemple, nous effectuons une requête GET vers l’API OpenWeatherMap pour récupérer les données météorologiques de Seattle. Nous transmettons notre clé API et le nom de la ville pour laquelle nous souhaitons récupérer des données en tant que paramètres de requête dans l’URL.

En suivant ces étapes, vous pouvez facilement effectuer des requêtes HTTP GET à l’aide de la bibliothèque Axios en JavaScript.

Comment envoyer une requête GET à l’aide de jQuery ?

Effectuer des requêtes HTTP en jQuery est relativement simple et similaire à l’API Fetch et à Axios. Pour effectuer une requête GET, vous devez d’abord installer jQuery ou utiliser son CDN dans votre projet :

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

Ensuite, spécifiez l’URL du point de terminaison de l’API auquel vous souhaitez effectuer une requête GET :

const url = 'https://api.example.com/data';

Ensuite, utilisez la méthode $.get() pour effectuer la requête GET :

$.get(url, function(data) {
  console.log(data);
});

Enfin, exécutez votre fichier JavaScript pour voir les résultats de la requête GET.

Dans cet exemple, nous effectuons une requête GET vers le point de terminaison de l’API spécifié par la variable url. Nous utilisons la méthode $.get() pour effectuer la requête et le rappel function(data) pour gérer la réponse.

Voici un autre exemple de la façon d’effectuer une requête HTTP GET à l’aide de jQuery pour récupérer des données de l’API OpenWeatherMap :

const apiKey = 'YOUR_API_KEY';
const city = 'Seattle';
const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}`;

$.get(url, function(data) {
  console.log(data);
});

Dans cet exemple, nous effectuons une requête GET vers l’API OpenWeatherMap pour récupérer les données météorologiques de Seattle. Nous transmettons notre clé API et le nom de la ville pour laquelle nous souhaitons récupérer des données en tant que paramètres de requête dans l’URL.

Gestion des erreurs dans les requêtes HTTP GET Javascript

Lors de l’exécution d’une requête HTTP GET, il est important de gérer les erreurs qui peuvent survenir. Voici quelques bonnes pratiques pour la gestion des erreurs dans l’API REST :

  1. Codes d’état HTTP : lorsqu’un client effectue une requête vers un serveur HTTP, le serveur doit informer le client si la requête a été traitée avec succès ou non. HTTP y parvient avec cinq catégories de codes d’état : niveau 100 (Informatif), niveau 200 (Succès), niveau 300 (Redirection), niveau 400 (Erreur client) et niveau 500 (Erreur serveur). En fonction du code de réponse, un client peut déduire le résultat d’une requête particulière.
  2. Gestion des erreurs : la première étape de la gestion des erreurs consiste à fournir au client un code d’état approprié. De plus, nous devrons peut-être fournir plus d’informations dans le corps de la réponse. La façon la plus simple de gérer les erreurs consiste à répondre avec un code d’état approprié. Voici quelques codes de réponse courants : 400 Bad Request, 401 Unauthorized, 403 Forbidden, 404 Not Found, 412 Precondition Failed, 500 Internal Server Error et 503 Service Unavailable. Bien que basiques, ces codes permettent à un client de comprendre la nature générale de l’erreur qui s’est produite. Nous savons que si nous recevons une erreur 403, par exemple, nous n’avons pas les autorisations nécessaires pour accéder à la ressource que nous avons demandée. Dans de nombreux cas, cependant, nous devons fournir des détails supplémentaires dans nos réponses.
  3. Gestion des erreurs pour les réponses HTTP ayant échoué et les erreurs réseau : la fonction fetch() lèvera automatiquement une erreur pour les erreurs réseau, mais pas pour les erreurs HTTP telles que les réponses 4xx ou 5xx. Pour les erreurs HTTP, nous pouvons vérifier la propriété response.ok pour voir si la requête a échoué et rejeter nous-mêmes la promesse en appelant return Promise.reject(error).
  4. Gérer les erreurs de requête : lorsqu’une erreur se produit, vous pouvez obtenir des détails sur ce qui a échoué pour informer votre utilisateur. Dans certains cas, vous pouvez également réessayer automatiquement la requête. Une application doit donner à l’utilisateur des commentaires utiles en cas d’échec de l’accès aux données. Un objet d’erreur brut n’est pas particulièrement utile comme commentaire.

Qu’est-ce qu’Apidog et pourquoi devriez-vous l’utiliser ?

Apidog est une plateforme web qui vous permet de découvrir, de tester et d’intégrer facilement les API web. Apidog est conçu pour vous faciliter la vie lorsque vous travaillez avec des API web, en vous fournissant les fonctionnalités et avantages suivants :

Si vous souhaitez utiliser Apidog, vous pouvez le télécharger gratuitement et commencer à l’utiliser immédiatement.

button

Mais assez parlé, voyons Apidog en action. Dans la section suivante, je vais vous montrer comment utiliser Apidog pour effectuer une requête HTTP GET en Javascript, en utilisant une API web simple et amusante.

Comment générer une requête HTTP GET en Javascript avec Apidog

Apidog peut vous aider à générer du code javascript, il vous suffit de :

Étape 1 : Ouvrez Apidog et cliquez sur le bouton « Nouvelle requête » pour créer une nouvelle requête.

apidog

Étape 2 : Sélectionnez la requête Get

apidog

Étape 3 : Entrez l’URL du point de terminaison de l’API que vous souhaitez et passez à l’interface Design.

apidog

Étape 4 : Cliquez sur Générer le code client.

apidog

Étape 4 : Sélectionnez le code Javascript que vous souhaitez générer, il peut s’agir de Fetch, Axios, Jquery, XHR et plus encore. Il suffit de le copier et de le coller dans votre projet

apidog

Comment tester la requête HTTP GET Javascript à l’aide d’Apidog ?

Pour tester la requête HTTP Get à l’aide d’Apidog, vous devez suivre ces étapes simples :

  1. Ouvrez Apidog et cliquez sur le bouton « Nouvelle requête » pour créer une nouvelle requête.
apidog
  1. Sélectionnez « POST » comme méthode de la requête.
apidog

3. Entrez l’URL du point de terminaison de l’API

apidog

Cliquez ensuite sur le bouton « Envoyer » pour envoyer la requête à l’API.

apidog

Comme vous pouvez le constater, Apidog vous montre l’URL, les paramètres, les en-têtes et le corps de la requête, ainsi que l’état, les en-têtes et le corps de la réponse. Vous pouvez également voir le temps de réponse, la taille et le format de la requête et de la réponse, et les comparer avec différentes API web.

Meilleures pratiques pour les requêtes HTTP GET Javascript

L’envoi de requêtes HTTP GET bien conçues est crucial pour une communication efficace et sécurisée avec les serveurs web. Leur optimisation pour la sécurité, les performances et l’évolutivité est cruciale pour un système robuste et efficace. Voici quelques bonnes pratiques à suivre :

Sécurité

Performance

Évolutivité

Conseils supplémentaires :

En adhérant à ces méthodes recommandées, vous pouvez garantir que vos requêtes HTTP GET sont à la fois sécurisées et optimisées, ce qui favorise une application web ou une API résiliente et efficace. Gardez à l’esprit qu’il s’agit de principes généraux et que les besoins et les limites particuliers de votre projet peuvent nécessiter des stratégies alternatives. Testez toujours minutieusement votre implémentation pour vous assurer qu’elle répond à vos exigences.

Conclusion

Dans cet article de blog, nous avons appris à effectuer une requête HTTP GET en Javascript.  Nous avons également vu comment Apidog nous aide à tester et à déboguer les API web, en nous fournissant une interface conviviale et interactive qui nous permet d’envoyer des requêtes et de recevoir des réponses en temps réel. Nous avons également vu comment Apidog nous aide à intégrer les API web à nos applications, en nous fournissant les extraits de code et la documentation de chaque API web.

button

Nous espérons que vous avez appris quelque chose de nouveau et d’utile. Si vous souhaitez en savoir plus sur les API web, Apidog ou Javascript.

Explore more

Comment utiliser Deepseek R1 en local avec Cursor

Comment utiliser Deepseek R1 en local avec Cursor

Apprenez à configurer DeepSeek R1 local avec Cursor IDE pour une aide au codage IA privée et économique.

4 June 2025

Comment exécuter Gemma 3n sur Android ?

Comment exécuter Gemma 3n sur Android ?

Apprenez à installer et exécuter Gemma 3n sur Android via Google AI Edge Gallery.

3 June 2025

Comment utiliser Claude Code avec GitHub Actions

Comment utiliser Claude Code avec GitHub Actions

Découvrez Claude Code avec GitHub Actions : revues de code, corrections de bugs, implémentation de fonctionnalités. Tutoriel pour développeurs.

29 May 2025

Pratiquez le Design-first d'API dans Apidog

Découvrez une manière plus simple de créer et utiliser des API