vue get的jsonp请求外部接口返回值是回调方法问题解决

chen_ai_tao

已于 2023-04-18 17:26:48 修改

阅读量871

点赞数

文章标签： vue.js javascript 前端

于 2023-04-18 16:58:25 首次发布

本文链接：https://blog.csdn.net/chen_ai_tao/article/details/130225680

版权

首言：最近开发过程中遇到对接第三方的系统接口情况，接口传的参数中要传个回调方法名，返回的值不是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使用

//1.安装vue-jsonp  
//npm install vue-jsonp -S
//2.全局引入
//import { VueJsonp } from 'vue-jsonp'
//Vue.use(VueJsonp)
//3.请求
this.$jsonp(url,{
     jsonpCallback:'callback',
 }).then((res)=>{

 }).catch(erroe=>{

 })

3、最后最重要的一步是在页面上挂载回调方法

mounted(){
    window['callback'] = (data)=>{
        //调用接口传的回调函数会在此触发
    }
    // 假设返回的为callbackFun.ajax_callback()
	  window['callbackFun'] = {
	    ajax_callback: function (res) {
	      //调用接口传的回调函数会在此触发
	    }
	  }
},