vue webapp之music（四）jsonp的应用+轮播图数据抓取

获取数据的时候通常都会封装一些方法，之前对封装方法一直很抵触，现在越来越觉得封装方法的重要性，所以面向对象的思想一定要有。不间断的更新，强迫自己不断的学习，从学习中不断的提升自己的能力。

废话不多说，直接开始撸代码

1.通常获取封装的方法都是放在api文件夹下面

2.qq音乐数据接口   https://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg

3.将参数进行统一的配置

建立cofig.js

export const commmonParams = {
  g_tk: 5381,
  inCharset: 'utf-8',
  outCharset: 'utf-8',
  notice: 0,
  format: 'jsonp'
}
//(jsonpCallback: jsonp1)与后端协议返回的名称
export const options = {
  param: 'jsonpCallback'
}
//jsonp1({"code":0,"subcode":0,"ret":1,"ip":"101.93.146.41:100.113.48.27:10.223.148.45"})
//"code":0表示成功
export const ERR_OK = 0

4.在recommend写请求数据的代码

import jsonp from 'common/js/jsonp'
import {commmonParams, options} from './config'

export function getRecommend() {
  const url = 'https://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg'
  const data = Object.assign({}, commmonParams, {
    platform: 'h5',
    uin: 0,
    needNewCode: 1
  })

  return jsonp(url, data, options)
}

5.封装好接口之后，接下来就是在recommend组件进行使用

<script>
import {getRecommend} from 'api/recommend'
import {ERR_OK} from 'api/config'
export default {
  created() {
    this._getRecommend()
  },
  methods: {
    _getRecommend() {
      getRecommend().then((res) => {
        console.log(res)
        if (res.code === ERR_OK) {
          console.log(res.data.slider)
        }
      })
    }
  }
}
</script>