以下内容整理自《慕课网vue音乐app》
这是一段坎坷的过程。
首先对slider部分做两个优化:
1、使用keepalive保存页面的缓存
2、当页面切走的时候,组件会调用destroyed来销毁实例。所以在这个时候要清除定时器,这是一个好的变成习惯,利于内存的释放。
现在正式抓取数据:
通过上图能看到,qq音乐通过设置了refer和host来保护接口。
那么怎么才能获取到数据呢?
进入build==>webpack.dev.conf.js
const express = require('express')
const axios = require('axios')
const app = express()
var apiRoutes = express.Router()
app.use('/api', apiRoutes)
before(app) {
app.get('/api/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/portal/playlist.html'
referer: 'https://y.qq.com/',
host: 'c.y.qq.com'
},
params: req.query
}).then((response) => {
res.json(response.data)
}).catch((e) => {
console.log(e)
})
})
},
export function getDiscList () {
const url = '/api/getDiscList'
const data = Object.assign({}, commonParams, {
rnd: Math.random(),
picmid: 1,
loginUin: 0,
hostUin: 0,
notice: 0,
platform: 'yqq',
needNewCode: 0,
categoryId: 10000000,
sortId: 5,
sin: 0,
ein: 29,
format: 'json'
})
return axios.get(url, {
params: data
}).then((res) => {
return Promise.resolve(res.data)
})
}
Promise.resolve(value)
方法返回一个以给定值解析后的Promise对象。但如果这个值是个thenable(即带有then方法),返回的promise会“跟随”这个thenable的对象,采用它的最终状态(指resolved/rejected/pending/settled);如果传入的value本身就是promise对象,则该对象作为Promise.resolve方法的返回值返回;否则以该值为成功状态返回promise对象。