Rest Client Extension per Visual Studio Code

Il flusso di lavoro dello sviluppo web sta cambiando rapidamente al giorno d’oggi. Gli utenti preferiscono creare siti Web utilizzando framework/librerie JavaScript come React, Vue, Angular. Sebbene la creazione di un sito Web su queste tecnologie sia di tendenza, richiede anche di chiamare le API Rest per rendere dinamiche le tue applicazioni.

La tua applicazione frontend invia la richiesta HTTP al server backend e riceve o elabora i dati. Al tuo server di backend potresti dover inviare diverse richieste HTTP come GET, POST, PUT, DELETE. E in base a queste richieste e risposte HTTP, la tua applicazione funziona per l’utente finale.

Poiché è necessario creare endpoint API, è ovvio che è necessario testare le richieste HTTP. Sono disponibili diversi strumenti che ci consentono di testare la richiesta e la risposta HTTP. La buona notizia è che se utilizzi Visual Studio Code, non è necessario utilizzare o installare altri strumenti o software. Puoi testare le tue chiamate API all’interno del tuo editor di codice stesso. In questo articolo, ti mostriamo come usare l’estensione Rest Client in Visual Studio Code.

Installa Rest Client Extension in Visual Studio Code

Lo scopo di questo articolo è mostrare come l’utente può testare la richiesta e la risposta HTTP all’interno del codice di Visual Studio. Quindi, all’inizio, devi installare l’estensione chiamata "Rest Client".

Fare clic sull’icona "Estensioni" e nel campo di ricerca digitare "Rest Client". Dal risultato della ricerca scegli il pacchetto sviluppato da “Huacho Mao" e installalo.

Come testare la richiesta e la risposta HTTP

In questa sezione, vediamo come inviare una richiesta HTTP effettiva e vedere la risposta. Se hai i tuoi endpoint API pronti, puoi applicare direttamente su di essi. Nel nostro caso, a scopo di test, prendiamo gli endpoint da REQ | RES.

Crea un file con estensione “.http” come “api.http”. Puoi salvare questo file ovunque. Questo è solo un file in cui puoi memorizzare tutte le tue richieste HTTP per un uso successivo.

Per inviare una richiesta GET, il nostro endpoint è https://reqres.in/api/users?page=2. Quindi, nel lo api.httpscriveremo come segue.

GET https://reqres.in/api/users?page=2

Ora, se controlli nell’editor, vedrai la riga "Invia richiesta" anteposta alla nostra dichiarazione. Fare clic su "Invia richiesta" per raggiungere un endpoint API e fornire una risposta HTTP nella finestra successiva. Guarda lo screenshot qui sotto.

È molto più semplice. Andando avanti puoi inviare una richiesta POST come di seguito.

POST https://reqres.in/api/users
Content-Type: application/json

{
    "name": "morpheus",
    "job": "leader"
}

Ovviamente, non vuoi creare un file separato per ogni richiesta. Per separare la richiesta, premi invio e digita "###" e poi su una nuova riga aggiungi la tua nuova richiesta.

GET https://reqres.in/api/users?page=2

###
POST https://reqres.in/api/users
Content-Type: application/json

{
    "name": "morpheus",
    "job": "leader"
}

In questo modo, puoi conservare tutte le tue richieste HTTP in un unico file e testarlo facilmente. Niente più fretta nel trovare la nostra richiesta e poi usarla.

In un altro esempio, potresti dover passare il token in ogni tua richiesta HTTP. Puoi farlo come mostrato di seguito.

POST https://reqres.in/api/users
Authorization: Bearer YOUR_TOKEN_HERE
Content-Type: application/json

{
  "user_id":5,
    "car_number":"030663",
    "car_reg_id":"217",
    "days": ["Monday", "Wednesday"],
    "booking_time": "07PM - 08PM"
}

Hai avuto l’idea, vero? Allo stesso modo, puoi scrivere le tue richieste HTTP PUT, DELETE. Vai avanti e provaci. Ti piacerebbe sicuramente questa estensione. Ci piacerebbe sentire i tuoi pensieri e suggerimenti nella sezione commenti qui sotto.

articoli Correlati

• Estensione FTP/SFTP per Visual Studio Code
• Come dividere il terminale su sistema operativo Windows
• Come utilizzare il pacchetto FTP/SFTP con testo sublime