Rest Client Extension pour Visual Studio Code

Dernière mise à jour Oct 18, 2021

Teneur

Installer l’extension Rest Client dans Visual Studio Code

Comment tester la requête et la réponse HTTP

Le flux de travail du développement Web évolue rapidement de nos jours. Les utilisateurs préfèrent créer des sites Web à l’aide de frameworks/bibliothèques JavaScript comme React, Vue, Angular. Bien que la construction d’un site Web sur ces technologies soit à la mode, cela nécessite également d’appeler des API Rest pour rendre vos applications dynamiques.

Votre application frontale envoie la requête HTTP au serveur principal et obtient ou traite les données. À votre serveur principal, vous devrez peut-être envoyer différentes requêtes HTTP telles que GET, POST, PUT, DELETE. Et sur la base de ces requêtes et réponses HTTP, votre application fonctionne pour l’utilisateur final.

Comme vous devez créer des points de terminaison d’API, il est évident que vous devez tester les requêtes HTTP. Il existe plusieurs outils disponibles qui nous permettent de tester la requête et la réponse HTTP. La bonne nouvelle est que si vous utilisez Visual Studio Code, vous n’avez pas besoin d’utiliser ou d’installer un autre outil ou logiciel. Vous pouvez tester vos appels d’API dans votre éditeur de code lui-même. Dans cet article, nous vous montrons comment utiliser l’extension Rest Client dans Visual Studio Code.

Installer l’extension Rest Client dans Visual Studio Code

Le but de cet article est de vous montrer comment l’utilisateur peut tester la requête et la réponse HTTP dans le code Visual Studio. Donc, dans un premier temps, vous devez installer l’extension appelée "Rest Client".

Cliquez sur l’icône "Extensions" et dans le champ de recherche tapez "Rest Client". Dans le résultat de la recherche, choisissez le package développé par "Huacho Mao" et installez-le.

Comment tester la requête et la réponse HTTP

Dans cette section, nous voyons comment envoyer une requête HTTP réelle et voir la réponse. Si vos points de terminaison d’API sont prêts, vous pouvez les appliquer directement. Dans notre cas, à des fins de test, nous prenons les points de terminaison de REQ | RES.

Créez un fichier avec l’extension ".http" comme "api.http". Vous pouvez enregistrer ce fichier n’importe où. Il s’agit simplement d’un fichier dans lequel vous pouvez stocker toutes vos requêtes HTTP pour une utilisation ultérieure.

Pour envoyer une requête GET, notre point de terminaison est https://reqres.in/api/users?page=2. Ainsi, dans le api.httpnous l’écrirons comme suit.

GET https://reqres.in/api/users?page=2

Maintenant, si vous vérifiez dans l’éditeur, vous verrez la ligne « Envoyer la demande » ajoutée à notre déclaration. Cliquez sur « Envoyer la demande », il atteint un point de terminaison d’API et vous donne une réponse HTTP dans la fenêtre suivante. Voir la capture d’écran ci-dessous.

C’est tellement plus simple. À l’avenir, vous pouvez envoyer une demande POST comme ci-dessous.

POST https://reqres.in/api/users
Content-Type: application/json

{
    "name": "morpheus",
    "job": "leader"
}

Bien sûr, vous ne voulez pas créer un fichier séparé pour chaque demande. Pour séparer la demande, appuyez sur Entrée et tapez "###", puis sur une nouvelle ligne, ajoutez votre nouvelle demande.

GET https://reqres.in/api/users?page=2

###
POST https://reqres.in/api/users
Content-Type: application/json

{
    "name": "morpheus",
    "job": "leader"
}

De cette façon, vous pouvez conserver toutes vos requêtes HTTP dans un seul fichier et le tester facilement. Plus besoin de vous presser pour trouver notre demande et ensuite l’utiliser.

Dans un autre exemple, vous devrez peut-être transmettre le jeton dans chaque requête HTTP. Vous pouvez le faire comme indiqué ci-dessous.

POST https://reqres.in/api/users
Authorization: Bearer YOUR_TOKEN_HERE
Content-Type: application/json

{
  "user_id":5,
    "car_number":"030663",
    "car_reg_id":"217",
    "days": ["Monday", "Wednesday"],
    "booking_time": "07PM - 08PM"
}

Vous avez l’idée, non? De la même manière, vous pouvez écrire vos requêtes HTTP PUT, DELETE. Vas-y, essaies. Vous aimeriez certainement cette extension. Nous aimerions entendre vos pensées et suggestions dans la section commentaires ci-dessous.

Articles Liés

Source d’enregistrement: artisansweb.net