vue_music:JSONP

在获取qq音乐的某些数据的时候，经常用到JSONP，如下图

JSONP：不是Ajax请求，而是网页通过添加一个<script>元素，利用src天然跨域的特性，向服务器请求JSON数据，这种做法不受同源政策限制，但是只是适合GET请求方式
在此项目中我们使用插件JSONP

1.介绍JSONP插件

2.创建公共方法jsonp.js

//导入安装的jsonp插件
import originJSONP from 'jsonp'

//暴漏一个公共方法
export default function jsonp(url, data, option) {
  url += (url.indexOf('?') < 0 ? '?' : '&') + param(data)
  return new Promise((resolve, reject) => {
    //参照介绍JSONP,调用原生的JSONP方法
    originJSONP(url, option, (err, data) => {
      if (!err) {
        resolve(data)
      } else {
        reject(err)
      }
    })
  })
}
//序列化参数
function param(data) {
  let url = ''
  for (var k in data) {
    let value = data[k] !== undefined ? data[k] : ''
    //encodeURIComponent对url中的字符进行编码
    //进行编码是因为Url中有些字符会引起歧义
    url += `&${k}=${encodeURIComponent(value)}`
  }
  return url ? url.substring(1) : ''
}

3.调用公共方法示例

如何调用方法？
例如在获取歌曲列表的时候singer.js

//导入公共方法
import jsonp from 'common/js/jsonp'

export function getSingerList() {
  const url = 'https://c.y.qq.com/v8/fcg-bin/v8.fcg'

  const data = Object.assign({}, commonParams(不用考虑), {
    channel: 'singer',
    ....
  })
  //options = {param: 'jsonpCallback'}
  //在介绍JSONP的时候param:查询字符串参数的名称来指定回调,所以为jsonpCallback
  return jsonp(url, data, options)
}