REST API-oproepen maken vanuit Inside VS Code

Tijdens de ontwikkeling is het gebruikelijk dat u verzoeken doet aan API's. Dit kan een externe API zijn of de API van uw eigen backendserver.

U kunt tools van derden, zoals Postman, gebruiken om uw API-aanroepen uit te voeren. Maar met een VS Code-extensie kunt u API-aanroepen rechtstreeks vanuit VS Code doen. Hier leert u hoe u API-verzoeken uitvoert in VS Code.

De VS Code REST-clientextensie

Een extensie in VS Code is een plug-in of add-on die de functionaliteiten van de Visual Studio Code-editor verbetert. De marktplaats voor VS Code-extensies biedt verschillende soorten extensies die u kunnen helpen bij uw programmeertaken. Er is een extensie voor het toevoegen van taalondersteuning. Er is er een voor automatisch aanvullen voor een specifieke programmeertaal, enzovoort. Extensies maken het gemakkelijker om met VS Code te programmeren.

Met de REST Client-extensie kunt u API-verzoeken uitvoeren vanuit VS Code. De extensie bevat de REST API-editor, een visuele interface waarmee u API-eindpunten kunt opvragen. Het accepteert aangepaste headers, queryparameters en enkele andere parameters.

Om de te installeren REST-client, open VS Code en klik op de Extensies tabblad. Zoeken REST-client en klik op de Installeren knop om het toe te voegen aan VS Code.

Onder de Details tabblad, vindt u een handige tutorial over hoe u de client kunt gebruiken om API-verzoeken te doen. Laten we eens kijken naar de vier veelvoorkomende typen verzoeken en hoe u deze kunt maken met behulp van de REST Client-extensie.

We zullen gebruiken JSON Tijdelijke aanduiding om het maken van API-aanroepen met de REST Client-extensie te demonstreren. Het biedt zes algemene bronnen die u kunt lezen, bewerken, bijwerken of verwijderen door API-verzoeken in te dienen.

Een GET-verzoek maken met behulp van de REST-clientextensie

Begin met het maken van een .http bestand voor uw API-verzoeken. U kunt het bestand een naam geven mijnverzoeken.http.

Voeg de volgende code toe aan uw mijnverzoeken.http bestand om een ​​bron op te halen uit de JSONPlaceholder API met 1 als ID:

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

Om het verzoek te verzenden, klikt u op de Verzend verzoek knop die bovenaan het bestand verschijnt. Er wordt een nieuw venster geopend met de details van de reactie.

Dit is hoe u een GET-verzoek maakt binnen VS Code.

Een POST-aanvraag maken met behulp van de REST-clientextensie

U doet een POST-verzoek wanneer u gegevens naar de server wilt posten, meestal om een ​​nieuwe bron te maken.

Vervang de code in uw mijnverzoeken.http bestand met het volgende:

NA https://jsonplaceholder.typicode.com/posts HTTP/1.1
Inhoudstype: "application/json"
{
 "title": "foo",
 "lichaam": "balk",
 "gebruikers-ID": 1
}

Klik op de Verzend verzoek knop om het verzoek te verzenden. Ook dit opent een nieuw venster met de responsgegevens. Het antwoord toont een HTTP/1.1 201 Gemaakt bericht en de ID van het bericht samen met andere gegevens als de API-aanroep succesvol is.

{
 "ID": "101"
}

Een PUT-verzoek maken met behulp van de REST-clientextensie

U doet een PUT-verzoek wanneer u gegevens op de server wilt bijwerken.

Om een ​​bestaande bron in de JSONPlaceholder API bij te werken, vervangt u de code in uw mijnverzoeken.http bestand met het volgende:

NEERZETTEN https://jsonplaceholder.typicode.com/posts/1 HTTP/1.1
Inhoudstype: "application/json"
{
 "title": "nieuwe foo",
 "body": "nieuwe balk",
 "gebruikers-ID": 1
}

Na het verzenden van het verzoek wordt de bron bijgewerkt op de nepserver en krijg je een HTTP/1.1 200 OK bericht.

Een PATCH-aanvraag maken met behulp van de REST-clientextensie

U doet een PATCH-verzoek wanneer u een bepaald veld of eigenschap van een bepaalde bron op de server wilt wijzigen.

Om alleen de titel van een bestaande bron in de nepserver bij te werken, vervangt u de code in uw mijnverzoeken.http bestand met het volgende:

https://jsonplaceholder.typicode.com/posts/1 HTTP/1.1 
Inhoudstype: "application/json"
{
 "title": "nog een foo"
}

Nadat u het verzoek hebt ingediend, wordt de brontitel bijgewerkt op de nepserver en krijgt u een HTTP/1.1 200 OK bericht samen met de andere gegevens van de bron.

Een DELETE-aanvraag doen met behulp van de REST-clientextensie

U doet een DELETE-verzoek wanneer u een bron op de server wilt verwijderen.

Om een ​​bestaande bron in de nepserver te verwijderen, vervangt u de code in uw mijnverzoeken.http bestand met het volgende:

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

Hier de Inhoudstype is niet vereist, en het gegevensobject ook niet. Als u het verzoek verzendt en de bron met succes verwijdert, zou u een HTTP/1.1 200 OK reactie met een leeg object.

Maak API-oproepen rechtstreeks vanuit Inside VS Code

Eerder hebt u mogelijk tools van derden gebruikt, zoals Postbode om API-aanvragen te doen. Hoewel deze tools hun werk goed doen, kost het tijd om ze in te stellen. U moet bijvoorbeeld een account hebben bij Postman om de API-verkenner te gebruiken.

Desondanks zijn er verschillende online API-testtools, maar met extensies zoals de REST Client is het testen van API's veel sneller en eenvoudiger. U kunt elke API rechtstreeks vanuit uw VS Code-editor testen. Dit is vooral handig als u lokaal API's ontwikkelt en uw lokale API's direct wilt testen.

Andere API Testing VS Code-extensies

Rest Client is eenvoudig te gebruiken. Maar het is niet de enige VS Code-extensie voor het testen van API's. Andere populaire opties zijn Thunder Client, httpYak en httpBook.

Thunder Client biedt een visuele API-editor om API-verzoeken te vereenvoudigen. Natuurlijk moet u weten wat REST API is om deze tools te gebruiken.