Hacer una llamada a la API dentro de VS Code es muy sencillo, solo instale una extensión y luego no tendrá que depender de ninguna herramienta externa para realizar el trabajo.

Durante el desarrollo, es común que realice solicitudes a las API. Esto podría ser para alguna API externa o la API de su propio servidor backend.

Puede usar herramientas de terceros como Postman para realizar sus llamadas API. Pero una extensión de VS Code le permite realizar llamadas API directamente desde VS Code. Aquí aprenderá a realizar solicitudes de API en VS Code.

La extensión de cliente REST de VS Code

Una extensión en VS Code es un complemento o complemento que mejora las funcionalidades del editor de Visual Studio Code. El mercado de extensiones de VS Code ofrece varios tipos de extensiones que pueden ayudarlo con sus tareas de programación. Hay una extensión para agregar soporte de idiomas. Hay uno para proporcionar autocompletado para un lenguaje de programación específico, etc. Las extensiones facilitan la programación con VS Code.

instagram viewer

La extensión del cliente REST le permite ejecutar solicitudes de API desde VS Code. La extensión incluye el editor de la API REST, una interfaz visual que le permite consultar los puntos finales de la API. Acepta encabezados personalizados, parámetros de consulta y algunos otros parámetros.

Para instalar el Cliente REST, abra VS Code y haga clic en el Extensiones pestaña. Buscar Cliente REST y haga clic en el Instalar botón para agregarlo a VS Code.

Bajo la Detalles pestaña, encontrará un tutorial útil sobre cómo usar el cliente para realizar solicitudes de API. Veamos los cuatro tipos comunes de solicitudes y cómo realizarlas utilizando la extensión REST Client.

estaremos usando JSONMarcador de posición para demostrar cómo hacer llamadas a la API usando la extensión REST Client. Proporciona seis recursos comunes que puede leer, editar, actualizar o eliminar mediante solicitudes de API.

Realización de una solicitud GET utilizando la extensión de cliente REST

Comience por crear un .http archivo para sus solicitudes de API. Puede nombrar el archivo missolicitudes.http.

Agregue el siguiente código a su missolicitudes.http archivo para recuperar un recurso de la API JSONPlaceholder que tiene 1 como su ID:

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

Para enviar la solicitud, haga clic en el Enviar petición botón que aparece en la parte superior del archivo. Se abrirá una nueva ventana que contiene los detalles de la respuesta.

Así es como realiza una solicitud GET dentro de VS Code.

Realización de una solicitud POST utilizando la extensión de cliente REST

Realiza una solicitud POST cuando desea publicar datos en el servidor, generalmente para crear un nuevo recurso.

Para crear un nuevo recurso en la API JSONPlaceholder, reemplace el código en su missolicitudes.http archivo con lo siguiente:

CORREO https://jsonplaceholder.typicode.com/posts HTTP/1.1
Tipo de contenido: "aplicación/json"

{
"título": "foo",
"cuerpo": "barra",
"ID de usuario": 1
}

Haga clic en el Enviar petición botón para enviar la solicitud. Nuevamente, esto abrirá una nueva ventana que contiene los datos de respuesta. La respuesta muestra una HTTP/1.1 201 Creado mensaje y el ID de la publicación junto con otros datos si la llamada a la API es exitosa.

{
"id": "101"
}

Realización de una solicitud PUT con la extensión de cliente REST

Realiza una solicitud PUT cuando desea actualizar los datos en el servidor.

Para actualizar un recurso existente en la API JSONPlaceholder, reemplace el código en su missolicitudes.http archivo con lo siguiente:

PONER https://jsonplaceholder.typicode.com/posts/1 HTTP/1.1
Tipo de contenido: "aplicación/json"

{
"título": "nuevo foo",
"cuerpo": "nueva barra",
"ID de usuario": 1
}

Después de enviar la solicitud, el recurso se actualizará en el servidor simulado y obtendrá un HTTP/1.1 200 Aceptar mensaje.

Realización de una solicitud PATCH con la extensión de cliente REST

Realiza una solicitud PATCH cuando desea modificar un campo o propiedad en particular de un recurso determinado en el servidor.

Para actualizar solo el título de un recurso existente en el servidor simulado, reemplace el código en su missolicitudes.http archivo con lo siguiente:

https://jsonplaceholder.typicode.com/posts/1 HTTP/1.1 
Tipo de contenido: "aplicación/json"

{
"title": "otro foo"
}

Después de realizar la solicitud, el título del recurso se actualizará en el servidor simulado y obtendrá un HTTP/1.1 200 Aceptar mensaje junto con los demás datos del recurso.

Realización de una solicitud DELETE utilizando la extensión de cliente REST

Realiza una solicitud DELETE cuando desea eliminar un recurso en el servidor.

Para eliminar un recurso existente en el servidor simulado, reemplace el código en su missolicitudes.http archivo con lo siguiente:

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

Aquí el Tipo de contenido no es necesario, y tampoco lo es el objeto de datos. Si envía la solicitud y elimina correctamente el recurso, debería obtener un HTTP/1.1 200 Aceptar respuesta con un objeto vacío.

Realice llamadas API directamente desde el interior del código VS

Anteriormente, es posible que haya utilizado herramientas de terceros como Cartero para hacer solicitudes de API. Si bien estas herramientas funcionan bien, se necesita tiempo para configurarlas. Por ejemplo, debe tener una cuenta con Postman para usar el explorador de API.

A pesar de que hay varias herramientas de prueba de API en línea, pero con extensiones como REST Client, probar las API es mucho más rápido y sencillo. Puede probar cualquier API directamente desde su editor de VS Code. Esto es especialmente útil si está desarrollando API localmente y desea probar sus API locales sobre la marcha.

Otras extensiones de código VS de pruebas de API

Rest Client es fácil de usar. Pero no es la única extensión de VS Code para probar API. Otras opciones populares son Thunder Client, httpYak y httpBook.

Thunder Client proporciona un editor de API visual para simplificar las solicitudes de API. Por supuesto, debe saber qué es la API REST para usar estas herramientas.