jsonp的运用（获取qq音乐首页数据）以及用Promise的封

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

谢谢观看~