播放器歌词数据抓取

在api中写一个song.js用于抓取歌词数据。

通过查看qq音乐的js请求，可以得到歌词数据的url，由于请求头header中需要referer为为'https://c.y.qq.com/'，host为'c.y.qq.com'。这时就不能直接使用jsonp，需要在服务端写一个方法来改变请求头。

1.在dev-server.js中定义方法改变请求头

var apiRoutes = express.Router()  //得到Router

apiRoutes.get('/getLyric', function(req, res) {

      var url = 'https://c.y.qq.com/lyric/fcgi-bin/fcg_query_lyric_new.fcg'

      axios.get(url, {

             headers: {

                        referer: 'https://c.y.qq.com/',

                         host: 'c.y.qq.com'

            },

            arams: req.query

       }).then((response) => {

              // 这里的response.data为字符串，需要进行处理，得到json

             var ret = response.data

            // ret： "MusicJsonCallback({\"retcode\":0,\"code\":0,\"subcode\":0,\"lyric\":\"W3R......T\",\"trans\":\"\"})"   

          if (typeof ret === 'string') {

                 var reg = /^\w+\(({[^()]+})\)$/

                 var matches = ret.match(reg)

                if (matches) {

                    ret = JSON.parse(matches[1])

               }

     }

            // res.json()发送一个JSON应答,参数必须为json

           res.json(ret)

     }).catch((e) => {

           console.log(e)

     })

})

app.use('/api', apiRoutes)

2.在src中的api下写song.js，访问dev-server.js中的getLyric方法，抓取数据

使用axios.get（）方法进行访问，get方法有两个参数：

① url   //这里的url为dev-server.js中的getLyric，即‘api/getLyric’

② params //抓取歌词数据需要的参数

axios支持Promise的api,可以使用then来定义回调函数，song.js中的返回如下：

return axios.get(url, {

          params: data

     }).then((response) => {

         // response的结构包括：config,headers,request,data,status,statusText

        // 其中response.data为dev-server.js中res.json发送的json数据

         return Promise.resolve(response.data)

})

这样得到就抓取到了歌词数据，但是我们要在项目中使用它，则需要将它加入到song类中

3.在song的class中，定义getLyric方法

getLyric() {

     return new Promise((resolve, reject) => {

              getLyric(this.mid).then((res) => {

                       if (res.retcode === ERR_OK) {

                            this.lyric = res.lyric

                            console.log(this.lyric)

                     }

            })

    })

}

在getLyric方法中，调用了api/song.js中的getLyric方法，该方法返回 Promise.resovle(data),其中Promise.resolve()方法的作用是将现有的对象转为Promise对象, 当参数不是具有then方法的对象，或者根本不是对象时，Promise.resolve方法返回一个新的Promise对象，状态为resolved

因此，在class Song中new Promise中，getLyric方法返回的promise对象状态为resolved，触发then，将lyric赋值给Song对象的lyric属性