在项目中我们经常要对一些第三方接口进行跨域访问来获取数据,对jsonp的封装可以加强代码的复用,可维护性。
code:
import JSONP from 'jsonp'
export default function jsonp(url, data, option) {
// url中可能出现没有?的情况
url += (url.indexOf('?') < 0 ? '?' : '&') + param(data)
// 使用promise方法进行回调
return new Promise((resolve, reject) => {
JSONP(url, option, (err, data) => {
if (!err) {
resolve(data)
} else {
reject(err)
}
})
})
}
// 拼接url query params
function param(data) { // data是一个对象一般只有一层
let url = ''
for (let key in data) {
// 为了防止data中值为undefined的情况
let value = data[key] !== undefined ? data[key] : ''
// 每一个键值对用&连接
url += `&${key}=${encodeURIComponent(value)}`
}
// 去除url中的第一个&,以免重复
return url ? url.substring(1) : ''
}