{"id":27698,"date":"2021-05-13T13:43:00","date_gmt":"2021-05-13T10:43:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=27698"},"modified":"2021-10-17T17:10:39","modified_gmt":"2021-10-17T14:10:39","slug":"extension-de-cliente-rest-para-visual-studio-code","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/es\/extension-de-cliente-rest-para-visual-studio-code\/","title":{"rendered":"Extensi\u00f3n de cliente Rest para Visual Studio Code"},"content":{"rendered":"

El flujo de trabajo del desarrollo web est\u00e1 cambiando r\u00e1pidamente hoy en d\u00eda. Se prefiere a los usuarios para crear sitios web utilizando marcos \/ bibliotecas de JavaScript como React, Vue, Angular. Si bien la creaci\u00f3n de un sitio web con estas tecnolog\u00edas es una tendencia, tambi\u00e9n requiere llamar a las API de Rest para que sus aplicaciones sean din\u00e1micas.<\/p>\n

Su aplicaci\u00f3n frontend env\u00eda la solicitud HTTP al servidor backend y obtiene o procesa los datos. Es posible que deba enviar diferentes solicitudes HTTP a su servidor backend, como GET, POST, PUT, DELETE. Y seg\u00fan estas solicitudes y respuestas HTTP, su aplicaci\u00f3n funciona para el usuario final.<\/p>\n

Como necesita crear puntos finales de API, es obvio que necesita probar las solicitudes HTTP. Hay varias herramientas disponibles que nos permiten probar la solicitud y respuesta HTTP. La buena noticia es que si est\u00e1 utilizando Visual Studio Code, no necesita utilizar ni instalar ninguna otra herramienta o software. Puede probar sus llamadas a la API dentro de su propio editor de c\u00f3digo. En este art\u00edculo, le mostramos c\u00f3mo usar la extensi\u00f3n Rest Client en Visual Studio Code.<\/p>\n

Instalar la extensi\u00f3n de cliente Rest en Visual Studio Code<\/h3>\n

El prop\u00f3sito de este art\u00edculo es mostrarle c\u00f3mo el usuario puede probar la solicitud y la respuesta HTTP dentro del c\u00f3digo de Visual Studio. Entonces, al principio, debe instalar la extensi\u00f3n llamada "Rest Client".<\/p>\n

Haga clic en el icono "Extensiones" y en el campo de b\u00fasqueda escriba "Rest Client". Del resultado de la b\u00fasqueda elija el paquete desarrollado por \u00abHuacho Mao" e inst\u00e1lelo.<\/p>\n

C\u00f3mo probar la solicitud y la respuesta HTTP<\/h3>\n

En esta secci\u00f3n, vemos c\u00f3mo enviar una solicitud HTTP real y vemos la respuesta. Si tiene sus puntos finales de API listos, puede aplicarlos directamente. En nuestro caso, para fines de prueba, tomamos los puntos finales de REQ | RES<\/a>.<\/p>\n

Cree un archivo con la extensi\u00f3n ".http" como "api.http". Puede guardar este archivo en cualquier lugar. Este es solo un archivo donde puede almacenar todas sus solicitudes HTTP para su uso posterior.<\/p>\n

Para enviar una solicitud GET, nuestro punto final es https:\/\/reqres.in\/api\/users?page=2<\/a>. Entonces, en el api.http<\/code>lo escribiremos de la siguiente manera.<\/p>\n

GET https:\/\/reqres.in\/api\/users?page=2\n<\/code><\/pre>\n
Ahora, si revisa el editor, ver\u00e1 la l\u00ednea "Enviar solicitud" al comienzo de nuestra declaraci\u00f3n. Haga clic en "Enviar solicitud", llega a un punto final de la API y le da una respuesta HTTP en la siguiente ventana. Vea la captura de pantalla a continuaci\u00f3n.<\/p>\n
<\/a><\/p>\n
Es mucho m\u00e1s sencillo. En el futuro, puede enviar una solicitud POST como se muestra a continuaci\u00f3n.<\/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
Por supuesto, no desea crear un archivo separado para cada solicitud. Para separar la solicitud, presione enter y escriba \u00ab###\u00bb y luego en una nueva l\u00ednea agregue su nueva solicitud.<\/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
De esta manera, puede mantener todas sus solicitudes HTTP en un solo archivo y probarlo f\u00e1cilmente. No m\u00e1s apuro para encontrar nuestra solicitud y luego usarla.<\/p>\n
En otro ejemplo, es posible que deba pasar el token en cada solicitud HTTP. Puede hacerlo como se muestra a continuaci\u00f3n.<\/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
Tienes la idea, \u00bfverdad? De la misma manera, puede escribir sus solicitudes PUT, DELETE HTTP. Adelante y pruebalo. Definitivamente le gustar\u00eda esta extensi\u00f3n. Nos gustar\u00eda escuchar sus pensamientos y sugerencias en la secci\u00f3n de comentarios a continuaci\u00f3n.<\/p>\n
Art\u00edculos relacionados<\/h4>\n