vue慕課網音樂專案手記:32-如何獲取歌詞的資料,並解析jsonp的格式為json的格式
阿新 • • 發佈:2019-01-10
首先:在qq音樂的官網,能看到如下的歌詞資料
這是一個jsonp的資料,但是官方對它做了一些加密,所以還是要通過node去強制改變請求頭。
新建一個song.js
import { commonParams } from './config'
import axios from 'axios'
export function getLyric (mid) {
const url = '/api/lyric'
const data = Object.assign({}, commonParams, {
g_tk: 1930664565,
pcachetime: +new Date(),
這裡是一段時間戳
hostUin: 0,
format: 'json',
因為是請求本地的介面,所以format是json
platform: 'yqq',
needNewCode: 0,
songmid: mid
})
return axios.get(url, {
params: data
}).then((res) => {
return Promise.resolve(res.data)
})
}
然後在node中去強行更改請求頭app.get('/api/lyric', function (req, res) { var url = 'https://szc.y.qq.com/lyric/fcgi-bin/fcg_query_lyric_new.fcg' axios.get(url, { headers: { referer: 'https://y.qq.com/', host: 'c.y.qq.com' }, params: req.query }).then((response) => { res.json(response.data) }).catch((e) => { console.log(e) }) })
然後獲取資料的方法封裝到class類中:
getLyric () {
getLyric(this.mid).then((res) => {
if (res.code === ERR_OK) {
this.lyric = res.lyric
console.log(this.lyric)
}
})
}
因為請求的仍然是一個jsonp,所以要在後端做一點小小的處理:
以上是通過正則表示式把獲取到的jsonp檔案轉換成json格式var ret = response.data if (typeof ret === 'string') { var reg = /^\w+\(({[^()]+})\)$/ // 以單詞a-z,A-Z開頭,一個或多個 // \(\)轉義括號以()開頭結尾 // ()是用來分組 // 【^()】不以左括號/右括號的字元+多個 // {}大括號也要匹配到 var matches = ret.match(reg) if (matches) { ret = JSON.parse(matches[1]) // 對匹配到的分組的內容進行轉換 } }