vue开发中使用和封装jsonp插件

简单使用jsonp插件

1.安装

npm install jsonp

2.导入

import jsonp from 'jsonp'

3.使用jsonp

jsonp(url,options,(err,res) => {
	console.log(res)
})

url：就是请求的地址
options：一个对象

• param：用来指定接收回调函数名称的变量（默认是callback）
• timeout：发出超时错误的事件。0禁用（默认是60000）
• prefix：jsonp响应的全局回调函数的前缀（默认的__jp）
• name：jsonp响应全局回调函数的名称（默认是prefix+递增计数器）

回调函数：成功或者失败就调用

• err：错误对象
• res：成功数据对象

例子：请求一下地址：https://c.y.qq.com/v8/fcg-bin/fcg_v8_singer_track_cp.fcg?g_tk=1928093487&inCharset=utf-8&outCharset=utf-8&notice=0&format=jsonp&hostUin=0&needNewCode=0&platform=yqq&order=listen&begin=0&num=80&songstatus=1&singermid=002J4UUk29y8BY

const url = 'https://c.y.qq.com/v8/fcg-bin/fcg_v8_singer_track_cp.fcg?g_tk=1928093487&inCharset=utf-8&outCharset=utf-8&notice=0&format=jsonp&hostUin=0&needNewCode=0&platform=yqq&order=listen&begin=0&num=80&songstatus=1&singermid=002J4UUk29y8BY'
jsonp(url,{param: 'jsonpCallback'},(err,res) => {
	if(err) {
		return console.log(err)
	}
	console.log(res)
})

param: ‘jsonpcallback’，是由于后端要解析变量jsonpcallback获取回调函数的名称，所以我们要传后端能解析的变量名

封装jsonp

除了options中的param属性是根据后端的需求变化外，其他的基本不变

import originJsonp from 'jsonp'

export default function jsonp (url, params) {
    url += url.indexOf('?') > 0 ? '&' : '?'
    url += formatParams(params)
    console.log(url)
    return new Promise((resolve, reject) => {
        originJsonp(url, {
            param: 'jsonpCallback' // 根据后端的需求变化
        }, (err, res) => {
            if (err) {
                return reject(err)
            }
            return resolve(res)
        })
    })
}

// 拼接传过来的参数，就对象形式弄成：a=1&b=3这样
function formatParams (data) {
    let ret = ''
    Object.keys(data).forEach(item => {
        ret += data[item] === undefined ? '' : `&${item}=${data[item]}`
    })
    return ret ? ret.substring(1) : ''
}

调用：

jsonp('https://c.y.qq.com/v8/fcg-bin/fcg_v8_singer_track_cp.fcg',{
        g_tk: 1928093487,
        inCharset: 'utf-8',
        outCharset: 'utf-8',
        notice: 0,
        format: 'jsonp',
        hostUin: 0,
        needNewCode: 0,
        platform: 'yqq',
        order: 'listen',
        begin: 0,
        num: 80,
        songstatus: 1,
        singermid: '002J4UUk29y8BY'
}).then(res=>{
	console.log(res)
})