vue ajax jsonp封装,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)

})

本文分享 CSDN - 冬天爱吃冰淇淋。

如有侵权，请联系 support@oschina.cn 删除。

本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。