首言:最近开发过程中遇到对接第三方的系统接口情况,接口传的参数中要传个回调方法名,返回的值不是json数据,而是类似于callback({data:1})的方法调用。普通的axios请求会出现callback不存在,然后请求超时。现记录下解决方法。
1、首先调用第三方接口前端会出现跨域问题,通过封装jsonp方法进行处理,或者使用vue-jsonp组件,具体看2.2 vue-jsonp使用
jsonp(setting){
setting.data = setting.data || {}
setting.key = setting.key||'callback'
setting.callback = setting.callback||function(){}
setting.data[setting.key] = '__onGetData__'
window.__onGetData__ = function(data){
setting.callback (data);
}
var script = document.createElement('script')
var query = []
for(var key in setting.data){
query.push( key + '='+ encodeURIComponent(setting.data[key]) )
}
script.src = setting.url + '?' + query.join('&')
document.head.appendChild(script)
document.head.removeChild(script)
},
2、在需要调用第三方接口的方法中调用封装的jsonp方法
tokenIsSet(){
this.jsonp({
url: url,
key: 'callback',
data: {
jsonpCallback:'callback',
},
callback: function(ret){
}
})
}
2.2 vue-jsonp使用
this.$jsonp(url,{
jsonpCallback:'callback',
}).then((res)=>{
}).catch(erroe=>{
})
3、最后最重要的一步是在页面上挂载回调方法
mounted(){
window['callback'] = (data)=>{
}
window['callbackFun'] = {
ajax_callback: function (res) {
}
}
},