Vue音乐播放器 -- 轮播图数据获取

轮播图采用线上数据，需要利用jsonp解决跨域问题。

为了保证用户访问的安全，现代浏览器使用了同源策略。

jsonp原理：jsonp发送的并不是ajax请求，而是动态创建script标签（script标签没有同源限制），将src指向请求服务器端的地址，服务端不再返回JSON格式的数据，而是返回一段调用某个函数的js代码（callback = a()包裹一段数据，然后在前端执行，所以在发送请求之前需要注册这个a() 方法）

安装jsonp：

$ npm install jsonp

API：

jsonp(url, opts, fn)

fn 表示回调函数，通常封装成promise方法

1. 封装jsonp：（创建jsonp.js）

import originJsonp from 'jsonp'  //引入jsonp

export default function jsonp(url, data, option) {
  url += (url.indexOf('?') < 0 ? '?' : '&') + param(data)    //没有问号就添加一个，有则添加&
  return new Promise((resolve, reject) => {
    originJsonp(url, option, (err, data) => {
      if (!err) {
        resolve(data)
      } else {
        reject(err)
      }
    })
  })
}

data拼接到url中：

export function param(data) {
  let url = ''
  for (var k in data) {
    let value = data[k] !== undefined ? data[k] : ''       //不是undefined就添加
    url += `&${k}=${encodeURIComponent(value)}`
  }
  return url ? url.substring(1) : ''  //除了第一个&符号
}

encodeURIComponent： encodeURIComponent() 函数可把字符串作为 URI 组件进行编码。该方法不会对 ASCII 字母和数字进行编码，也不会对这些 ASCII 标点符号进行编码： - _ . ! ~ * ' ( ) 。

2. 抓取轮播图数据

src/api/recommend.js：获取数据的方法

import jsonp from 'common/js/jsonp'                //导入封装好的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)         //调用封装好jsonp方法
}

src/api/config.js：设置公共配置（每个url中都存在）

export const commonParams = {    //通用参数
  g_tk: 5381,
  inCharset: 'utf-8',
  outCharset: 'utf-8',
  notice: 0,
  format: 'jsonp'
}

export const options = {         //通用options
  param: 'jsonpCallback'
}

export const ERR_OK = 0        //接口正确返回值为0

3. recommend.vue 组件中使用数据

import {getRecommend} from 'api/recommend'     //导入方法，利用jsonp获取数据
import {ERR_OK} from 'api/config'

export default {
  created() {
    this._getRecommend()
  },
  methods: {
    _getRecommend() {
      getRecommend().then((res) => {     //getRecommend方法返回的是promise，所以then() 就能够获取数据
        if (res.code === ERR_OK) {         //如果正确返回，则获取数据
          this.recommends = res.data.slider 
        }
      })
    },
}

Vue音乐播放器 -- 轮播图数据获取

猜你喜欢