vue3中实现jsonp请求的几种方式

今天在调取一个第三方api时，使用axios发请求，浏览器爆cros跨域操作，仔细看文档，才发现需要用到jsonp请求。

众所周知，axios默认是不能发起jsonp请求的，于是，第一时间想到了jquery，但是考虑到jquery的包体积较大，还是想着尽可能选择一个较为优化的方案。这里对比的方案有：vue-jsonp、jquery、jsonp以及 axios-jsonp四款插件。

一、jquery

首先，使用jquery对接口进行测试，毕竟在vue之前，我们几乎都使用过jquery。

使用jquery顺利获取到数据，代码如下：

import $ from 'jquery'
$.ajax({
    url:'https://api.domain.com/v1/',
    type: 'GET',
    dataType: 'jsonp',
    data:{

        ......

    },
    success:(res)=>{
        console.log(res)
    }
})

但是不得不说，如果我们仅仅为了一个jsonp就引入整个jquery，多多少少还是有些大材小用，jquery中八九成的内容可都是关于dom操作的。

二、vue-jsonp  

上次维护：3年前 体积：11.4KB

很多人反馈vue-jsonp在vue3中不能使用，经过测试，其实不要按其文档去全局引入，只在需要用到的页面，引入jsonp即可。

也可以达到预期目的。

import {jsonp} from "vue-jsonp";
jsonp('https://api.domain.com/v1/',{
    ......
}).then(res=>{
    console.log(res)
}).catch(err=>{
    console.log(err)
})

这款插件，好是好，但是上次维护还是在三年以前，因此还是再继续寻找一番，如果再无合适的包，也就用这款了。

三、jsonp  

上次维护：7年前

在npmjs库宗搜索，我们发现了有直接的jsonp库，使用 npm i jsonp 下载安装，

这款库，坑比较多，首先，他的参数键名为param（单数），其次，他的param要求是字符串，因此，我们将参数转换为String类型，但是浏览器虽然不报cros错误了，又开始报crob错误。

const param = {
    ......
};
const  queryString = Object.keys(param).map(key => key + '=' + param[key]).join('&');

最终代码如下：

jsonp('https://api.domain.com/v1/', {
    param: queryString,
    timeout: 2000,
}, (err, data) => {
    if (err) {
        console.log(err)
    } else {
        console.log(data);
    }
})

但是如果换做如下写法，则能正常运行：

jsonp('https://api.domain.com/v1/?'+queryString,(err,data)=>{
        if (err){
            console.log(err)
        }else{
            console.log(data);
        }
    })

四、axios-jsonp  

上次维护：4年前，体积：5.15KB

最后，在查询资料时，发现一款名叫axios-jsonp的插件，官方说明，大概意思就是让axios-jsonp，其实说白了也就是axios的一款适配器，正好我们的项目都安装了axios，于是果断下载尝试，发现也很好用。

import axios from "axios";
import jsonp from 'axios-jsonp';
axios.get('https://api.domain.com/v1/',{
    params:{
        ......
    },
    adapter:jsonp
}).then(res=>{
    console.log(res)
}).catch(err=>{
    console.log(err)
})

美中不足的时，这款插件上次维护时间是4年以前，不过考虑其体积小，我们最后还是决定使用axios-jsonp这款axios的适配器插件。

五、自己编写jsonp实现

其实在网上，看到有很多人确实是这么做的，有时间的伙伴可以自行尝试。

如果您在解决vue3中进行jsonp请求时，有什么好的解决方案，也欢迎分享给我们，大家一起进步。