Das Ausführen eines API-Aufrufs innerhalb von VS Code ist ein Kinderspiel, installieren Sie einfach eine Erweiterung, und dann müssen Sie sich nicht auf externe Tools verlassen, um die Arbeit zu erledigen.

Während der Entwicklung ist es üblich, dass Sie Anfragen an APIs stellen. Dies kann für eine externe API oder die API Ihres eigenen Back-End-Servers gelten.

Sie können Tools von Drittanbietern wie Postman verwenden, um Ihre API-Aufrufe auszuführen. Aber eine VS Code-Erweiterung ermöglicht es Ihnen, API-Aufrufe direkt aus VS Code heraus zu tätigen. Hier erfahren Sie, wie Sie API-Anforderungen in VS Code ausführen.

Die VS Code REST-Client-Erweiterung

Eine Erweiterung in VS Code ist ein Plug-in oder Add-On, das die Funktionen des Visual Studio Code-Editors erweitert. Der Marktplatz für VS Code-Erweiterungen bietet verschiedene Arten von Erweiterungen, die Sie bei Ihren Programmieraufgaben unterstützen können. Es gibt eine Erweiterung zum Hinzufügen von Sprachunterstützung. Es gibt eine für die Bereitstellung der automatischen Vervollständigung für eine bestimmte Programmiersprache und so weiter.

instagram viewer
Erweiterungen erleichtern die Programmierung mit VS Code.

Mit der REST-Client-Erweiterung können Sie API-Anforderungen innerhalb von VS Code ausführen. Die Erweiterung enthält den REST-API-Editor, eine visuelle Schnittstelle, mit der Sie API-Endpunkte abfragen können. Es akzeptiert benutzerdefinierte Header, Abfrageparameter und einige andere Parameter.

Zur Installation der REST-Client, öffnen Sie VS Code und klicken Sie auf die Erweiterungen Tab. Suchen nach REST-Client und klicken Sie auf die Installieren Schaltfläche, um es zu VS Code hinzuzufügen.

Unter dem Einzelheiten finden Sie ein hilfreiches Tutorial zur Verwendung des Clients für API-Anforderungen. Sehen wir uns die vier gängigen Arten von Anfragen an und wie sie mit der REST-Client-Erweiterung erstellt werden.

Wir werden verwenden JSONPlatzhalter um das Ausführen von API-Aufrufen mit der REST-Client-Erweiterung zu demonstrieren. Es bietet sechs allgemeine Ressourcen, die Sie lesen, bearbeiten, aktualisieren oder löschen können, indem Sie API-Anforderungen stellen.

Erstellen einer GET-Anforderung mit der REST-Client-Erweiterung

Beginnen Sie mit der Erstellung einer .http Datei für Ihre API-Anfragen. Sie können die Datei benennen meineanfragen.http.

Fügen Sie den folgenden Code zu Ihrer hinzu meineanfragen.http Datei zum Abrufen einer Ressource von der JSONPlaceholder-API mit 1 als ID:

ERHALTEN https://jsonplaceholder.typicode.com/posts/1 HTTP/1.1

Um die Anfrage zu senden, klicken Sie auf Anfrage senden Schaltfläche, die oben in der Datei angezeigt wird. Es öffnet sich ein neues Fenster mit den Antwortdetails.

So stellen Sie eine GET-Anfrage in VS Code.

Erstellen einer POST-Anfrage mit der REST-Client-Erweiterung

Sie stellen eine POST-Anforderung, wenn Sie Daten an den Server senden möchten, normalerweise um eine neue Ressource zu erstellen.

Um eine neue Ressource in der JSONPlaceholder-API zu erstellen, ersetzen Sie den Code in Ihrer meineanfragen.http Datei mit folgendem:

POST https://jsonplaceholder.typicode.com/posts HTTP/1.1
Inhaltstyp: "application/json"
{
 "title": "foo",
 "body": "bar",
 "Benutzer-ID": 1
}

Drücke den Anfrage senden Schaltfläche zum Senden der Anfrage. Auch dies öffnet ein neues Fenster mit den Antwortdaten. Die Antwort zeigt eine HTTP/1.1 201 Erstellt Nachricht und die ID des Beitrags zusammen mit anderen Daten, wenn der API-Aufruf erfolgreich ist.

{
 "id": "101"
}

Erstellen einer PUT-Anfrage mit der REST-Client-Erweiterung

Sie stellen eine PUT-Anforderung, wenn Sie Daten auf dem Server aktualisieren möchten.

Um eine vorhandene Ressource in der JSONPlaceholder-API zu aktualisieren, ersetzen Sie den Code in Ihrer meineanfragen.http Datei mit folgendem:

SETZEN https://jsonplaceholder.typicode.com/posts/1 HTTP/1.1
Inhaltstyp: "application/json"
{
 "title": "neues foo",
 "body": "neuer Balken",
 "Benutzer-ID": 1
}

Nach dem Senden der Anfrage wird die Ressource auf dem Mock-Server aktualisiert und Sie erhalten eine HTTP/1.1 200 OK Nachricht.

Erstellen einer PATCH-Anfrage mit der REST-Client-Erweiterung

Sie stellen eine PATCH-Anforderung, wenn Sie ein bestimmtes Feld oder eine bestimmte Eigenschaft einer bestimmten Ressource auf dem Server ändern möchten.

Um nur den Titel einer vorhandenen Ressource auf dem Mock-Server zu aktualisieren, ersetzen Sie den Code in Ihrer meineanfragen.http Datei mit folgendem:

https://jsonplaceholder.typicode.com/posts/1 HTTP/1.1 
Inhaltstyp: "application/json"
{
 "title": "ein weiterer foo"
}

Nachdem Sie die Anfrage gestellt haben, wird der Ressourcentitel auf dem Mock-Server aktualisiert und Sie erhalten eine HTTP/1.1 200 OK Nachricht zusammen mit den anderen Daten der Ressource.

Erstellen einer DELETE-Anfrage mit der REST-Client-Erweiterung

Sie stellen eine DELETE-Anforderung, wenn Sie eine Ressource auf dem Server löschen möchten.

Um eine vorhandene Ressource auf dem Mock-Server zu löschen, ersetzen Sie den Code in Ihrer meineanfragen.http Datei mit folgendem:

LÖSCHEN https://jsonplaceholder.typicode.com/posts/1 HTTP/1.1

Hier das Inhaltstyp ist nicht erforderlich und das Datenobjekt auch nicht. Wenn Sie die Anfrage senden und die Ressource erfolgreich löschen, sollten Sie eine erhalten HTTP/1.1 200 OK Antwort mit einem leeren Objekt.

Führen Sie API-Aufrufe direkt aus dem VS-Code heraus durch

Zuvor haben Sie möglicherweise Tools von Drittanbietern wie verwendet Postbote, um API-Anfragen zu stellen. Während diese Tools ihre Arbeit gut machen, braucht es Zeit, sie einzurichten. Beispielsweise benötigen Sie ein Konto bei Postman, um den API-Explorer verwenden zu können.

Allerdings sind da mehrere Online-API-Testtools, aber mit Erweiterungen wie dem REST-Client ist das Testen von APIs viel schneller und einfacher. Sie können jede API direkt in Ihrem VS Code-Editor testen. Dies ist besonders nützlich, wenn Sie APIs lokal entwickeln und Ihre lokalen APIs spontan testen möchten.

Andere API-Tests VS-Code-Erweiterungen

Rest-Client ist einfach zu bedienen. Aber es ist nicht die einzige VS Code-Erweiterung zum Testen von APIs. Andere beliebte Optionen sind Thunder Client, httpYak und httpBook.

Thunder Client bietet einen visuellen API-Editor zur Vereinfachung von API-Anforderungen. Natürlich müssen Sie wissen, was die REST-API ist, um diese Tools verwenden zu können.