Configurando la API de Lastfm en Vue.js

Clase 12 de 17 • Curso Básico de Vue.js 2016

Clase anteriorSiguiente clase

Jose Andres Gonzalez Guevara

student•

Recomendado para todos => Libro

Luis Ramirez

student•

Gracias por tu aporte, es bueno tener libros también.

Jhon Jairo Prada Pájaro

student•

Muchas gracias.

Fredy Bustos

student•

pueden usar json formatter en chrome para ver mejor los objetos que devuelve la api

Fundación FundaTIC

student•

Una muy buena para este tipo de acciones es utilizar Postman

Saludos

Yefferson Guarnizo

student•

excelente, gracias 😄

Martin Chmieleivski

student•

En la función mounted la variable self NO es necesaria y ahí lo correcto sería SI usar una función flecha. La función flecha no tiene un this propio si no que lo toma del entorno que la contiene, que en este caso sería el objeto de Vue, NO la ventana (window).

O sea que esto:

const self = this
getArtists()
  .then(function (artists) {
    self.artists = artists
  })

Se puede escribir así:

getArtists()
  .then(artists => this.artists = artists)

Misael Cureño

student•

Les comparto la imagen del ciclo de vida del componente Vue

Juan Carlos Nahuat Mex

student•

MUchas gracias

andres flores

student•

Con arrow Function se mantiene en el scope de mounted

    getArtists()
      .then( artists => {
        this.artists = artists
      })```

Wilmar Alexis Caicedo Serrano

student•

Es correcto

Francisco Peñalo Feliz

student•

Recuerda que esa clase fue grabada en el 2017 y posiblemente en las versiones más recientes de Vue arreglaron el problema del contexto en las arrow functions.

mario godinez medina Godinez Medina

student•

siempre me he preguntado en que metodo es mejor hacer una peticion ajax, si en el created() o en el mounted(). VUEJS es el mejor!

Nacho Anaya

teacher•

Para llamadas ajax te recomiendo usar el created ya que es un paso anterior al mounted y tu peticion se va a ejecutar mas rapido.

Liliana Colls

student•

Habia entendido que es mejor hacer llamadas en el mounted, porque en caso de que ocurra un error en el request si lo estas haciendo en el created() pues el componente no se va a crear y esto puede generar un error. ¿no?

Ludwing Rivera Amador

student•

Bueno creo que seria mas interesante usar axios para las peticiones. Vue - axios

Francisco Peñalo Feliz

student•

Para hacerlo más interesante le agregue la imagen y la url del artista al ejemplo de la clase.

Modificando el template:

<template lang="pug">
  #app
    img(src='./assets/logo.png')
    h1 PlatziMusic
    ul
      li(v-for="artist in artists")
        a(:href="artist.url", target="_blank") {{ artist.name }}
          img(:src="getImageUrl(artist.image)")
</template>

Creando método que retorna la url de la imagen:

<script>
import getArtists from './api'

export default {
  name: 'app',
  data () {
    return {
      artists: []
    }
  },
  methods: {
    getImageUrl: function(imageList) {
      for (const image of imageList) {
        if (image.size === "medium") {
          return image["#text"]
        }
      }
    }
  },
  mounted: function () {
    const self = this
    getArtists()
      .then(function (artists) {
        self.artists = artists
      })
  }
}
</script>

Antonio Aldrin Miranda Peñaranda

student•

Excelente amigo!!! gracias por compartir

Juan Carlos Nahuat Mex

student•

Genial!! Lo intentare

Juan Eduardo López Jorge

student•

Cual es la diferencia de usar el atributo data de vue de esta forma:

data : { artists : [] }

Y esta otra?

data() { return { artists : [ ] } }

Manuel Ojeda

student•

Son nomenclaturas que van cambiando a las versiones, en la documentación se especificar que data es un método/función que retorna el objeto con los datos de tu componente de Vue, por lo que la manera recomendada es: https://vuejs.org/v2/api/#Options-Data

Ejemplo:

Jose Andres Gonzalez Guevara

student•

Mayor información de fetch => Acá

Bryan Estiven Silva Mercado

student•

En este video me quedo un poco mas claro como funciona Vue

Manuel Ojeda

student•

Un buen plugin para las peticiones web, Axios:

Iván Toro

student•

Last.fm API.

Freddy Córdova Arana

student•

Consulta: cuando escribo en la consola “npm run dev” para correr el servidor, mi proyecto corre desde index.html en vez de App.vue, sale esto:

Project is running at
webpack output is served from /dist/
404s will fallback to /index.html

y me manda a una página en blanco, por favor ayúdenme, que puedo hacer para que se ejecute App.vue

Gracias.

Diego Forero

Team Platzi•

En tu archivo index estas jalando el archivo build.js que se crea de la compilación de webpack? descarga el archivo zip que esta en la pestaña de archivos y compara con tu código.

Juan Manuel Viveros Martinez

student•

les recomiendo esta extensión de google chrome para identar el JSON de la API para que sea mas facil de entender el JSON

Url extensión de google chrome de click aquí

Luis Rogelio Reyes Hernandez

student•

Google chrome tiene extensiones como Json View que te permite ver mejor las respuestas de la api en el navegador

Gregory Hernandez Abad

student•

TIPS SOBRE EL ISO 3166-1

Usar la version en ingles para todo: https://en.wikipedia.org/wiki/ISO_3166-1#Como_se_utiliza_ISO_3166-1
Si el nombre de tu pais tiene mas de una palabra, al colocar la direccion del request, separa con un signo de mas (+), por ejemplo: republica+dominicana

Juan David Gonzalez Revelo

student•

El Navegadr Mozilla preprocesa el JSON permitiendo explorar la respuesta de una manera más comoda

Javier Leal Jose Hurtado

student•

Yo me salte el pug y stylus y pude llevar el curso con la equivalencia que el explica.

Luis Aquino Centurión

company_admin•

Hola tengo la siguiente api: http://localhost:3000/contribuyente/ { "error": "", "body": [ [ [ { "RUC": "20272209325", "RAZON_SOCIAL": "PESCA PERU MOLLENDO S.A.", "ESTADO": "BAJA DEFINITIVA", "CONDICION_DOMICILIO": "HABIDO", "UBIGEO": 150122, "TIPO_VIA": "AV.", "DIRECCION": "AV. JOSE PARDO-601-1603", "NOMBRE_VIA": "JOSE PARDO", "CODIGO_ZONA": "-", "TIPO_ZONA": "-", "NUMERO": "601", "INTERIOR": "1603", "LOTE": "-", "DEPARTAMENTO": "-", "MANZANA": "-", "KILOMETRO": "-" }, { "RUC": "20101599206", "RAZON_SOCIAL": "DAYTONA S A", "ESTADO": "BAJA DEFINITIVA", "CONDICION_DOMICILIO": "HABIDO", "UBIGEO": 150101, "TIPO_VIA": "JR.", "DIRECCION": "JR. SANTA FRANCISCA ROMANA-URB.-PANDO III ETAPA-1078", "NOMBRE_VIA": "SANTA FRANCISCA ROMANA", "CODIGO_ZONA": "URB.", "TIPO_ZONA": "PANDO III ETAPA", "NUMERO": "1078", "INTERIOR": "-", "LOTE": "-", "DEPARTAMENTO": "-", "MANZANA": "-", "KILOMETRO": "-" } ], { "fieldCount": 0, "affectedRows": 0, "insertId": 0, "serverStatus": 34, "warningCount": 0, "message": "", "protocol41": true, "changedRows": 0 } ] ] }

Mi index.js es el siguiente: export default function traerContribuyentes() { return fetch('http://localhost:3000/contribuyente/') .then(res => res.json()) .then(json => json.body[0][0]) };

App-vue template lang="pug"> #app img(src="./assets/logo.png") h1 Lista Contribuyentes ul li(v-for="contribuyente in contribuyentes") {{ contribuyente.name }}

</template> <script> import traerContribuyentes from './api'; export default { name: 'app', data () { return { contribuyentes: [] } }, mounted: function () { const self = this traerContribuyentes .then((contribuyente) => { self.contribuyentes=contribuyentes }) } } </script>

y al correr mi App.vue sale el siguiente error vue.esm.js?efeb:628 [Vue warn]: Error in mounted hook: "TypeError: WEBPACK_IMPORTED_MODULE_0__api.a.then is not a function"

found in

---> <App> at src/App.vue <Root> warn @ vue.esm.js?efeb:628 logError @ vue.esm.js?efeb:1893 globalHandleError @ vue.esm.js?efeb:1888 handleError @ vue.esm.js?efeb:1848 invokeWithErrorHandling @ vue.esm.js?efeb:1871 callHook @ vue.esm.js?efeb:4222 insert @ vue.esm.js?efeb:3148 invokeInsertHook @ vue.esm.js?efeb:6351 patch @ vue.esm.js?efeb:6570 Vue._update @ vue.esm.js?efeb:3951 updateComponent @ vue.esm.js?efeb:4069 get @ vue.esm.js?efeb:4482 run @ vue.esm.js?efeb:4557 flushSchedulerQueue @ vue.esm.js?efeb:4313 (anonymous) @ vue.esm.js?efeb:1989 flushCallbacks @ vue.esm.js?efeb:1915 Promise.then (async) timerFunc @ vue.esm.js?efeb:1942 nextTick @ vue.esm.js?efeb:1999 queueWatcher @ vue.esm.js?efeb:4405 update @ vue.esm.js?efeb:4547 Vue.$forceUpdate @ vue.esm.js?efeb:3972 (anonymous) @ index.js?737e:244 (anonymous) @ index.js?737e:242 (anonymous) @ index.js?737e:119 (anonymous) @ App.vue?a8e9:39 (anonymous) @ App.vue?a8e9:44 (anonymous) @ build.js:961 webpack_require @ build.js:679 hotApply @ build.js:608 (anonymous) @ build.js:290 Promise.then (async) hotUpdateDownloaded @ build.js:289 hotAddUpdateChunk @ build.js:266 webpackHotUpdateCallback @ build.js:8 (anonymous) @ 0.99e3e59d83d5b3b8d0fe.hot-update.js:1 vue.esm.js?efeb:1897 TypeError: WEBPACK_IMPORTED_MODULE_0__api.a.then is not a function at VueComponent.mounted (App.vue?ea99:21) at invokeWithErrorHandling (vue.esm.js?efeb:1863) at callHook (vue.esm.js?efeb:4222) at Object.insert (vue.esm.js?efeb:3148) at invokeInsertHook (vue.esm.js?efeb:6351) at Vue.patch [as patch] (vue.esm.js?efeb:6570) at Vue._update (vue.esm.js?efeb:3951) at Vue.updateComponent (vue.esm.js?efeb:4069) at Watcher.get (vue.esm.js?efeb:4482) at Watcher.run (vue.esm.js?efeb:4557)

<template lang="pug">
  #app
    img(src='./assets/logo.png')
    h1 PlatziMusic
    ul
      li(v-for="artist in artists")
        a(:href="artist.url", target="_blank") {{ artist.name }}
          img(:src="getImageUrl(artist.image)")
</template>

<script>
import getArtists from './api'

export default {
  name: 'app',
  data () {
    return {
      artists: []
    }
  },
  methods: {
    getImageUrl: function(imageList) {
      for (const image of imageList) {
        if (image.size === "medium") {
          return image["#text"]
        }
      }
    }
  },
  mounted: function () {
    const self = this
    getArtists()
      .then(function (artists) {
        self.artists = artists
      })
  }
}
</script>

Configurando la API de Lastfm en Vue.js

Fundamentos de Vue.js

¿Dónde aprender Vue.js 3?

Introducción a Vue.js

Hola mundo con Vue.js

Manejo de condiciones con Vue.js

Filtro de datos en Vue.js

Control de eventos con Vue.js

Manejo de formularios con Vue.js

Listar elementos con Vue.js

Cómo crear componentes con Vue.js

Creando un Single Page App con Vue.js

PlatziMusic con Vue.js

Incorporando Stylus y Pug

Configurando la API de Lastfm en Vue.js

Estructurando componentes en Vue.js

Actualizando datos en la interfaz con Vue.js

Agregando indicador de progreso a la aplicación

Enviando una aplicación con Vue.js a producción

Se acaba este curso ¿quieres seguir aprendiendo Vue.js?