获取并封装歌手歌曲的数据

1.在api/song.js中发送jsonp请求来请求数据

import {commonParams} from './config'
import axios from 'axios'

export function getLyric(mid) {
  const url = '/api/lyric'

  const data = Object.assign({}, commonParams, {
    songmid: mid,
    platform: 'yqq',
    hostUin: 0,
    needNewCode: 0,
    categoryId: 10000000,
    pcachetime: +new Date(),
    format: 'json'
  })

  return axios.get(url, {
    params: data
  }).then((res) => {
    return Promise.resolve(res.data)
  })
}

2.封装api/common/js/song.js的song类，来获取想要的信息

// 格式化处理歌星的歌曲数据，将我们想要的数据封装成一个类，方便进行调用
export default class Song {
  constructor({id, mid, singer, name, album, duration, image, url}) {
    this.id = id
    this.mid = mid
    this.singer = singer
    this.name = name
    this.album = album
    this.duration = duration
    this.image = image
    this.url = url
  }
}


export function createSong(musicData){//创建一个歌曲的实例，得到的是一个歌星的歌曲信息
  return new Song({
    id: musicData.songid,
    mid: musicData.songmid,
    singer: filterSinger(musicData.singer),
    name: musicData.songname,
    album: musicData.albumname,
    duration: musicData.interval,
    image: `https://y.gtimg.cn/music/photo_new/T002R300x300M000${musicData.albummid}.jpg?max_age=2592000`,
    url: `http://ws.stream.qqmusic.qq.com/${musicData.songid}.m4a?fromtag=46`
  })
}

// 只有当点击歌星singer.vue页面才会跳转到歌曲页面，获得歌曲的信息，因此当没有歌星信息的时候，就让其跳转到singer.vue页面
function filterSinger(singer) {
  let ret = []
  if (!singer) {
    return ''
  }
  singer.forEach((s) => {
    ret.push(s.name)
  })
  return ret.join('/')
}

3.在sing-detail.vue中请求数据；

   _getDetail() {
        if (!this.singer.id) {
          this.$router.push('/singer')
          return
        }
        getSingerDetail(this.singer.id).then((res) => {
          if (res.code === ERR_OK) {
            console.log(res)
            this.songs = this._normalizeSongs(res.data.list)
            console.log(this.songs)
          }
        })
      },

4.引入封装的song类，并处理请求到的数据：

  _normalizeSongs(list){
        let ret= []
        list.forEach((item)=>{//这里遍历的是createSong里面的值，songmid和albumid是必传的；item就是遍历的value
          let {musicData} = item
          if(musicData.songmid && musicData.albumid){
            ret.push(createSong(musicData))//这里调用createSong,就不用每次都写一大堆；重复的代码；
          }
        })
        return ret;
      }

import {createSong} from '@/common/js/song'//注意：这里调用需要用对象的方式