ajax获取qq音乐源码,jsonp的运用（获取qq音乐首页数据）以及用Promise的封装

什么是jsonp呢？

首先，因为ajax无法跨域，然后开发者就有所思考

其次，开发者发现， 标签的src属性是可以跨域的

把跨域服务器写成 调用本地的函数 ，回调数据回来不就好了？

json刚好被js支持(object)

调用跨域服务器上动态生成的js格式文件(不管是什么类型的地址，最终生成的返回值都是一段js代码)

这种获取远程数据的方式看起来非常像ajax，但其实并不一样

便于客户端使用数据，逐渐形成了一种非正式传输协议，人们把它称作JSONP。

传递一个callback参数给跨域服务端，然后跨域服务端返回数据时会将这个callback参数作为函数名来包裹住json数据即可。

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音乐首页的所有数据了！ 大功告成~

谢谢观看~