{"id":24307,"date":"2021-05-13T13:59:00","date_gmt":"2021-05-13T10:59:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=24307"},"modified":"2021-10-18T03:16:05","modified_gmt":"2021-10-18T00:16:05","slug":"rest-client-extension-per-visual-studio-code","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/it\/rest-client-extension-per-visual-studio-code\/","title":{"rendered":"Rest Client Extension per Visual Studio Code"},"content":{"rendered":"

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.<\/p>\n

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.<\/p>\n

Poich\u00e9 \u00e8 necessario creare endpoint API, \u00e8 ovvio che \u00e8 necessario testare le richieste HTTP. Sono disponibili diversi strumenti che ci consentono di testare la richiesta e la risposta HTTP. La buona notizia \u00e8 che se utilizzi Visual Studio Code, non \u00e8 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.<\/p>\n

Installa Rest Client Extension in Visual Studio Code<\/h3>\n

Lo scopo di questo articolo \u00e8 mostrare come l’utente pu\u00f2 testare la richiesta e la risposta HTTP all’interno del codice di Visual Studio. Quindi, all’inizio, devi installare l’estensione chiamata "Rest Client".<\/p>\n

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.<\/p>\n

Come testare la richiesta e la risposta HTTP<\/h3>\n

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<\/a>.<\/p>\n

Crea un file con estensione “.http” come “api.http”. Puoi salvare questo file ovunque. Questo \u00e8 solo un file in cui puoi memorizzare tutte le tue richieste HTTP per un uso successivo.<\/p>\n

Per inviare una richiesta GET, il nostro endpoint \u00e8 https:\/\/reqres.in\/api\/users?page=2<\/a>. Quindi, nel lo api.http<\/code>scriveremo come segue.<\/p>\n

GET https:\/\/reqres.in\/api\/users?page=2\n<\/code><\/pre>\n
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.<\/p>\n
<\/a><\/p>\n
\u00c8 molto pi\u00f9 semplice. Andando avanti puoi inviare una richiesta POST come di seguito.<\/p>\n
POST https:\/\/reqres.in\/api\/users\nContent-Type: application\/json\n\n{\n    \"name\": \"morpheus\",\n    \"job\": \"leader\"\n}\n<\/code><\/pre>\n
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.<\/p>\n
GET https:\/\/reqres.in\/api\/users?page=2\n\n###\nPOST https:\/\/reqres.in\/api\/users\nContent-Type: application\/json\n\n{\n    \"name\": \"morpheus\",\n    \"job\": \"leader\"\n}\n<\/code><\/pre>\n
In questo modo, puoi conservare tutte le tue richieste HTTP in un unico file e testarlo facilmente. Niente pi\u00f9 fretta nel trovare la nostra richiesta e poi usarla.<\/p>\n
In un altro esempio, potresti dover passare il token in ogni tua richiesta HTTP. Puoi farlo come mostrato di seguito.<\/p>\n
POST https:\/\/reqres.in\/api\/users\nAuthorization: Bearer YOUR_TOKEN_HERE\nContent-Type: application\/json\n\n{\n  \"user_id\":5,\n    \"car_number\":\"030663\",\n    \"car_reg_id\":\"217\",\n    \"days\": [\"Monday\", \"Wednesday\"],\n    \"booking_time\": \"07PM - 08PM\"\n}\n<\/code><\/pre>\n
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.<\/p>\n
articoli Correlati<\/h4>\n