Å foreta et API-anrop innenfor VS Code er en lek, bare installer én utvidelse, og så trenger du ikke stole på noen eksterne verktøy for å få jobben gjort.

Under utvikling er det vanlig at du sender forespørsler til APIer. Dette kan være til en ekstern API eller din egen backend-servers API.

Du kan bruke tredjepartsverktøy som Postman for å utføre API-kallene dine. Men en VS Code-utvidelse lar deg foreta API-anrop rett fra VS Code. Her lærer du hvordan du utfører API-forespørsler i VS-kode.

VS Code REST-klientutvidelsen

En utvidelse i VS Code er en plugin eller et tillegg som forbedrer funksjonaliteten til Visual Studio Code-editoren. Markedsplassen VS Code extensions tilbyr flere typer utvidelser som kan hjelpe deg med programmeringsoppgavene dine. Det er en utvidelse for å legge til språkstøtte. Det er en for å gi autofullføring for et spesifikt programmeringsspråk og så videre. Utvidelser gjør det enklere å programmere med VS Code.

REST Client-utvidelsen lar deg utføre API-forespørsler fra VS Code. Utvidelsen inkluderer REST API-editoren, et visuelt grensesnitt som lar deg spørre API-endepunkter. Den godtar egendefinerte overskrifter, spørringsparametere og noen andre parametere.

For å installere REST-klient, åpne VS-kode og klikk på Utvidelser fanen. Søk etter REST-klient og klikk på Installere knappen for å legge den til VS-kode.

Under Detaljer fanen, finner du en nyttig veiledning om hvordan du bruker klienten til å lage API-forespørsler. La oss se de fire vanlige typene forespørsler og hvordan du gjør dem ved å bruke REST Client-utvidelsen.

Vi skal bruke JSONPlassholder for å demonstrere å gjøre API-anrop ved å bruke REST Client-utvidelsen. Den inneholder seks vanlige ressurser som du kan lese, redigere, oppdatere eller slette ved å sende API-forespørsler.

Lage en GET-forespørsel ved å bruke REST-klientutvidelsen

Start med å lage en .http fil for dine API-forespørsler. Du kan navngi filen myrequests.http.

Legg til følgende kode til din myrequests.http fil for å hente en ressurs fra JSONPlaceholder API med 1 som ID:

FÅ https://jsonplaceholder.typicode.com/posts/1 HTTP/1.1

For å sende forespørselen, klikk på Send forespørsel knappen som vises øverst i filen. Et nytt vindu åpnes som inneholder svardetaljene.

Slik lager du en GET-forespørsel i VS-koden.

Foreta en POST-forespørsel ved å bruke REST-klientutvidelsen

Du gjør en POST-forespørsel når du vil legge ut data til serveren, vanligvis for å opprette en ny ressurs.

For å opprette en ny ressurs i JSONPlaceholder API, bytt ut koden i din myrequests.http fil med følgende:

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

Klikk på Send forespørsel knappen for å sende forespørselen. Igjen vil dette åpne et nytt vindu som inneholder svardataene. Svaret viser en HTTP/1.1 201 Opprettet melding og ID-en til innlegget sammen med andre data hvis API-kallet er vellykket.

{
 "id": "101"
}

Lage en PUT-forespørsel ved å bruke REST-klientutvidelsen

Du gjør en PUT-forespørsel når du vil oppdatere data på serveren.

For å oppdatere en eksisterende ressurs i JSONPlaceholder API, bytt ut koden i din myrequests.http fil med følgende:

SETTE https://jsonplaceholder.typicode.com/posts/1 HTTP/1.1
Content-Type: "application/json"
{
 "title": "new foo",
 "body": "ny bar",
 "bruker-ID": 1
}

Etter å ha sendt forespørselen, vil ressursen bli oppdatert på den falske serveren, og du får en HTTP/1.1 200 OK beskjed.

Lage en PATCH-forespørsel ved å bruke REST-klientutvidelsen

Du foretar en PATCH-forespørsel når du ønsker å endre et bestemt felt eller egenskap for en gitt ressurs på serveren.

For å bare oppdatere tittelen til en eksisterende ressurs i den falske serveren, bytt ut koden i din myrequests.http fil med følgende:

https://jsonplaceholder.typicode.com/posts/1 HTTP/1.1 
Content-Type: "application/json"
{
 "title": "en annen foo"
}

Etter at du har gjort forespørselen, vil ressurstittelen bli oppdatert på den falske serveren, og du får en HTTP/1.1 200 OK melding sammen med andre data fra ressursen.

Foreta en DELETE-forespørsel ved å bruke REST-klientutvidelsen

Du gjør en SLETT-forespørsel når du ønsker å slette en ressurs på serveren.

For å slette en eksisterende ressurs i den falske serveren, bytt ut koden i din myrequests.http fil med følgende:

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

Her, den Innholdstype er ikke nødvendig, og heller ikke dataobjektet. Hvis du sender forespørselen og sletter ressursen, bør du få en HTTP/1.1 200 OK svar med et tomt objekt.

Foreta API-anrop rett fra innsiden VS-kode

Tidligere kan du ha brukt tredjepartsverktøy som Postbud for å gjøre API-forespørsler. Selv om disse verktøyene gjør jobben bra, tar det tid å sette dem opp. For eksempel må du ha en konto hos Postman for å bruke API-utforskeren.

Selv om det finnes flere online API-testverktøy, men med utvidelser som REST Client, er testing av APIer mye raskere og enklere. Du kan teste hvilken som helst API rett fra VS Code-editoren. Dette er spesielt nyttig hvis du utvikler APIer lokalt og ønsker å teste de lokale APIene dine umiddelbart.

Andre API-testing VS-kodeutvidelser

Rest Client er enkel å bruke. Men det er ikke den eneste VS-kodeutvidelsen for testing av APIer. Andre populære alternativer er Thunder Client, httpYak og httpBook.

Thunder Client tilbyr en visuell API-editor for å forenkle API-forespørsler. Selvfølgelig må du vite hva REST API er for å bruke disse verktøyene.