¿Cómo hacer una llamada a una API desde JavaScript?

Autor: | Última modificación: 29 de agosto de 2022 | Tiempo de Lectura: 3 minutos
Temas en este post: ,

Algunos de nuestros reconocimientos:

Premios KeepCoding

¿Sabes cómo hacer una llamada a una API desde JavaScript? JavaScript también forma parte de los lenguajes necesarios para desarrollar aplicaciones web. Por lo tanto, es importante que conozcas cómo hacer una llamada a una API desde JavaScript, para que puedas enlazar los formatos interactivos que realices con JavaScript y juntarlo con APIs, desde donde podrás extraer todos lo datos necesarios para el desarrollo de tu programa y aplicación o plataforma web.

Por eso, si te interesa el desarrollo web, te invitamos a seguir explorando el proceso para hacer una llamada a una API desde JavaScript.

En qué consiste JavaScript

¿Te has encontrado con un dibujo que aparece y reapecere en una página web? ¿Has visto cómo el fondo de una página cambia de color cada x segundos? Si lo has visto es porque te has encontrado con un elemento posiblemente realizado con el lenguaje de programación JavaScript.

Este lenguaje de programación se encarga de generar módulos y métodos para la animación, movimiento y generación de elementos interactivos y móviles de cualquier programa o aplicación web.

Usualmente, este lenguaje necesita estar acompañado de la agencia del lenguaje de marcado HTML y de la hoja de estilos CSS, para poder construir una página en la que se resalte diferentes variables.

¿Cómo hacer una llamada a una API desde JavaScript?

Para hacer una llamada a una API desde JavaScript debes cumplir con tres pasos, que estableceremos a continuación:

Instanciar la clase y el objeto

Para empezar, debes tener en cuenta que la clase principal que permite hacer llamadas dentro de JavaScript es el método XMLHttpRequest. Este objeto de JavaScript se encarga de realizar peticiones con el método HTTP y con el formato o lenguaje de marcado XML. Esta es la clase que se debe instanciar como un objeto dentro del fichero que se encargará de generar los elementos de tipo JavaScript. Esto se realiza de la siguiente manera:
const cargaMovimientosRequest = new XMLHttpRequest()

🔴 ¿Quieres Aprender a Programar con Python? 🔴

Descubre el Full Stack Jr. Bootcamp - Aprende a Programar desde Cero de KeepCoding. La formación más completa del mercado y con empleabilidad garantizada

👉 Prueba gratis el Bootcamp Aprende a Programar desde Cero por una semana

Después de haber hecho esto, tendrás que pensar en los elementos que tienes que buscar y agregar en tus programas de código. En primer lugar y después de instanciar la clase para hacer la llamada, tendrás que traer la URL para acceder y el objeto que hemos establecido hace un momento.

Los elementos son:

  • URL: ‘http://localhost:500/api/v1/movimientos/’
  • Objeto: cargaMovimientosRequest

Realizar la llamada

Ahora que tienes el objeto y has instanciado la clase, ya puedes realizar la llamada desde el fichero de JavaScript. La llamada tendrás que hacerla con el método del objeto. Cuando haya sido exitosa, podrás guardar el resultado, que, después, deberá ser modificado y configurado en otro paso del proceso.

Para realizar la llamada, establecemos la siguiente representación, donde podrás ver cómo se instancia el objeto con los métodos de HTTP, es decir, con GET o con POST. Aquí se abrirá una petición con el método GET, donde, además, se pasará la URL de la API. El IDE te pedirá que especifiques si es asíncrona o síncrona (async o sync). En este caso, pasaremos un false pues no es de tipo async.

cargaMovimientosRequest.open (‘GET’, http://localhost:500/api/v1/movimientos/, false)

Este proceso ha abierto una conexión. Para enviar los resultados que se obtuvieron en la conexión, tendrás que instanciar el siguiente proceso. Le pedirás la respuesta directamente al objeto de cargaMovimientos:

cargaMovimientosRequest.send()

Almacenar los resultados de la llamada

Por último, tendrás que almacenar los resultados que has obtenido con la llamada con uno de los métodos que nos ofrece el método de JavaScript XMLHttpRequest: response.text.

movimientos = cargaMovimientosRequest.responseText

Este método no solo te permite almacenar los datos, sino que también te da la respuesta a tu consulta como un texto o null.

Ahora, viendo todo en conjunto, la representación de estos pasos se mostraría de la siguiente forma:

const cargaMovimientosRequest = new XMLHttpRequest()

cargaMovimientosRequest.open (‘GET’, http://localhost:500/api/v1/movimientos/, false)

cargaMovimientosRequest.send()

movimientos = cargaMovimientosRequest.responseText

¿Cuál es el siguiente paso?

Si has aprendido cómo hacer una llamada a una API desde JavaScript, este post seguro que te ha gustado. En KeepCoding consideramos que cuanto más practiques y más programas realices, más experto te haces en el mundo del código.

Por este motivo, si quieres seguir este consejo, te recomendamos visitar el programa de Aprende a Programar desde Cero Full Stack Jr. Bootcamp. No dudes en inscribirte, pues te servirá para afianzar tus habilidades y aumentar tus conocimientos. ¡En pocos meses te convertirás en todo un profesional!

¡CONVOCATORIA ABIERTA!

Aprende a Programar desde Cero

Full Stack Jr. Bootcamp

Apúntate y consigue uno de los perfiles más demandados con Python, Java y Spring Boot en solo 6 meses.