Au cours du développement, il est fréquent que vous fassiez des requêtes aux API. Il peut s’agir d’une API externe ou de l’API de votre propre serveur.
Vous pouvez utiliser des outils tiers comme Postman pour effectuer vos appels d’API. Mais une extension VS Code vous permet d’effectuer des appels API directement depuis VS Code. Ici, vous apprendrez à effectuer des requêtes API dans VS Code.
L’extension client REST de VS Code
Une extension dans VS Code est un plugin ou un add-on qui améliore les fonctionnalités de l’éditeur Visual Studio Code. Le marché des extensions VS Code propose plusieurs types d’extensions qui peuvent vous aider dans vos tâches de programmation. Il existe une extension permettant d’ajouter un support linguistique. Il y en a une pour fournir une fonction d’auto-complétion pour un langage de programmation spécifique, etc. Les extensions facilitent la programmation avec VS Code.
L’extension REST Client vous permet d’exécuter des requêtes API à partir de VS Code. L’extension comprend l’éditeur d’API REST, une interface visuelle qui vous permet d’interroger les points d’extrémité de l’API. Il accepte les en-têtes personnalisés, les paramètres de requête et d’autres paramètres.
Pour installer le client REST, ouvrez VS Code et cliquez sur le bouton Extensions tab. Recherchez Client REST et cliquez sur le bouton Installer pour l’ajouter à VS Code.
Sous l’onglet Détails Dans l’onglet REST, vous trouverez un tutoriel utile sur la manière d’utiliser le client pour effectuer des demandes d’API. Voyons les quatre types de requêtes les plus courants et comment les effectuer à l’aide de l’extension REST Client.
Nous utiliserons JSONPlaceholder pour démontrer comment effectuer des appels API à l’aide de l’extension REST Client. Elle fournit six ressources communes que vous pouvez lire, modifier, mettre à jour ou supprimer en effectuant des requêtes API.
Effectuer une requête GET à l’aide de l’extension client REST
Commencez par créer un fichier .http pour vos demandes d’API. Vous pouvez nommer ce fichier mesdemandes.http.
Ajoutez le code suivant à votre mesdemandes.http pour récupérer une ressource de l’API JSONPlaceholder dont l’ID est 1 :
GET https://jsonplaceholder.typicode.com/posts/1 HTTP/1.1
Pour envoyer la demande, cliquez sur le bouton Envoyer la demande qui apparaît en haut du fichier. Une nouvelle fenêtre s’ouvre et contient les détails de la réponse.
Voici comment faire une requête GET dans VS Code.
Faire une requête POST en utilisant l’extension client REST
Vous faites une requête POST lorsque vous voulez envoyer des données au serveur, généralement pour créer une nouvelle ressource.
Pour créer une nouvelle ressource dans l’API JSONPlaceholder, remplacez le code dans votre fichier mesdemandes.http avec ce qui suit :
POST https://jsonplaceholder.typicode.com/posts HTTP/1.1
Content-Type: "application/json"
{
"title": "foo",
"body": "bar",
"userId": 1
}
Cliquez sur le bouton Envoyer la demande pour envoyer la demande. Une nouvelle fenêtre s’ouvre alors, contenant les données de la réponse. La réponse montre un HTTP/1.1 201 Créé et l’ID du message, ainsi que d’autres données si l’appel à l’API est réussi.
{
"id": "101"
}
Effectuer une requête PUT à l’aide de l’extension client REST
Vous effectuez une requête PUT lorsque vous souhaitez mettre à jour des données sur le serveur.
Pour mettre à jour une ressource existante dans l’API JSONPlaceholder, remplacez le code dans votre fichier myrequests.http avec ce qui suit :
PUT https://jsonplaceholder.typicode.com/posts/1 HTTP/1.1
Content-Type: "application/json"
{
"title": "new foo",
"body": "new bar",
"userId": 1
}
Après l’envoi de la requête, la ressource sera mise à jour sur le serveur fictif et vous obtiendrez un message de type HTTP/1.1 200 OK message.
Faire une requête PATCH en utilisant l’extension client REST
Vous effectuez une requête PATCH lorsque vous souhaitez modifier un champ ou une propriété particulière d’une ressource donnée sur le serveur.
Pour mettre à jour uniquement le titre d’une ressource existante dans le serveur fictif, remplacez le code de votre fichier myrequests.http avec ce qui suit :
https://jsonplaceholder.typicode.com/posts/1 HTTP/1.1
Content-Type: "application/json"
{
"title": "another foo"
}
Une fois la demande effectuée, le titre de la ressource sera mis à jour sur le serveur fictif et vous obtiendrez un message d’erreur HTTP/1.1 200 OK avec les autres données de la ressource.
Effectuer une requête DELETE à l’aide de l’extension client REST
Vous effectuez une requête DELETE lorsque vous souhaitez supprimer une ressource sur le serveur.
Pour supprimer une ressource existante dans le serveur fictif, remplacez le code dans votre fichier mesrequêtes.http avec ce qui suit :
DELETE https://jsonplaceholder.typicode.com/posts/1 HTTP/1.1
Ici, le Content-Type n’est pas nécessaire, pas plus que l’objet de données. Si vous envoyez la requête et que vous parvenez à supprimer la ressource, vous devriez obtenir un message d’erreur HTTP/1.1 200 OK réponse avec un objet vide.
Faire des appels API depuis VS Code
Auparavant, vous avez peut-être utilisé des outils tiers tels que Postman pour effectuer des requêtes d’API. Bien que ces outils soient efficaces, il faut du temps pour les configurer. Par exemple, vous devez avoir un compte chez Postman pour utiliser l’explorateur d’API.
Bien qu’il existe plusieurs outils de test d’API en ligne, avec des extensions telles que REST Client, le test des API est beaucoup plus rapide et facile. Vous pouvez tester n’importe quelle API directement depuis votre éditeur VS Code. C’est particulièrement utile si vous développez des API localement et que vous souhaitez tester vos API locales à la volée.
Autres extensions VS Code pour le test des API
Rest Client est facile à utiliser. Mais ce n’est pas la seule extension VS Code pour tester les API. D’autres options populaires sont Thunder Client, httpYak, et httpBook.
Thunder Client fournit un éditeur visuel d’API pour simplifier les demandes d’API. Bien entendu, vous devez savoir ce qu’est une API REST pour utiliser ces outils.
