4 vue音乐项目(某课)Jsonp封装

项目的数据来自于qq音乐

1.下图是QQ音乐的network

2、jsonp插件的使用

首先：npm i jsonp --save

其次：建立一个通用的js方法

import originJSONP from 'jsonp' // 引入jsonp
 
 // 1.向外暴露一个jsonp，函数返回一个promise里面调用原始jsonp
 // 2.(url, data, option) 参数1：合并后的url，参数2：选项， 参数3：返回一个回调函数，如  果err为null，则说明成功
 
export default function jsonp (url, data, option) {
  // 判断是否有？，有就是有参数就返回&，再拼接上param（data）的方法
  url += (url.indexOf('?') < 0 ? '?' : '&') + param(data)
  
  return new Promise ((resolve, reject) => {
  
    originJSONP(url, option, (err, data) => {
      if (!err) {
        resolve(data)// 成功输出
      } else {
        reject(err)//抛出错误
      }
    })
  })
}
 
 // 合并Url
function param(data) {
  let url = ''// 空Url
  for (var k in data) {
    let value = data[k] !== undefined ? data[k] : '' // 判断如果data有值，将用和k对应的值赋给value
    url += `&${k}=${encodeURIComponent(value)}` // url拼接参数
  }
  return url ? url.substring(1) : '' // 如果有url就去除第一个字符&，输出url
  }