vue.js jsonp跨域详解

自己的随手笔记，分享给大家，如果有不足或者建议请大家多多指教，如果有问题请加 QQ(1445579000) 说明来意

jsonp 跨域  下列就以QQ音乐接口为例：

1.首先vue安装 jsonp

 

2.引入封装的jsonp.js文件

import JSONP from 'jsonp'

export default function jsonp(url, data, option) {
//  url中可能出现没有?的情况
  url += (url.indexOf('?') < 0 ? '?' : '&') + param(data)
//  使用promise方法进行回调
  return new Promise((resolve, reject) => {
    JSONP(url, option, (err, data) => {
      if (!err) {
        resolve(data)
      } else {
        reject(err)
      }
    })
  })
}

// 拼接url query params
function param(data) {    //  data是一个对象一般只有一层
  let url = ''
  for (let key in data) {
  //  为了防止data中值为undefined的情况
    let value = data[key] !== undefined ? data[key] : ''
  //  每一个键值对用&连接
    url += `&${key}=${encodeURIComponent(value)}`
  }
  //  去除url中的第一个&，以免重复
  return url ? url.substring(1) : ''
}

 

3.接口调用jsonp.js文件

 

4.在vue页面中调用请求接口