Come effettuare chiamate API REST dall'interno di VS Code

Durante lo sviluppo, è normale che tu faccia richieste alle API. Potrebbe trattarsi di un'API esterna o dell'API del tuo server di back-end.

Puoi utilizzare strumenti di terze parti come Postman per eseguire le tue chiamate API. Ma un'estensione VS Code ti consente di effettuare chiamate API direttamente da VS Code. Qui imparerai come eseguire richieste API in VS Code.

L'estensione client REST di VS Code

Un'estensione in VS Code è un plug-in o un componente aggiuntivo che migliora le funzionalità dell'editor di Visual Studio Code. Il marketplace delle estensioni VS Code offre diversi tipi di estensioni che possono aiutarti con le tue attività di programmazione. C'è un'estensione per aggiungere il supporto linguistico. Ce n'è uno per fornire il completamento automatico per uno specifico linguaggio di programmazione e così via. Le estensioni semplificano la programmazione con VS Code.

L'estensione client REST consente di eseguire richieste API dall'interno di VS Code. L'estensione include l'editor API REST, un'interfaccia visiva che consente di eseguire query sugli endpoint API. Accetta intestazioni personalizzate, parametri di query e alcuni altri parametri.

Per installare il Cliente RIPOSO, apri VS Code e fai clic su Estensioni scheda. Cercare Cliente RIPOSO e fare clic su Installare pulsante per aggiungerlo a VS Code.

Sotto il Dettagli scheda, troverai un utile tutorial su come utilizzare il client per effettuare richieste API. Vediamo i quattro tipi comuni di richieste e come effettuarle utilizzando l'estensione client REST.

Useremo JSONSegnaposto per dimostrare come effettuare chiamate API utilizzando l'estensione client REST. Fornisce sei risorse comuni che puoi leggere, modificare, aggiornare o eliminare effettuando richieste API.

Effettuare una richiesta GET utilizzando l'estensione client REST

Inizia creando un .http file per le tue richieste API. Puoi nominare il file le mie richieste.http.

Aggiungi il seguente codice al tuo le mie richieste.http file per recuperare una risorsa dall'API JSONPlaceholder con 1 come ID:

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

Per inviare la richiesta, fare clic sul Invia richiesta pulsante che appare nella parte superiore del file. Si aprirà una nuova finestra che contiene i dettagli della risposta.

Ecco come si effettua una richiesta GET all'interno di VS Code.

Effettuare una richiesta POST utilizzando l'estensione client REST

Si effettua una richiesta POST quando si desidera inviare dati al server, in genere per creare una nuova risorsa.

Per creare una nuova risorsa nell'API JSONPlaceholder, sostituisci il codice nel tuo le mie richieste.http file con quanto segue:

INVIARE https://jsonplaceholder.typicode.com/posts HTTP/1.1
Tipo di contenuto: "application/json"
{
 "titolo": "pippo",
 "corpo": "barra",
 "IDutente": 1
}

Clicca il Invia richiesta pulsante per inviare la richiesta. Di nuovo, questo aprirà una nuova finestra contenente i dati della risposta. La risposta mostra un HTTP/1.1 201 Creato messaggio e l'ID del post insieme ad altri dati se la chiamata API ha esito positivo.

{
 "id": "101"
}

Effettuare una richiesta PUT utilizzando l'estensione client REST

Fai una richiesta PUT quando vuoi aggiornare i dati sul server.

Per aggiornare una risorsa esistente nell'API JSONPlaceholder, sostituisci il codice nel tuo le mie richieste.http file con quanto segue:

METTERE https://jsonplaceholder.typicode.com/posts/1 HTTP/1.1
Tipo di contenuto: "application/json"
{
 "title": "nuovo foo",
 "corpo": "nuova barra",
 "IDutente": 1
}

Dopo aver inviato la richiesta, la risorsa verrà aggiornata sul server fittizio e riceverai un file HTTP/1.1 200 OK Messaggio.

Effettuare una richiesta PATCH utilizzando l'estensione client REST

Si effettua una richiesta PATCH quando si desidera modificare un particolare campo o proprietà di una determinata risorsa sul server.

Per aggiornare solo il titolo di una risorsa esistente nel server fittizio, sostituisci il codice nel tuo le mie richieste.http file con quanto segue:

https://jsonplaceholder.typicode.com/posts/1 HTTP/1.1 
Tipo di contenuto: "application/json"
{
 "title": "un altro foo"
}

Dopo aver effettuato la richiesta, il titolo della risorsa verrà aggiornato sul server fittizio e otterrai un file HTTP/1.1 200 OK message insieme agli altri dati della risorsa.

Effettuare una richiesta DELETE utilizzando l'estensione client REST

Si effettua una richiesta DELETE quando si desidera eliminare una risorsa sul server.

Per eliminare una risorsa esistente nel server fittizio, sostituisci il codice nel tuo le mie richieste.http file con quanto segue:

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

Ecco, il Tipo di contenuto non è richiesto, e nemmeno l'oggetto dati. Se invii la richiesta ed elimini correttamente la risorsa, dovresti ottenere un file HTTP/1.1 200 OK risposta con un oggetto vuoto.

Effettua chiamate API direttamente dall'interno di VS Code

In precedenza, potresti aver utilizzato strumenti di terze parti come Postino per effettuare richieste API. Mentre questi strumenti fanno bene il lavoro, ci vuole tempo per configurarli. Ad esempio, è necessario disporre di un account con Postman per utilizzare l'API explorer.

Anche se ci sono diversi strumenti di test API online, ma con estensioni come il client REST, il test delle API è molto più rapido e semplice. Puoi testare qualsiasi API direttamente dall'editor VS Code. Ciò è particolarmente utile se stai sviluppando API localmente e desideri testare le tue API locali al volo.

Altre estensioni del codice VS di test API

Rest Client è facile da usare. Ma non è l'unica estensione VS Code per testare le API. Altre opzioni popolari sono Thunder Client, httpYak e httpBook.

Thunder Client fornisce un editor API visivo per semplificare le richieste API. Ovviamente, devi sapere cos'è l'API REST per utilizzare questi strumenti.