Explication détaillée de la façon d'utiliser le plug-in VSCode REST pour effectuer des appels API

Recommandations associées : "Tutoriel de base de VScode"

Pourquoi devriez-vous quitter l'EDI pour tester de nouvelles API ? Maintenant, vous n’êtes plus obligé.

Comment obtenons-nous les données

Si vous faites du développement Web depuis longtemps, vous savez probablement qu'une grande partie de notre travail tourne autour des données de : lire des données, écrire des données, manipuler des données et les afficher dans le navigateur de manière raisonnable.

Et la grande majorité de ces données sont fournies par les points de terminaison de l'API REST : en termes simples : les données que nous voulons existent dans d'autres services ou bases de données, notre application interroge ce service pour récupérer les données et utilise les données en conséquence. à vos propres besoins.

Dans le passé, afin de tester une API REST avant de vous connecter à l'interface utilisateur pour accepter des données, vous deviez généralement interroger l'API via la ligne de commande du terminal, ou utiliser une interface graphique comme Insomnia ou Postman ( J'en ai parlé dans une comparaison de blog précédente).

Mais maintenant, si vous utilisez VS Code (pourquoi pas, c'est tellement génial d'écrire du code avec !), la vie devient simple. On n'a plus besoin de sortir de l'EDI pour tester l'API, car il existe désormais un plugin qui permet de faire cela : REST Client.

Utiliser le client REST est très simple, je vais vous montrer à quel point ce plugin est simple et pourtant complet.

Découvrez le plug-in VS Code REST Client

Je suis fan de l'éditeur de code VS Code depuis plusieurs années. Chaque fois que j'apprends que quelqu'un l'a fait. créé un nouveau, je serais extrêmement reconnaissant pour tous les plugins et ajouts utiles au VS Code Marketplace.

Alors, quand j'ai décidé que ce serait pénible de démarrer Postman ou Insomnia à chaque fois que j'avais besoin de tester une nouvelle route API, j'ai découvert le plugin REST Client, qui rend les choses faciles.

Le client REST est le nom le plus évident pour un outil qui existe à ce jour, et sa description du marché VS Code résume avec précision ses capacités : "Le client REST vous permet d'envoyer des requêtes HTTP et d'afficher les réponses directement dans Visual Studio Code. ."

C'est aussi simple que ça. Ensuite, il donne beaucoup de détails et d'exemples sur la façon de l'utiliser, mais en réalité, c'est un outil HTTP intégré à VS Code. Alors commençons à l'utiliser.

Installer le client REST

Pour le trouver, ouvrez l'extension Market dans VS Code (la petite icône Tetris sur le panneau de gauche), saisissez "rest client" et installez le premier résultat de la liste (l'auteur doit être Huachao Mao).

Une fois l'installation terminée, nous pouvons continuer la configuration.

Configurer un script client REST

Créez simplement un fichier se terminant par .http à la racine de votre projet, le client REST le reconnaît et sait qu'il devrait être capable d'exécuter des requêtes HTTP à partir de ce fichier.

Pendant les tests, j'ai pris une application de connexion MERN full-stack dockerisée que j'ai créée il y a quelques années et j'ai déposé un fichier que j'ai nommé test.http dans le répertoire racine du dossier du projet.

Testez-le : opérations de base

Voici la partie intéressante : d'après mon expérience, ce petit plugin REST The Client peut faire autant que des clients API plus complexes comme Postman.

Ci-dessous, je vais vous montrer comment effectuer chaque type d'opération CRUD de base, ainsi que comment effectuer des appels API qui nécessitent une authentification comme les jetons JWT, en utilisant mon application d'enregistrement d'utilisateur MERN exécutée localement pour pointer vers l'appel.

Exemple POST

Le premier exemple que je présenterai est celui du client REST POST car l'utilisateur doit s'inscrire avant de faire quoi que ce soit d'autre dans mon application. Toute opération (après tout, ce n'est qu'un service de connexion).

Par conséquent, le code apparaîtra dans le fichier test.http.

D'accord, passons en revue ce qui se passe dans l'extrait de code ci-dessus.

La première chose dont un client REST a besoin pour fonctionner correctement est le type de requête effectuée et le chemin URL complet de la route à laquelle il tente d'accéder. Dans ce cas, la requête est POST et l'URL est http://localhost:3003/registerUser. Le HTTP/1.1 à la fin de la première ligne concerne la norme établie par la RFC 2616, mais je ne sais pas si c'est nécessaire, je le laisse donc juste pour être sûr.

Ensuite, comme il s'agit d'un POST, incluez un corps JSON dans la requête. Notez qu'il y a une ligne vide entre Content-Type et body - ceci est intentionnellement requis par le client REST. Nous remplissons donc les champs obligatoires, puis une petite option POST devrait apparaître au-dessus du send Request. Passez votre souris dessus et cliquez pour voir ce qui se passe.

La dernière chose que vous souhaitez noter est le test.http après la requête dans le fichier ###, c'est le séparateur entre les requêtes, insérez simplement ### entre chaque requête. peut inclure n’importe quel nombre de demandes dans le fichier.

Si la demande aboutit, vous verrez quelque chose de similaire à ce que j'ai posté ci-dessus. Même si la demande échoue, vous obtenez toujours toutes ces informations sur ce qui vient de se passer et (espérons-le) sur ce qui n'a pas fonctionné. Cool

GET Exemple

Maintenant qu'un utilisateur a été créé, disons que nous avons oublié son mot de passe et qu'il a envoyé un e-mail pour le récupérer. L'e-mail contient un jeton et un lien qui les mènera vers une page pour réinitialiser leur mot de passe.

Une fois qu'ils ont cliqué sur le lien et atterri sur la page, une GET requête est lancée pour garantir que le jeton inclus dans l'e-mail pour réinitialiser leur mot de passe est valide, ce à quoi il pourrait ressembler.

Mon GET pointe vers le point de terminaison /reset et ajoute les paramètres de requête resetPasswordToken requis pour la validation côté serveur. Content-Type est toujours application/json, et le ### en bas sépare cette demande de toute autre demande du fichier.

Si le token est effectivement valide, la réponse du serveur ressemble à ceci :

Et c'est tout ce que demande la requête GET, ils n'ont pas s'inquiéter du problème du corps de la demande.

Exemple de mise à jour

Ensuite, U : mise à jour dans CRUD. Supposons qu'un utilisateur souhaite mettre à jour quelque chose dans les informations de son profil. Utiliser le client REST n’est pas difficile non plus.

Pour cette demande, le type de demande est mis à jour en PUT et le corps inclut tous les champs de l'objet qui doivent être mis à jour. Dans mon application, les utilisateurs peuvent mettre à jour leur prénom, leur nom ou leur adresse e-mail.

Voici donc à quoi ressemblera l'onglet Réponse dans VS Code si le client REST atteint avec succès le point de terminaison PUT tout en passant le corps.

Ça y est, passons à l'exemple d'authentification. Parce qu'à ma connaissance, il existe très peu d'applications sans routage protégé qui nécessitent une sorte d'authentification.

Exemples d'authentification

Une fois de plus, je suis impressionné par l'étendue des différents formats d'authentification pris en charge par le client REST. Au moment d'écrire ces lignes, la documentation du client REST indique qu'il prend en charge six types d'authentification courants, y compris la prise en charge de l'authentification JWT, qui est le type d'authentification sur lequel s'appuie mon application sur toutes les routes protégées.

Donc, sans plus tarder, voici l'un des points de terminaison que je dois valider : rechercher les informations de l'utilisateur dans la base de données.

Ajouter une autorisation dans une requête client REST est très simple : ajoutez simplement la clé Authorization ci-dessous à l'endroit où la route et le type de contenu sont déclarés, puis (au moins pour Dans mon cas), j'ai ajouté les clés et valeurs du JWT (telles qu'elles apparaissent dans le stockage local du navigateur) comme valeurs de l'en-tête Authorization.

Cela devient :

Authorization: jwt XXXXXXXXXXXXXXXXXX

Ensuite, envoyez simplement la demande et voyez ce qui se passe.

Si votre authentification est configurée correctement, vous recevrez un type de réponse 200 du serveur, qui, pour ma demande, renverra toutes les informations stockées dans la base de données liées à cet utilisateur, et un message indiquant que l'utilisateur a été trouvé avec succès.

Cette partie peut nécessiter quelques essais et erreurs, mais si vous pouvez comprendre comment une requête réussie est effectuée dans l'appel réseau des outils de développement du navigateur, via un point de terminaison Swagger existant ou via quelque chose comme la documentation, cela vaut la peine il.

DELETE Exemple

Après les autres exemples que j'ai fournis ci-dessus, cet exemple devrait être simple

CeciDELETE Le paramètre de requête requis est username, afin qu'il sache quel utilisateur de la base de données supprimer, et il doit également vérifier si cet utilisateur est qualifié pour faire cette demande. A part ça, il n’y a rien de nouveau à introduire ici.

Ce n'est en réalité que la pointe de l'iceberg de ce que le client REST peut faire. J'ai couvert les requêtes REST et une forme d'authentification, mais il peut également prendre en charge les requêtes GraphQL, plusieurs autres types d'authentification, les variables d'environnement et personnalisées, l'affichage et l'enregistrement des réponses brutes, et plus encore.

Je recommande fortement de consulter la documentation pour comprendre toutes les fonctionnalités du client REST, il est très puissant.

Documentation client REST : https://blog.bitsrc.io/vs-codes-rest-client-plugin-is-all-you-need-to-make-api-calls-e9e95fcfd85a

Fin

Les données sont le moteur d'Internet, et à mesure que vous progressez dans votre carrière, les développeurs Web finissent par devenir très doués pour accéder aux données et les transformer pour répondre à vos besoins. propres besoins.

Auparavant, lorsqu'ils obtenaient des données hébergées ailleurs, les développeurs Web se tournaient souvent vers des outils comme Postman ou Insomnia pour avoir une interface légèrement meilleure que la ligne de commande, mais il existe désormais un plugin VS Code, qui rend le besoin de code les éditeurs appartiennent au passé. Cela s'appelle REST Client, et c'est génial.

Opération CRUD ? aucun problème! Vous supportez GraphQL ? aucun problème! Options d'authentification ? aucun problème! Le client REST fournit toutes ces options et bien plus encore, et est très simple à configurer et à utiliser. Je vais certainement l'utiliser davantage dans de futurs projets.

Revenez dans quelques semaines – j'écrirai davantage sur JavaScript, React, ES6 ou tout autre sujet lié au développement Web.

Merci d'avoir lu. J'espère que vous envisagerez d'utiliser le client REST pour gérer toutes les requêtes API que vous pourriez avoir besoin d'effectuer à l'avenir. Je pense que vous serez agréablement surpris par l'expérience agréable qu'il peut offrir, sans avoir besoin d'une interface graphique API.

Adresse originale : https://blog.bitsrc.io/

Auteur : Paige Niedringhaus

Adresse de traduction : https://segmentfault.com/a /1190000038223490

Pour plus de connaissances liées à la programmation, veuillez visiter : Cours d'apprentissage en programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!