Cómo Hacer Una Solicitud De Publicación En Javascript

| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |

Cuando esté creando una aplicaciòn web, puede llegar un momento en el que desee realizar una solicitud HTTP para acceder a un recurso externo. Por ejemplo, suponga que está creando un blog. Es posible que desee llamar a una API para recuperar una lista de comentarios para mostrar en cada publicaciòn de blog.

Axios es una biblioteca de JavaScript popular que puede utilizar para realizar solicitudes web. En esta guìa, explicaremos còmo usar axios para realizar una solicitud GET. Veremos algunos ejemplos para mostrar còmo funciona axios y còmo puede usarlo en su còdigo.

¿Por qué Axios?

Axios es una biblioteca basada en promesas que lo convierte en fácil de realizar solicitudes web.

Quizás se pregunte: ¿por qué deberìa usar axios en lugar de una de las muchas otras bibliotecas de solicitudes web que existen? Es cierto que existen otras bibliotecas como fetch que puede utilizar para realizar solicitudes GET, pero axios tiene una serie de ventajas que estas bibliotecas no tienen.

Axios admite navegadores más antiguos, que le permitirá crear una experiencia de usuario más accesible. Axios también viene con protecciòn CSRF incorporada para prevenir vulnerabilidades. También funciona en Node.js, lo que lo hace genial si está desarrollando aplicaciones web tanto de front-end como de back-end.

Còmo instalar Axios

Antes de hacer un Solicite GET usando axios, tendrá que instalar la biblioteca. Puede hacerlo usando el siguiente comando:

Este comando instalará axios y lo guardará en su archivo package.json local. Ahora está listo para comenzar a usar la biblioteca axios.

Còmo hacer una solicitud usando Axios

Comenzar con axios es simple. Para realizar una solicitud web, todo lo que necesita hacer es especificar la URL desde la que desea solicitar los datos y el método que desea utilizar.

Suponga que desea recuperar una lista de datos aleatorios sobre gatos del cat-fact API. Podrìamos hacerlo usando este còdigo:

Este còdigo devuelve una promesa que representa una solicitud que no ha sido completado todavìa. Para recuperar datos de esta solicitud HTTP, debe usar una funciòn asìncrona / espera como esta:

El servidor respondiò wi Es una lista de datos de cat.

Cuando llamamos a esta funciòn, se realiza una solicitud HTTP GET a la API de cat-hechos. Usamos una funciòn async / await para que nuestro programa no contin√∫e hasta que se complete la solicitud web. Esto se debe a que axios devuelve una promesa primero. Devuelve los datos de la solicitud que realiza después de que esa solicitud se ha completado.

La biblioteca axios viene con algunos comandos abreviados que puede usar para realizar solicitudes web:

En este tutorial, nos centraremos en axios.get () y axios.post () métodos, que utilizan la misma sintaxis básica que todos los demás métodos abreviados.

Realizaciòn de solicitudes GET mediante axios

En nuestro √∫ltimo ejemplo, usamos axios para realizar una solicitud GET. Pero hay una forma más sencilla de realizar una solicitud GET con axios: usando axios.get ().

Suponga que desea recuperar una lista de datos de gatos, luego cuente cuántos se han devuelto. Puede hacerlo usando el siguiente còdigo:

El còdigo generò esta respuesta: se devolvieron 225 datos de gatos.

< / a>

Analicemos nuestro còdigo. Primero hemos declarado una funciòn asìncrona llamada getCatFacts () en la que hacemos una solicitud web.

Luego usamos axios.get () para recuperar una lista de datos de gatos de la API de hechos de gatos; " response.data " contiene los objetos de respuesta y el cuerpo de la solicitud de nuestra solicitud.

Finalmente, usamos el atributo .length para calcular cuántos datos de gatos se han devuelto de nuestra solicitud. Luego, agregamos este n√∫mero a la cadena " datos de gatos se devolvieron & rdquo ;.

Envìo de encabezados mediante axios

Cuando realiza una solicitud GET, es posible que deba enviar un encabezado personalizado al recurso web al que realiza la solicitud. Suponga que está recuperando datos de una API que requiere autenticaciòn. Es posible que deba especificar un encabezado de autenticaciòn.

< p> Para especificar un encabezado con una solicitud de axios, puede usar el siguiente còdigo:

Este còdigo enviarìa el encabezado " header-name & rdquo ; con el valor " header-value " a la URL que hemos especificado.

Envìo de parámetros usando axios

Muchas API le permiten enviar parámetros en una solicitud GET. Por ejemplo, una API puede permitirle limitar la cantidad de respuestas que se devuelven usando un parámetro de lìmite.

Especificar un parámetro para enviar con una solicitud web es fácil con axios. Puede incluir el parámetro como una cadena de consulta o utilizar la propiedad params. Aquì hay un ejemplo de axios que realiza una solicitud web usando cadenas de consulta para especificar un parámetro:

Alternativamente, puede especificar una propiedad params en las opciones de axios usando este còdigo:

Ambos ejemplos envìan un parámetro con el nombre " fecha " y el valor " 2020-05-15 " a la URL especificada.

Còmo hacer una solicitud POST usando axios

La sintaxis para hacer una solicitud POST es la misma que para hacer una solicitud GET. La diferencia es que debe usar la axios.post () método en lugar de axios.get ().

Suponga que desea realizar una solicitud de publicaciòn a una API. Puede hacerlo usando este còdigo:

Puede especificar encabezados y parámetros de la misma manera que lo harìa para realizar una solicitud GET. Supongamos que desea enviar el encabezado " Nombre " con el valor " James " con su solicitud POST. Puede hacerlo usando este còdigo:

Conclusiòn

La biblioteca axios se utiliza para realizar solicitudes web en JavaScript. Se puede usar tanto en el front-end usando JavaScript como en el back-end usando una plataforma como Node.js. A diferencia de otras bibliotecas de solicitudes web, axios tiene protecciòn CSRF incorporada, es compatible con navegadores más antiguos y utiliza una estructura de promesa. Es perfecto para realizar solicitudes web.

Ahora está listo para comenzar a realizar solicitudes GET y POST utilizando axios como un desarrollador web profesional.