jsop介绍
jsonp原理
jsonp发送到并不是一个ajax请求，它其实是创建一个动态script标签（script标签没有同源策略限制），script指向真实服务端地址，和普通的ajax地址的区别在于：在地址后面有一个参数（如：callback=a）,会在返回的数据里面调用a去包裹一个方法，包裹一段数据，相当于在前端执行a这个方法，但是前端是没有a这个方法的，所以在发送请求之前，在windows上去注册一个a方法，那么就可以在服务端返回方法a之前就可以在windwos上定义的a方法中获取数据了。
jsonp实现库API
jsonp(url,opts,fn)
- url (String) url to fetch
- opts (Object), optional
。param (String) name of the query string parameter to specify the callback (defaults to callback)
。timeout (Number) how long after a timeout error is emitted. 0 to disable (defaults to 60000)
。prefix (String) prefix for the global callback functions that handle jsonp responses (defaults to __jp)
。name (String) name of the global callback functions that handle jsonp responses (defaults to prefix + incremented counter) - fn callback
The callback is called with err, data parameters.
If it times out, the err will be an Error object whose message is Timeout.
Returns a function that, when called, will cancel the in-progress jsonp request (fn won't be called).
vue实现
packge.json配置
dependencies": {
"jsonp": "0.2.1"
}
jsonp封装(可在公共js中封装)
import originJsonp from 'jsonp'
export default function jsonp(url, data, option) {
url += (url.indexOf('?') < 0 ? '?' : '&') + param(data)
return new Promise((resolve, reject) => {
originJsonp(url, option, (err, data) => {
if (!err) {
resolve(data)
} else {
reject(err)
}
})
})
}
export function param(data) {
let url = ''
for (var k in data) {
let value = data[k] !== undefined ? data[k] : ''
url += '&' + k + '=' + encodeURIComponent(value)
}
return url ? url.substring(1) : ''
}
jsonp调用
- 公共参数配置
export const commonParams = {
g_tk: 1928093487,
inCharset: 'utf-8',
outCharset: 'utf-8',
notice: 0,
format: 'jsonp'
}
export const options = {
param: 'jsonpCallback'
}
export const ERR_OK = 0
