vue使用jsonp抓取qq音乐数据的方法

下面是详细讲解vue使用jsonp抓取qq音乐数据的方法的完整攻略。

步骤一：了解JSONP原理

JSONP是一种数据传输方式，它的原理是利用html的script标签没有跨域限制这一特性，在同一个页面中，通过向服务器请求一个jsonp类型的文件，服务器解析后返回数据，并在返回数据中添加一个函数调用语句，浏览器接收到响应文件后自动执行函数，从而实现了跨域访问数据，也就是实现了跨域JSON数据的传输。

步骤二：安装jsonp库

我们需要安装jsonp库来帮助我们实现JSONP请求，这里使用npm方式安装：

npm install jsonp --save

步骤三：使用jsonp库

在vue项目中，我们需要在组件的mounted（或created）钩子函数中发起JSONP请求，并在回调函数中处理返回的数据。下面提供两个示例：

示例一：获取QQ音乐热门歌单

import jsonp from 'jsonp'

export default {
  name: 'HotSongList',
  data () {
    return {
      hotSongList: [] //存储热门歌单的数组
    }
  },
  mounted () {
    const url = 'https://u.y.qq.com/cgi-bin/musics.fcg?-=getUCGI1869823758272879&g_tk=5381&jsonpCallback=getUCGI1869823758272879&loginUin=0&hostUin=0&format=jsonp&inCharset=utf8&outCharset=utf-8¬ice=0&platform=yqq.json&needNewCode=0&data=%7B%22category%22%3A%22playlist%22%2C%22sort%22%3A%220%22%2C%22sin%22%3A%220%22%2C%22ein%22%3A%220%22%7D'
    jsonp(url, {param: 'jsonpCallback'}, (err, data) => {
      if (err) {
        console.error(err)
      } else {
        this.handleData(data)
      }
    })
  },
  methods: {
    handleData (data) {
      this.hotSongList = data.data.list
    }
  }
}

示例二：获取QQ音乐歌曲信息

import jsonp from 'jsonp'

export default {
  name: 'SongInfo',
  data () {
    return {
      songInfo: {} //存储歌曲信息的对象
    }
  },
  mounted () {
    const url = 'https://c.y.qq.com/v8/fcg-bin/fcg_play_single_song.fcg?format=jsonp&songid=109739124&platform=yqq.json&jsonpCallback=SongInfoCallback&loginUin=0&hostUin=0&needNewCode=0'
    jsonp(url, {name: 'SongInfoCallback'}, (err, data) => {
      if (err) {
        console.error(err)
      } else {
        this.handleData(data)
      }
    })
  },
  methods: {
    handleData (data) {
      this.songInfo = data.data[0]
    }
  }
}

以上就是使用Vue实现JSONP抓取QQ音乐数据的方法，可以根据实际需求来进行相应的配置和调整。