Ausführliche Erklärung zur Verwendung des VSCode REST-Plug-Ins zum Durchführen von API-Aufrufen

Verwandte Empfehlungen: „Grundlegendes Tutorial zur Verwendung von vscode“

Warum sollten Sie die IDE verlassen, um neue APIs zu testen? Jetzt müssen Sie das nicht mehr tun.

Wie wir Daten erhalten

Wenn Sie schon lange Webentwicklung betreiben, wissen Sie wahrscheinlich, dass sich ein Großteil unserer Arbeit um Daten dreht: Daten lesen, Daten schreiben, Daten bearbeiten und im Browser anzeigen in angemessener Weise.

Und der überwiegende Teil dieser Daten wird von REST-API-Endpunkten bereitgestellt. Laienhaft ausgedrückt: Die von uns gewünschten Daten sind in anderen Diensten oder Datenbanken vorhanden, und unsere Anwendung fragt diesen Dienst ab, um die Daten abzurufen, und ruft sie entsprechend ihren Nutzungsdaten ab .

Um eine REST-API zu testen, bevor man die Benutzeroberfläche zum Empfangen von Daten verbindet, musste man in der Vergangenheit normalerweise die API über die Befehlszeile des Terminals abfragen oder eine GUI wie Insomnia oder Postman verwenden (ich habe sie in einem Vergleich verglichen). vorheriger Blog).

Aber jetzt, wenn Sie VS-Code verwenden (warum nicht, es ist so schön, damit Code zu schreiben!), wird das Leben einfacher. Wir müssen die IDE nicht mehr verlassen, um die API zu testen, da es jetzt ein Plugin gibt, das dies kann: REST Client.

Die Verwendung des REST-Clients ist sehr einfach und ich zeige Ihnen, wie einfach dieses Plugin und dennoch voll funktionsfähig ist.

Lernen Sie das VS Code REST Client-Plugin kennen

Ich bin seit mehreren Jahren ein Fan von VS Code, einem Code-Editor, und jedes Mal erfahre ich, dass jemand ein neues nützliches Plugin erstellt und es dem VS Code-Markt hinzugefügt hat , I Sie werden alle sehr dankbar sein.

Als ich also entschied, dass es mühsam sein würde, Postman oder Insomnia jedes Mal zu starten, wenn ich eine neue API-Route testen muss, entdeckte ich das REST-Client-Plugin, das dies überflüssig macht.

REST-Client ist der offensichtlichste Name für ein Tool, das es bisher gibt, und die Beschreibung des VS Code Marketplace fasst seine Fähigkeiten genau zusammen: „Mit dem REST-Client können Sie HTTP-Anfragen senden und die Antworten direkt in Visual Studio Code anzeigen.“ So einfach ist das. Dann gibt es viele Details und Beispiele für die Verwendung, aber eigentlich handelt es sich um ein in VS Code integriertes HTTP-Tool. Also fangen wir an, es zu nutzen.

REST-Client installieren

Um ihn zu finden, öffnen Sie die Market-Erweiterung in VS Code (das kleine Tetris-Symbol im linken Bereich), geben Sie „Rest-Client“ in die Suchleiste ein und installieren Sie den ersten in der Ergebnisliste (Der Autor sollte Huachao Mao sein).

Nachdem die Installation abgeschlossen ist, können wir mit der Einrichtung fortfahren.

Richten Sie ein REST-Client-Skript ein

Erstellen Sie einfach eine Datei mit der Endung .http im Stammverzeichnis Ihres Projekts. Der REST-Client erkennt dies und weiß, dass er in der Lage sein sollte, Dateien daraus auszuführen HTTP-Anfrage für die Datei.

Während des Tests nahm ich eine dockerisierte Full-Stack-MERN-Anmeldeanwendung, die ich vor ein paar Jahren erstellt hatte, und legte eine Datei mit dem Namen test.http im Stammverzeichnis des Projektordners ab. .http 结尾的文件，REST Client可以识别出这一点，并且知道它应该能够运行来自该文件的HTTP请求。

在测试的时候，我把几年前做的一个docker化的全栈MERN登录应用，把一个我命名为 test.http 的文件丢到项目文件夹的根目录。

测试一下：基本操作

这是很酷的部分：在我的经验中，这个小小的REST Client插件能够做的事情和Postman等更复杂的API客户端一样多。

下面，我将向你展示如何进行每一种类型的基本CRUD操作，再加上如何像JWT令牌一样进行需要认证的API调用，使用我在本地运行的MERN用户注册应用来指向调用。

POST示例

我将介绍的第一个示例是REST Client的 POST，因为用户在我的应用程序中必须先注册才能进行其他任何操作（毕竟，这只是一个登录服务）。

因此，该代码将在 test.http 文件中显示。

好的，让我们回顾一下上面的代码片段中发生的事情。

REST Client为了正常工作所需要的第一件事是发出请求的类型及其尝试访问的路由的完整URL路径。在这种情况下，请求是POST，URL是 http://localhost:3003/registerUser。第一行末尾的 HTTP/1.1 与RFC 2616建立的标准有关，但是我不确定是否有必要，因此我将其保留只是为了安全。

然后，因为这是一个 POST，所以在请求中要包含一个JSON体，注意 Content-Type 和 body 之间有一行空行——这是REST Client有意要求的。所以，我们把所需的字段填好，然后，在 POST 上面应该会出现一个小小的 send Request

🎜🎜🎜 Testen Sie es: Grundlegende Operationen 🎜🎜🎜Hier ist der coole Teil: Meiner Erfahrung nach kann dieses kleine REST-Client-Plugin genauso viel wie komplexere API-Clients wie Postman. 🎜🎜 Im Folgenden zeige ich Ihnen, wie Sie jede Art von grundlegendem CRUD-Vorgang durchführen und wie Sie API-Aufrufe durchführen, die eine Authentifizierung als JWT-Token erfordern, indem ich meine lokal ausgeführte MERN-Benutzerregistrierungs-App verwende, um die Aufrufe weiterzuleiten. 🎜🎜🎜POST-Beispiel🎜🎜🎜Das erste Beispiel, das ich behandeln werde, ist der POST des REST-Clients, da sich der Benutzer registrieren muss, bevor er etwas anderes in meiner Anwendung tun kann (schließlich handelt es sich nur um eine Anmeldung). Service). 🎜🎜Daher wird der Code in der Datei test.http angezeigt. 🎜🎜🎜🎜Okay Okay, sehen wir uns an, was im obigen Codeausschnitt passiert. 🎜🎜Das erste, was der REST-Client benötigt, um ordnungsgemäß zu funktionieren, ist die Art der gestellten Anfrage und der vollständige URL-Pfad der Route, auf die er zuzugreifen versucht. In diesem Fall ist die Anfrage POST und die URL ist http://localhost:3003/registerUser. Das HTTP/1.1 am Ende der ersten Zeile bezieht sich auf den durch RFC 2616 festgelegten Standard, aber ich bin mir nicht sicher, ob es notwendig ist, also lasse ich es aus Sicherheitsgründen drin. 🎜🎜Da es sich dann um einen POST handelt, muss ein JSON-Body in die Anfrage eingefügt werden. Beachten Sie, dass zwischen Content-Type und body Eine Leerzeile – dies wird vom REST-Client absichtlich benötigt. Also füllen wir die erforderlichen Felder aus und dann sollte über dem <code>POST eine kleine Option Anfrage senden erscheinen. Fahren Sie mit der Maus darüber und klicken Sie, um zu sehen, was passiert. 🎜

Das Letzte, worauf Sie achten müssen, ist das ### nach der Anfrage in der Datei test.http. Dies ist das Trennzeichen zwischen Anfragen long as every request Sie können beliebig viele Anfragen in die Datei aufnehmen, indem Sie ### dazwischen einfügen. test.http 文件中请求后的 ### ，这是请求之间的分隔符，只要在每个请求之间插入 ### 就可以在文件中包含任意数量的请求。

如果请求成功，您将看到与我上面发布的内容类似的内容。即使请求不成功，你仍然会得到所有这些关于刚才发生的信息，以及（希望）出了什么问题。爽啊

GET示例

现在已经创建了一个用户，比方说我们忘记了他们的密码，他们发了一封邮件来找回密码。电子邮件中包含令牌和链接，该链接会将他们带到页面以重置密码。

一旦他们点击了链接并登陆页面，一个 GET 请求就会被启动，以确保邮件中包含的用于重置密码的令牌是有效的，这就是它可能的样子。

我的 GET 指向了 /reset 端点，并在服务端附加了验证所需的 resetPasswordToken 查询参数。Content-Type 仍为 application/json，底部的 ### 将此请求与文件中的任何其他请求分开。

如果令牌确实有效，则服务器的响应如下所示：

而这就是GET请求所需要的全部内容，他们不用担心请求体的问题。

Update示例

接下来是CRUD中的U：更新。假设用户想更新其个人资料信息中的某些内容。使用REST Client也不难。

对于这个请求，请求类型更新为 PUT，body包括该对象上需要更新的任何字段。在我的应用程序中，用户可以更新其名字，姓氏或电子邮件。

因此，在传递正文时，如果REST Client成功击中PUT端点，则这就是VS Code中的Response选项卡的样子。

到此为止，让我们继续进行身份验证示例。因为据我所知，没有保护路由的应用程序很少，需要某种认证。

Authentication示例

REST Client支持的不同身份验证格式的广度再一次让我印象深刻。在撰写本文时，REST Client的文档说它支持六种流行的身份验证类型，包括对JWT身份验证的支持，这是我的应用程序在所有受保护的路由上都依赖的身份验证类型。

因此，事不宜迟，这里是我需要验证的端点之一：在数据库中查找用户的信息。

在REST Client请求中添加授权真的很简单：简单地在路由和 content-type 被声明的地方下面添加键 Authorization，然后（至少对我的情况而言）我添加JWT的键和值（因为它们出现在浏览器的本地存储中）作为 Authorization 头的值。

这样就变成了：

Authorization: jwt XXXXXXXXXXXXXXXXXX

然后只需发送请求，看看会发生什么。

如果您的身份验证配置正确，您将收到来自服务器的某种类型的200响应，对于我的请求，它将返回存储在数据库中的与该用户相关的所有信息，以及一个成功找到该用户的消息。

这部分可能需要一些尝试和错误，但如果您能够弄清楚一个成功的请求是如何在浏览器的Dev Tools网络调用中发出的，通过现有的Swagger端点，或者通过其他类似的文档，这是非常值得的。

DELETE示例

经过我上面提供的其他例子，这个示例应该很简单

这个 DELETE 需要的查询参数是 username

Wenn die Anfrage erfolgreich ist, sehen Sie etwas Ähnliches wie das, was ich oben gepostet habe. Selbst wenn die Anfrage nicht erfolgreich ist, erhalten Sie dennoch alle Informationen darüber, was gerade passiert ist und (hoffentlich) was schief gelaufen ist. Cool

GET-Beispiel

Jetzt wurde ein Benutzer erstellt. Nehmen wir an, wir haben sein Passwort vergessen und er hat eine E-Mail gesendet, um es abzurufen. Die E-Mail enthält ein Token und einen Link, der sie zu einer Seite zum Zurücksetzen ihres Passworts führt. 🎜Sobald sie auf den Link klicken und auf der Seite landen, wird eine GET-Anfrage initiiert, um sicherzustellen, dass das in der E-Mail enthaltene Token zum Zurücksetzen des Passworts gültig ist. So könnte es aussehen. 🎜🎜🎜🎜me Das GET verweist auf den Endpunkt /reset und hängt die Abfrageparameter resetPasswordToken an, die für die Überprüfung auf der Serverseite erforderlich sind. Der Content-Type ist immer noch application/json und der ### unten trennt diese Anfrage von allen anderen Anfragen in der Datei. 🎜🎜Wenn das Token tatsächlich gültig ist, sieht die Antwort des Servers wie folgt aus: 🎜🎜🎜🎜Und das ist der gesamte Inhalt, der für die GET-Anfrage benötigt wird, sie müssen sich nicht um den Anfragetext kümmern. 🎜

Update-Beispiel

🎜 Als nächstes kommt U: Update in CRUD. Nehmen wir an, ein Benutzer möchte etwas in seinen Profilinformationen aktualisieren. Auch die Verwendung des REST-Clients ist nicht schwierig. 🎜🎜🎜🎜Für Für diese Anfrage wird der Anfragetyp auf PUT aktualisiert und der Text enthält alle Felder, die für das Objekt aktualisiert werden müssen. In meiner Anwendung können Benutzer ihren Vornamen, Nachnamen oder ihre E-Mail-Adresse aktualisieren. 🎜🎜Beim Übergeben des Körpers sieht die Registerkarte „Antwort“ in VS Code so aus, wenn der REST-Client den PUT-Endpunkt erfolgreich erreicht. 🎜🎜🎜🎜An Nachdem wir das geklärt haben, fahren wir mit dem Authentifizierungsbeispiel fort. Denn meines Wissens gibt es nur sehr wenige Anwendungen ohne geschütztes Routing, die eine Art Authentifizierung erfordern. 🎜

Authentifizierungsbeispiele

🎜Ich bin wieder einmal beeindruckt von der Breite der verschiedenen Authentifizierungsformate, die vom REST-Client unterstützt werden. Zum jetzigen Zeitpunkt heißt es in der Dokumentation des REST-Clients, dass er sechs gängige Authentifizierungstypen unterstützt, einschließlich der Unterstützung der JWT-Authentifizierung, dem Authentifizierungstyp, auf den meine Anwendung auf allen geschützten Routen angewiesen ist. 🎜🎜Also ohne weitere Umschweife, hier ist einer der Endpunkte, die ich validieren muss: das Nachschlagen der Benutzerinformationen in der Datenbank. 🎜🎜🎜🎜at Das Hinzufügen einer Autorisierung zu einer REST-Client-Anfrage ist wirklich einfach: Fügen Sie einfach den Schlüssel Authorization unten hinzu, wo die Route und der Inhaltstyp deklariert sind, und dann (zumindest in meinem Fall) füge ich den JWT-Schlüssel und die Werte hinzu ​​(wie sie im lokalen Speicher des Browsers erscheinen) als Wert des Authorization-Headers. 🎜🎜Das wird: 🎜rrreee🎜Dann einfach die Anfrage abschicken und schauen, was passiert. 🎜🎜Wenn Ihre Authentifizierung richtig konfiguriert ist, erhalten Sie eine Art 200-Antwort vom Server, der auf meine Anfrage alle in der Datenbank gespeicherten Informationen zu diesem Benutzer zurückgibt und die Nachrichten dieses Benutzers erfolgreich findet. 🎜🎜Dieser Teil kann einige Versuche und Irrtümer erfordern, aber wenn Sie herausfinden können, wie eine erfolgreiche Anfrage im Dev Tools-Netzwerkaufruf des Browsers, über einen vorhandenen Swagger-Endpunkt oder durch eine andere ähnliche Dokumentation gestellt wird, ist dies sehr lohnenswert. 🎜

DELETE-Beispiel

🎜Nach den anderen Beispielen, die ich oben bereitgestellt habe, sollte dieses Beispiel einfach sein🎜🎜🎜🎜Der für diesen DELETE erforderliche Abfrageparameter ist username, damit es genau weiß, welcher Benutzer in der Datenbank gelöscht werden soll, und es muss auch überprüfen, ob dieser Benutzer für diese Anfrage qualifiziert ist. Ansonsten gibt es hier nichts Neues vorzustellen. 🎜🎜🎜🎜<p>Das ist wirklich nur die Spitze des Eisbergs dessen, was der REST-Client leisten kann. Ich habe REST-Anfragen und eine Form der Authentifizierung behandelt, aber es kann auch GraphQL-Anfragen, mehrere andere Arten der Authentifizierung, Umgebungs- und benutzerdefinierte Variablen, das Anzeigen und Speichern von Rohantworten und mehr unterstützen. </p> <p>Ich empfehle Ihnen dringend, sich die Dokumentation anzusehen, um alle Funktionen des REST-Clients zu verstehen, er ist sehr leistungsstark. </p> <blockquote><p>REST-Client-Dokumentation: https://blog.bitsrc.io/vs-codes-rest-client-plugin-is-all-you-need-to-make-api-calls-e9e95fcfd85a</p></blockquote> <h2> <strong>Ende</strong> </h2> <p>Daten treiben das Internet voran, und je weiter Sie in Ihrer Karriere voranschreiten, desto besser werden Webentwickler schließlich sehr gut darin, auf Daten zuzugreifen und sie entsprechend ihren Anforderungen umzuwandeln. </p> <p>Früher griffen Webentwickler beim Hosten von Daten an anderer Stelle oft auf Tools wie Postman oder Insomnia zurück, um eine etwas bessere Benutzeroberfläche als die Befehlszeile zu haben. Jetzt gibt es jedoch ein VS-Code-Plugin, mit dem Code außerhalb des Editors codiert werden kann gehört der Vergangenheit an, heißt REST Client und ist großartig. </p> <p>CRUD-Operation? Kein Problem! GraphQL unterstützen? Kein Problem! Authentifizierungsoptionen? Kein Problem! Der REST-Client bietet all diese Optionen und mehr und ist sehr einfach einzurichten und zu verwenden. Ich werde es auf jeden Fall in zukünftigen Projekten häufiger verwenden. </p> <p>Schauen Sie in ein paar Wochen noch einmal vorbei – ich werde mehr über JavaScript, React, ES6 oder alles andere im Zusammenhang mit der Webentwicklung schreiben. </p> <p>Vielen Dank fürs Lesen. Ich hoffe, Sie erwägen die Verwendung des REST-Clients zur Bearbeitung aller API-Abfragen, die Sie in Zukunft möglicherweise durchführen müssen. Ich denke, Sie werden angenehm überrascht sein von der angenehmen Erfahrung, die er bieten kann, ohne dass eine API-GUI erforderlich ist. </p> <blockquote> <p>Originaladresse: https://blog.bitsrc.io/</p> <p>Autorin: Paige Niedringhaus</p> <p>Übersetzungsadresse: https://segmentfault.com/a/1190000038223490</p> </blockquote> <p>Weitere programmierbezogene Kenntnisse finden Sie unter : <a href="https://www.php.cn/course.html" target="_blank" textvalue="编程学习课程">Programmier-Lernkurs</a>! ! </p>

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung zur Verwendung des VSCode REST-Plug-Ins zum Durchführen von API-Aufrufen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!