vue-music (2) jsonp 及jsonp第三方插件的使用

jsonp
发送的不是ajax，而是script标签，因为script不受同源策略影响，里面的src指向服务端地址，地址后跟着一个参数：callback
前端在发送请求之前在windows注册一个jsonp1事件，请求的数据包裹在jsonp1中，在调用jsonp1的数据渲染dom等。

使用第三方插件： jsonp

import OrignJsonp from 'jsonp'
export default function jsonp (url, data, options){ // 向外 暴露 一个函数
    url += (url.indexof('?') < 0 ? '?' : '&' ) + param(data) // 有没有？，没有就加上，有就加&
    return new Promise((resolve, reject) => {
        OrignJsonp(url, options, (err, data) => {
            if (!err) {
                resolve(data)
            } else {
                reject(err)
            }
        }
    }
}
function param(data) {
    let url = ''
    for(var k in data){
        let value = data[k] !== undefind ? : data[k] : '' // 如果有data,则value等于data中的值
        url += `&${k}=${encodeURIComponent(value)}` // 拼接url
    }
    return url ？ url.substring(1) : '' // 去掉第一个 & 符号
}

封装的jsonp函数的使用 以recommend页面数据为例

export function getRecommend (){
    const url = 'https://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg'
    const data = Object.assign({}, {
        platform: 'h5',
        uin: 0,
        needNewCode: 1
        g_tk: 5381,
        format: 'json',
        inCharset: 'utf-8',
        outCharset: 'utf-8',
        notice: 0
    })
    return jsonp(url, data, option) // 
}
export const option = {
  param: 'jsonpCallback' // qq音乐的option： callback
}

之后就可以在相关页面中调用getRecommend 方程，得到相关数据

import {getRecommend} from 'common/js/recommend' // **引入方程**
created(){
    this._getRecommend() // dom渲染之前就执行此内置函数，获取数据
}
methods: {
    _getRecommend(){
        getRecommend().then((res) => {
            if (res.code === ERR_OK){ // 语义化 ERR_OK = 0  这个根据目标网站来设定具体的res.code返回值。 QQ音乐的返回值是0
                return res.data.solid // 一般打印res之后寻找需要的数据
            }
        }
    }
}

关于Object.assign()
Object.assign({}, {
a: ‘111’,
b: ‘222’
})
该方法用于对象的合并，将源对象（ source ）的所有可枚举属性，复制到目标对象（ target ）