vue慕课网音乐项目手记：40-topList的歌曲列表的数据获取

QQ音乐歌曲列表原来的数据是ajax获取的，但是我们需要用jsonp来获取数据。
如下：
先写接口：

export function getMusicList (topid) {
  const url = 'https://c.y.qq.com/v8/fcg-bin/fcg_v8_toplist_cp.fcg'

  const data = Object.assign({}, commonParams, {
    g_tk: 1759887689,
    platform: 'h5',
    needNewCode: 1,
    tpl: 3,
    page: 'detail',
    type: 'top',
    topid,
    _: +new Date()
  })

  return jsonp(url, data, options)
}

然后到top-list页面抓取数据

_getMusicList () {
      if (!this.topList.id) {
        this.$router.push('/rank')
        return
      }
      getMusicList(this.topList.id).then((res) => {
        if (res.code === ERR_OK) {
          this.songs = this._normalizeSongs(res.songlist)
          console.log(this.songs[0].image)
        }
      })
    }

因为数据不是我们想要的格式，所以还要格式化一下：

_normalizeSongs (list) {
      let ret = []
      list.forEach((item) => {
        const MusicData = item.data
        if (MusicData.songid && MusicData.albummid) {
          ret.push(creatSong(MusicData))
        }
      })
      return ret
    }

这样数据就获取到了，然后把songs的数据传递给子组件就可以了。
然后，做一点小调整：把bgImage的图片换掉

bgImage () {
      if (this.songs.length) {
        return this.songs[0].image
      }
      return this.topList.picUrl
    },

但是这里，要注意的是判断里面要写this.songs.length.要不然拿不到图片的数据。
最后，如果在本页面刷新。拿不到id的话，返回上一级

if (!this.topList.id) {
        this.$router.push('/rank')
        return
      }