什么是jsonp呢？
首先，因为ajax无法跨域，然后开发者就有所思考
其次，开发者发现， <script>标签的src属性是可以跨域的
把跨域服务器写成 调用本地的函数 ，回调数据回来不就好了？
json刚好被js支持（object）
调用跨域服务器上动态生成的js格式文件（不管是什么类型的地址，最终生成的返回值都是一段js代码）
这种获取远程数据的方式看起来非常像ajax，但其实并不一样
便于客户端使用数据，逐渐形成了一种非正式传输协议，人们把它称作JSONP。
传递一个callback参数给跨域服务端，然后跨域服务端返回数据时会将这个callback参数作为函数名来包裹住json数据即可。
具体的可以看一下这个链接 https://github.com/webmodules/jsonp
Installation
$ npm install jsonp
API
jsonp(url, opts, fn) //具体的url是访问地址， opts是配置， fn是回调
配置一般不写， 而回调有两个参数err, data 具体请看代码(应用场景vue)
import originJSONP from 'jsonp'
//封装一个jsonp的常规方法，参数分别是 url地址，data数据，option配置
export default function jsonp(url, data, option) {
//利用下面的函数 生成原生`jsonp`想要的url
//如果url末尾没有 ? 就加上 如果有就加连接符&
let url += ('?'.indexOf(url) < 0 ? '?' : '&') + prama(data)
originJSONP(url, option, (err, data) => { //返回一个promise对象封装
return new Promise((resolve, reject) => {
if(!err) {
resolve(data)
}else {
reject(err)
}
})
})
}
//将data拼接到url里
function prama(data) {
let url = ''
for(let k in data) {
//解决传输数据里有undefiend的问题
let value = data[k] !== undefined ? data[k] : ''
//拼接 注意value需要用这个函数解码
url += `&$(k)=$(encodeURIComponent(value))`
return url ? url.subString(1) : '' //去掉第一个 “&”符号
}
}
再来个上面的截图
jsonp.js
接下来， 我们假设访问的一个qq音乐的网站 想获取它的数据
需要一下参数，把固定的写到config.js里
config.js
再就可以将接口的方法写在一个文件里
recommend.js
于是我们就可以在
recommend.vue调用这个接口了
image.png
可以打印出qq音乐首页的所有数据了！ 大功告成~
