Creando servicios HTTP con Fetch API

Para escalar una app con confianza, es clave abandonar datos hardcodeados y pasar a peticiones HTTP reales. Aquí verás cómo estructurar servicios en Vanilla JavaScript y conectarlos con la API Fetch del browser, manteniendo a Vue.js como capa de vista y tu lógica de negocios bien separada y reutilizable.

¿Por qué usar servicios y peticiones HTTP con Fetch en Vue.js?

Trabajar con servicios permite aislar la lógica de negocios del render. Vue.js es un framework de la vista, así que el modelo y la lógica deben resolverse por fuera, idealmente en archivos dedicados y puros de JavaScript. Esto facilita integrar APIs REST como Spotify, GitHub o Facebook, además de APIs privadas internas, sin atarte a una sola tecnología.

• Separación de responsabilidades: la vista en Vue.js, la lógica en servicios.
• Reutilización: funciona en Angular, React o cualquier app web.
• Compatibilidad: la API Fetch consume HTTP de múltiples orígenes.
• Mantenibilidad: código modular, importable y testeable.

¿Qué es un servicio en este contexto?

Un servicio es un archivo con lógica de negocios que provee información a las vistas. Se diseña para ser consumido por la capa de presentación, sin mezclar render con datos.

• Archivos con funciones y reglas de negocio.
• Proveedor de datos para view models.
• Los view models llevan la información al HTML.
• Patrón simple y genérico para múltiples proyectos.

¿Cómo organizar el proyecto: carpeta Services y nomenclatura de archivos?

Dentro de Source, crea una carpeta llamada Services para centralizar la lógica. Allí vas a añadir dos archivos iniciales: config.js y plazi-music.js. La nomenclatura sigue la sintaxis Kivab: palabras en minúsculas separadas por guiones. Para componentes, usa Pascal Case.

• Carpeta: Source/Services.
• Archivos: config.js y plazi-music.js.
• Nombres en Kivab: guiones y minúsculas.
• Componentes en Pascal Case: cada palabra con mayúscula.

Source/
  Services/
    config.js
    plazi-music.js

Esta estructura mantiene el código modular y facilita su importación desde donde lo necesites.

¿Qué contiene config.js y cómo exportarlo con ES Modules?

El archivo config.js actúa como storage de parámetros de configuración. Crea un objeto llamado configService con la propiedad apiUrl, apuntando a la URL de la API: http://plazimusic.now.sh. Luego, expórtalo con export default para poder importarlo cuando haga falta. Esto se apoya en ES Modules de ECMAScript 2015.

// Source/Services/config.js
const configService = {
  apiUrl: 'http://plazimusic.now.sh'
};

export default configService;

• configService: almacén de configuración.
• apiUrl: base para consumir contenido de canciones y artistas.
• export default: facilita importar el servicio donde se necesite.
• ES Modules: separa código en archivos y mejora la organización.

¿Cómo se integrará luego con Plazzi Music y Fetch?

El siguiente paso es crear el servicio plazi-music.js y usar Fetch para consumir la API definida en apiUrl. Así podrás trabajar con canciones, artistas y más sin datos ficticios.

• Servicio Plazzi Music: envoltorio para peticiones HTTP.
• Consumo con Fetch: solicitudes limpias y nativas del browser.
• Datos listos para los view models y el HTML.
• Base para integrar cualquier API REST en el proyecto.

¿Con qué API te gustaría practicar primero y qué endpoints te interesan? Comparte tus dudas y avances para seguir iterando juntos.