在QQ音樂api接口有時候不能直接通過Jsonp訪問,可通過后端代理獲取,這里是通過axios獲取
這里是: axios GitHub地址,具體可訪問學習,本文僅記錄Vue2.x 通過后端接口代理方法獲取PC端推薦歌單。
1. npm install axios -S
2. build/webpack.dev.conf.js文件
// 開始引入 axios
const axios = require('axios')
// devServer 里添加
before(app) {
app.get('/getDiscList', function (req, res) {
var url = 'https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg'
axios.get(url, {
headers: {
referer: 'https://y.qq.com/'
},
params: req.query
}).then((response) => {
res.json(response.data)
}).catch((e) => {
console.log(e)
})
})
}
3. 在api里的js文件里:將方法里的url替換成步驟2里自定義的接口,即 '/getDiscList',再通過axios獲取返回的數(shù)據(jù)。
// 文件路徑:api/recommend
export function getDiscList() {
const url = '/getDiscList'
const data = Object.assign({}, commonParams, {
platform: 'yqq',
picmid: 1,
hostUin: 0,
sin: 0,
ein: 29,
sortId: 5,
needNewCode: 0,
categoryId: 10000000,
rnd: Math.random(),
format: 'json'
})
return axios.get(url, {
params: data
}).then((res) => {
return Promise.resolve(res.data)
})
}
4. 組件里的調(diào)用
import {getDiscList} from 'api/recommend'
export default {
data() {
return {
discList: []
}
},
created() {
this._getDiscList()
},
methods: {
_getDiscList() {
getDiscList().then((res) => {
if (res.code === ERR_OK) {
// console.log(res.data.list)
this.discList = res.data.list
}
})
}
}
}