{"id":27336,"date":"2021-05-13T14:01:00","date_gmt":"2021-05-13T11:01:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=27336"},"modified":"2021-10-18T04:14:47","modified_gmt":"2021-10-18T01:14:47","slug":"extensao-cliente-rest-para-visual-studio-code","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/pt-pt\/extensao-cliente-rest-para-visual-studio-code\/","title":{"rendered":"Extens\u00e3o Cliente Rest para Visual Studio Code"},"content":{"rendered":"

O fluxo de trabalho de desenvolvimento web est\u00e1 mudando rapidamente hoje em dia. Os usu\u00e1rios s\u00e3o preferidos para construir sites usando bibliotecas \/ frameworks JavaScript como React, Vue, Angular. Embora a constru\u00e7\u00e3o de um site com essas tecnologias seja uma tend\u00eancia, tamb\u00e9m \u00e9 necess\u00e1rio chamar as APIs Rest para tornar seus aplicativos din\u00e2micos.<\/p>\n

Seu aplicativo de front-end envia a solicita\u00e7\u00e3o HTTP para o servidor de back-end e obt\u00e9m ou processa os dados. Para o seu servidor de back-end, pode ser necess\u00e1rio enviar diferentes solicita\u00e7\u00f5es HTTP, como GET, POST, PUT, DELETE. E com base nessas solicita\u00e7\u00f5es e respostas HTTP, seu aplicativo funciona para o usu\u00e1rio final.<\/p>\n

Como voc\u00ea precisa criar endpoints de API, \u00e9 \u00f3bvio que voc\u00ea precisa testar as solicita\u00e7\u00f5es HTTP. Existem v\u00e1rias ferramentas dispon\u00edveis que nos permitem testar solicita\u00e7\u00f5es e respostas HTTP. A boa not\u00edcia \u00e9 que, se voc\u00ea estiver usando o Visual Studio Code, n\u00e3o precisar\u00e1 usar ou instalar nenhuma outra ferramenta ou software. Voc\u00ea pode testar suas chamadas de API dentro de seu pr\u00f3prio editor de c\u00f3digo. Neste artigo, mostramos como usar a extens\u00e3o Rest Client no Visual Studio Code.<\/p>\n

Instale a extens\u00e3o de cliente Rest no c\u00f3digo do Visual Studio<\/h3>\n

O objetivo deste artigo \u00e9 mostrar como o usu\u00e1rio pode testar a solicita\u00e7\u00e3o e a resposta HTTP no c\u00f3digo do Visual Studio. Portanto, em primeiro lugar, voc\u00ea precisa instalar a extens\u00e3o chamada “Rest Client".<\/p>\n

Clique no \u00edcone “Extens\u00f5es" e no campo de pesquisa digite “Rest Client”. No resultado da pesquisa, escolha o pacote desenvolvido por “Huacho Mao” e instale-o.<\/p>\n

Como testar solicita\u00e7\u00e3o e resposta HTTP<\/h3>\n

Nesta se\u00e7\u00e3o, vemos como enviar uma solicita\u00e7\u00e3o HTTP real e ver a resposta. Se voc\u00ea tiver seus endpoints de API prontos, poder\u00e1 aplic\u00e1-los diretamente. Em nosso caso, para fins de teste, pegamos endpoints de REQ | RES<\/a>.<\/p>\n

Crie um arquivo com extens\u00e3o “.http” como “api.http”. Voc\u00ea pode salvar este arquivo em qualquer lugar. Este \u00e9 apenas um arquivo onde voc\u00ea pode armazenar todas as suas solicita\u00e7\u00f5es HTTP para uso posterior.<\/p>\n

Para enviar uma solicita\u00e7\u00e3o GET, nosso endpoint \u00e9 https:\/\/reqres.in\/api\/users?page=2<\/a>. Ent\u00e3o, no api.http<\/code>vamos escrever da seguinte maneira.<\/p>\n

GET https:\/\/reqres.in\/api\/users?page=2\n<\/code><\/pre>\n
Agora, se voc\u00ea verificar no editor, ver\u00e1 a linha “Enviar solicita\u00e7\u00e3o” anexada ao nosso extrato. Clique em “Send Request” para atingir um endpoint da API e fornecer uma resposta HTTP na janela seguinte. Veja a imagem abaixo.<\/p>\n
<\/a><\/p>\n
\u00c9 muito mais simples. No futuro, voc\u00ea pode enviar a solicita\u00e7\u00e3o POST conforme abaixo.<\/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
Claro, voc\u00ea n\u00e3o deseja criar um arquivo separado para cada solicita\u00e7\u00e3o. Para separar a solicita\u00e7\u00e3o, pressione Enter e digite “###” e em uma nova linha adicione sua nova solicita\u00e7\u00e3o.<\/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
Dessa forma, voc\u00ea pode manter todas as suas solicita\u00e7\u00f5es HTTP em um \u00fanico arquivo e test\u00e1-lo facilmente. N\u00e3o h\u00e1 mais pressa em encontrar nosso pedido e us\u00e1-lo.<\/p>\n
Em outro exemplo, voc\u00ea pode precisar passar o token em cada solicita\u00e7\u00e3o HTTP. Voc\u00ea pode fazer isso conforme mostrado abaixo.<\/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
Voc\u00ea teve a ideia, certo? Da mesma forma, voc\u00ea pode escrever suas solicita\u00e7\u00f5es PUT, DELETE HTTP. V\u00e1 em frente e experimente. Voc\u00ea definitivamente gostaria desta extens\u00e3o. Gostar\u00edamos de ouvir suas opini\u00f5es e sugest\u00f5es na se\u00e7\u00e3o de coment\u00e1rios abaixo.<\/p>\n
Artigos relacionados<\/h4>\n