Este artículo detalla algunas maneras de llamar a una API en un Custom Widget con algunos ejemplos.
Primero, ¿Qué es una API?
Una API es una herramienta que pone a disposición información a programas en un formato más conveniente. Por ejemplo, puedes ir al sitio de una empresa en tu navegador y ver la información en un formato ordenado y atractivo.
Esa misma API, presenta su información de una manera que es conveniente para programas. Entrega la información directamente.
Más abajo hay tres ejemplos de como puedes utilizar APIs para jalar la información para un custom widget y así utilizarlo como quieras.
Todos los ejemplos deben ser incluidos en la pestaña de JavaScript de tu custom widget.
jQuery
Una poderosa característica de JQuery es su funcionalidad AJAX fácil de entender. Te permite jalar fácilmente datos de no solo contenido dentro de tu sitio, pero de también otros sitios y servicios.
Un llamado en JQuery se ve como esto:
En esta solicitud AJAX, estamos especificando un punto de salida (utilizando el objeto Liquid {{ site.url }}) e incluyendo opciones para especificar que es un "GET" del tipo 'json'. Finalmente enlazamos el "data.promotions" a nuestro "vm.promos" para usarlo en la aplicación.
Puedes aprender más sobre AJAX en W3School aquí.
API Fetch con JavaScript nativo
La API Fetch provee una interface JavaScript simple, para acceder y manipular parte del protocolo HTTP, como solicitudes y repuestas. El método global fetch() es una manera fácil y lógica de jalar recursos asincrónicamente a través de una red.
Una solicitud fetch básica es muy simple de realizar. Observa el siguiente código:
Estamos jalando un archivo JSON desde dentro de nuestro sitio utilizando el objeto Liquid {{ site.url }}. El uso más simple de fetch() require un argumento—la ruta del recurso que quieres jalar—y devuelve un "promise" que contiene la respuesta (Response object).
Esta es una respuesta HTTP, no el verdadero JSON. Para extraer el cuerpo del JSON de la respuesta, utilizamos el método json() al final de esta, para luego enlazar los datos a nuestras promociones (este fetch() es para esta aplicación).
Para información más detallada, te recomendamos visitar los webdocs de MDN.
Axios
Axios es una librería de JavaScript muy popular que los desarrolladores utilizan para realizar solicitudes HTTP que funcionan en todos los navegadores modernos, incluyendo IE8 en adelante.
Está basada en el objeto "promise" y te permite escribir asincrónicamente código para realizar solicitudes XHR fácilmente.
Utilizar Axios tiene algunas ventajas sobre la API Fetch nativa:
- soporta navegadores más antiguos (Fetch necesita un polyfill)
- tiene una manera de abortar una solicitud
- tiene una manera de establecer un timeout para la respuesta
- viene con protección CSRF incluida
- soporta progreso de carga
- realiza transformación de datos JSON automáticamente
Para poder usar Axios en Modyo, necesitas agregar el código base del axios.js como un custom snippet e incluirlo en algún lugar donde tus widgets puedan accederlo, como el JavaScript theme (localizado en Templates, bajo la pestaña de Archivos).
Aquí hay un ejemplo de una solicitud Axios.get():
En este ejemplo, estamos pasando 2 parámetros en el método get(). El primero es nuestro punto de salida para los datos y el segundo es un objeto con nuestras opciones para la solicitud "get". Finalmente utilizamos el objeto en la respuesta recibida para enlazar "response.data.promotions" a nuestras promociones (esto es para esta aplicación).
Si aún tienes preguntas sobre cómo llamar a una API en un custom widget, por favor envía una solicitud y estaremos felices de ayudarte.