vue webapp之music（三）轮播图数据分析

此次开发推荐页面

1.jsonp

用来解决跨域问题，它的原理如下：

动态创建script标签（没有同源限制，可以跨域），指向请求服务端的地址。具体原理可以查看https://blog.csdn.net/u011897301/article/details/52679486

2.安装jsonp

cnpm install jsonp

3.对jsonp进行封装

1>新建jsonp.js,并编写相应的代码

以下是jsonp的封装代码

import originJsonp from 'jsonp'

//对外暴露一个方法
export default function jsonp(url, data, option) {
  //判断url中是否有？，如有有则后面参数以&拼接，否则第一个以?拼接
  url += (url.indexOf('?') < 0 ? '?' : '&') + param(data)
  return new Promise((resolve, reject) => {
    //resolve  成功调用   reject失败调用
    originJsonp(url, option, (err, data) => {
      if (!err) {
        resolve(data)
      } else {
        reject(err)
      }
    })
  })
}

//url需要拼接参数调用的方法
function param(data) {
  let url = ''
  for(var k in data){
    let value = data[k] !== undefined ? data[k] : ''
    url += `&${k}=${encodeURIComponent(value)}`
  }
  return url ? url.substring(1) : ''
}