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

¿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.

¿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()

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

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 Bootcamp Programación. 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!