Det er nemt at foretage et API-opkald inden for VS Code, bare installer en udvidelse, og så behøver du ikke at stole på nogen eksterne værktøjer for at få arbejdet gjort.

Under udvikling er det almindeligt, at du laver anmodninger til API'er. Dette kan være til en ekstern API eller din egen backend-servers API.

Du kan bruge tredjepartsværktøjer som Postman til at udføre dine API-kald. Men en VS Code-udvidelse giver dig mulighed for at foretage API-opkald direkte fra VS Code. Her lærer du, hvordan du udfører API-anmodninger i VS-kode.

VS Code REST Client Extension

En udvidelse i VS Code er et plugin eller et tilføjelsesprogram, der forbedrer funktionerne i Visual Studio Code-editoren. Markedspladsen VS Code extensions tilbyder flere typer udvidelser, der kan hjælpe dig med dine programmeringsopgaver. Der er en udvidelse til at tilføje sprogunderstøttelse. Der er en til at give autofuldførelse for et specifikt programmeringssprog og så videre. Udvidelser gør det nemmere at programmere med VS Code.

instagram viewer

REST Client-udvidelsen giver dig mulighed for at udføre API-anmodninger inde fra VS Code. Udvidelsen inkluderer REST API-editoren, en visuel grænseflade, der lader dig forespørge API-slutpunkter. Den accepterer tilpassede overskrifter, forespørgselsparametre og nogle andre parametre.

For at installere REST klient, åbn VS-kode og klik på Udvidelser fanen. Søge efter REST klient og klik på Installere knappen for at tilføje den til VS Code.

Under detaljer fanen, finder du en nyttig vejledning om, hvordan du bruger klienten til at lave API-anmodninger. Lad os se de fire almindelige typer anmodninger, og hvordan man laver dem ved hjælp af REST Client-udvidelsen.

Vi vil bruge JSONPlaceholder at demonstrere at foretage API-kald ved hjælp af REST Client-udvidelsen. Det giver seks almindelige ressourcer, som du kan læse, redigere, opdatere eller slette ved at lave API-anmodninger.

Fremstilling af en GET-anmodning ved hjælp af REST-klientudvidelsen

Start med at oprette en .http fil til dine API-anmodninger. Du kan navngive filen myrequests.http.

Tilføj følgende kode til din myrequests.http fil for at hente en ressource fra JSONPlaceholder API med 1 som ID:

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

For at sende anmodningen skal du klikke på Send anmodning knap, der vises øverst i filen. Et nyt vindue åbnes, der indeholder svardetaljerne.

Sådan laver du en GET-anmodning inde i VS-koden.

Fremstilling af en POST-anmodning ved hjælp af REST-klientudvidelsen

Du laver en POST-anmodning, når du vil sende data til serveren, typisk for at oprette en ny ressource.

For at oprette en ny ressource i JSONPlaceholder API skal du erstatte koden i din myrequests.http fil med følgende:

STOLPE https://jsonplaceholder.typicode.com/posts HTTP/1.1
Indholdstype: "application/json"

{
"title": "foo",
"body": "bar",
"bruger-id": 1
}

Klik på Send anmodning knappen for at sende anmodningen. Igen vil dette åbne et nyt vindue med svardataene. Svaret viser en HTTP/1.1 201 Oprettet besked og id'et for indlægget sammen med andre data, hvis API-kaldet er vellykket.

{
"id": "101"
}

Foretag en PUT-anmodning ved hjælp af REST-klientudvidelsen

Du laver en PUT-anmodning, når du vil opdatere data på serveren.

For at opdatere en eksisterende ressource i JSONPlaceholder API skal du erstatte koden i din myrequests.http fil med følgende:

SÆTTE https://jsonplaceholder.typicode.com/posts/1 HTTP/1.1
Indholdstype: "application/json"

{
"title": "ny foo",
"body": "ny bar",
"bruger-id": 1
}

Efter afsendelse af anmodningen vil ressourcen blive opdateret på den mock server, og du får en HTTP/1.1 200 OK besked.

Lav en PATCH-anmodning ved hjælp af REST-klientudvidelsen

Du laver en PATCH-anmodning, når du ønsker at ændre et bestemt felt eller egenskab for en given ressource på serveren.

For kun at opdatere titlen på en eksisterende ressource i den falske server, skal du erstatte koden i din myrequests.http fil med følgende:

https://jsonplaceholder.typicode.com/posts/1 HTTP/1.1 
Indholdstype: "application/json"

{
"title": "en anden fod"
}

Når du har foretaget anmodningen, vil ressourcetitlen blive opdateret på den falske server, og du får en HTTP/1.1 200 OK besked sammen med ressourcens andre data.

Foretag en DELETE-anmodning ved hjælp af REST-klientudvidelsen

Du laver en DELETE-anmodning, når du ønsker at slette en ressource på serveren.

For at slette en eksisterende ressource i mock-serveren skal du erstatte koden i din myrequests.http fil med følgende:

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

Her, den Indholdstype er ikke påkrævet, og det er dataobjektet heller ikke. Hvis du sender anmodningen og sletter ressourcen, bør du få en HTTP/1.1 200 OK svar med et tomt objekt.

Foretag API-kald direkte fra VS-kode

Tidligere har du muligvis brugt tredjepartsværktøjer som f.eks Postbud til at lave API-anmodninger. Selvom disse værktøjer gør arbejdet godt, tager det tid at sætte dem op. For eksempel skal du have en konto hos Postman for at bruge API-udforskeren.

Selvom der er flere online API-testværktøjer, men med udvidelser som REST-klienten er test af API'er meget hurtigere og nemmere. Du kan teste enhver API direkte fra din VS Code editor. Dette er især nyttigt, hvis du udvikler API'er lokalt og vil teste dine lokale API'er med det samme.

Andre API-test vs kodeudvidelser

Rest Client er nem at bruge. Men det er ikke den eneste VS-kodeudvidelse til test af API'er. Andre populære muligheder er Thunder Client, httpYak og httpBook.

Thunder Client giver en visuel API-editor til at forenkle API-anmodninger. Selvfølgelig skal du vide, hvad REST API er for at bruge disse værktøjer.