Cómo conectar servicios a componentes Vue

Conecta tu servicio de búsqueda a tu componente en Vue con seguridad y claridad. Aquí verás cómo importar TrackService, reemplazar datos hardcodeados, manejar promises, depurar con console, resolver errores de CORS por URLs incorrectas y probar el endpoint con Postman o curl. Además, pulimos la vista con mejoras de Pug y validaciones en JavaScript usando valores falsy y truthy.

¿Cómo conectar servicios y view models en Vue?

Para usar el servicio en el componente principal, se importa TrackService desde la carpeta services sin necesidad de la extensión; webpack la resuelve. Se elimina el array hardcodeado y se usa el evento click con data binding para invocar el método de búsqueda. El método Search recibe la searchQuery, retorna una promise y permite encadenar un then para procesar la respuesta y hacer console.log.

// app.vue (fragmento)
import TrackService from './services/track'

export default {
  data() {
    return {
      searchQuery: '',
      tracks: []
    }
  },
  methods: {
    onSearch() {
      if (!this.searchQuery) return
      TrackService.search(this.searchQuery)
        .then(res => {
          console.log(res)
          this.tracks = res.tracks.items
        })
    }
  }
}

• Importar el servicio desde services/track.
• Usar el método Search con la variable bindeada al input.
• Encadenar then para leer la respuesta y observarla en console.
• Asignar los items a this.tracks para renderizar resultados.

¿Por qué usar then para procesar la respuesta?

• Porque Search devuelve una promise.
• Permite inspeccionar la API HTTP con console.log y luego actualizar el estado.

¿Qué errores comunes y soluciones aparecen al consumir una API?

Aparecen dos situaciones típicas: un import mal nombrado y un falso error CORS causado por una URL incorrecta. En el import, el archivo real se llama Platzi-Music, no Platzi Music Service; al corregir el nombre, webpack recompila y el componente funciona. Si ves CORS, revisa la URL base: se requiere HTTPS y el nombre correcto de la API: Platzi-Music-API.

• Corregir el import: usar el nombre exacto del archivo.
• Cambiar a HTTPS y a la ruta de Platzi-Music-API.
• Probar el endpoint con un cliente HTTP.

Ejemplo de prueba con cliente HTTP:

• Método: GET.
• Ruta: /search.
• Parámetros: q=muchacha, type=track.

Resultado esperado: un objeto con tracks e items. Para enlazarlo al view model:

// asignación al estado del componente
this.tracks = res.tracks.items

Para mostrar el artista, la respuesta expone artists (colección), no artist. Se usa el primer elemento y su name:

//- Pug (fragmento de template)
li(v-for="track in tracks")
  | {{ track.name }} - {{ track.artists[0].name }}

¿Cómo verificar fácilmente los endpoints?

• Usar curl o Postman para reproducir la petición.
• En Postman: método GET, ruta /search, query string con q y type.
• Comparar la respuesta con la que ves en console.

¿Cómo mejorar el código y la UX con pequeñas refactorizaciones?

Se aplican ajustes de Pug y estilos para legibilidad. Para evitar scroll horizontal, se mueven bloques y se agregan nodos de texto con el pipe (|), ya que sin él Pug intenta renderizar un elemento inexistente. Se reorganiza el search message (una computed property) fuera de la navbar dentro de un container. Además, se corrige un error de sintaxis en una clase column y se agrega una validación para no buscar con input vacío, aprovechando valores falsy y truthy.

//- usar pipe para texto
.column
  | Resultados encontrados

// validación sencilla con valores falsy
onSearch() {
  if (!this.searchQuery) return
  return TrackService.search(this.searchQuery)
    .then(res => { this.tracks = res.tracks.items })
}

• Pipe en Pug para apendear texto sin crear etiquetas inválidas.
• Mover el mensaje de encontrados fuera de la navbar a un container.
• Corregir la clase column para aplicar márgenes y estilos.
• Prevenir búsquedas vacías con if (!this.searchQuery) return.

¿Tienes otra API REST que te gustaría integrar? Prueba el reto similar y comparte tu código y aprendizajes en los comentarios.