以下内容整理自《慕课网vue音乐app》
在上一节说到如何封装jsonp
这一节在上一节的基础上获取腾讯音乐的数据。
首先:
// 引入写好的jsonp
import jsonp from 'common/js/jsonp'
import { commonParams, options } from './config'
export function getRecommend () {
const url = 'https://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg'
const data = Object.assign({}, commonParams, {
platform: 'h5',
uin: 0,
needNewCode: 1
})
return jsonp(url, data, options)
}
在上图有一个config.js是什么呢?很简单:是QQ音乐不变的一些参数。单独拿出来是方便后期调用:如下
export const commonParams = {
g_tk: 5381,
inCharset: 'utf-8',
outCharset: 'utf-8',
notice: 0,
format: 'jsonp'
}
export const options = {
param: 'jsonpCallback'
}
export const ERR_OK = 0
<script>
import { getRecommend } from 'api/recommend'
import { ERR_OK } from 'api/config'
export default {
name: 'Recommend',
created () {
this._getRecommend()
// console.log(1)
},
methods: {
_getRecommend () {
getRecommend().then((res) => {
if (res.code === ERR_OK) {
console.log(res.data.slider)
}
})
}
}
}
</script>
以上涉及到assign的方法:
Object.assign({}, commonParams, {
platform: 'h5',
uin: 0,
needNewCode: 1
})
简单讲一下:
Object.assign方法用于对象的合并,将源对象( source )的所有可枚举属性,复制到目标对象( target )。
方法里第一个{ }是目标对象。
以上方法合并出来的结果是:
最终,拿到数据: