使用 Axios 添加 JSONP 支持

在前端开发中，我们经常需要处理跨域请求。在某些情况下，如果后端不支持 CORS（跨域资源共享），我们又想获取外部API的数据时，JSONP（JSON with Padding）是一种常用的解决方案。虽然Axios本身不直接支持JSONP，但我们可以通过一些技巧来实现。

什么是 JSONP？

JSONP 是一种可以让网页从另一域获取数据的技术。它通过动态地添加一个<script>标签来请求数据，然后返回的数据作为JavaScript代码执行。这种方式可以绕过同源策略的限制。

使用 Axios 实现 JSONP

下面我们将通过 Axios 自定义一个JSONP请求的方法。

步骤1: 创建 JSONP 请求函数

我们可以封装一个函数，通过动态创建<script>标签的方式来实现JSONP请求。以下是示例代码：

function jsonp(url, params) {
    return new Promise((resolve, reject) => {
        // 创建一个唯一的回调函数名
        const callbackName = `jsonp_callback_${Math.random().toString(36).substr(2, 5)}`;
        params.callback = callbackName; // 将回调函数名传入请求参数
        
        const queryString = Object.keys(params)
            .map(key => `${encodeURIComponent(key)}=${encodeURIComponent(params[key])}`)
            .join('&');
        
        const script = document.createElement('script');
        script.src = `${url}?${queryString}`;
        
        window[callbackName] = function(data) {
            resolve(data);
            delete window[callbackName]; // 清理全局变量
            document.body.removeChild(script); // 移除script标签
        };
        
        script.onerror = function(error) {
            reject(error);
            delete window[callbackName];
            document.body.removeChild(script);
        };
        
        document.body.appendChild(script);
    });
}

步骤2: 使用 Axios 调用 JSONP

现在，我们可以使用上述jsonp函数与 Axios 配合来处理数据请求。例如，获取一个公共API的数据：

const url = ' // 示例API
const params = {
    param1: 'value1',
    param2: 'value2'
};

jsonp(url, params).then(data => {
    console.log('获取到的数据:', data);
}).catch(error => {
    console.error('请求错误:', error);
});

数据可视化示例—饼状图

为了更好地展示获取的数据，我们可能希望将其可视化。下面是一个使用 Mermaid 语法的饼状图示例，可以有效展示不同类别的数据占比：

pie
    title 数据占比
    "类别A": 30
    "类别B": 70

在实际应用中，我们可以联动上述请求的数据与该图表进行更新，实现动态可视化效果。

结论

通过上述的简单实现，我们可以看到，虽然Axios并不直接支持JSONP，但我们可以通过一些技巧来实现跨域请求。使用JSONP可以解决浏览器的同源限制，在处理数据时非常有效。然而，需要注意的是，JSONP存在安全风险，因为它的实现是不受控制的，任何站点都可以向你的应用发起请求。因此，在使用时应谨慎，确保来源可信。

希望本文能够对你理解和使用Axios进行JSONP请求提供帮助。如果你有任何问题，欢迎在评论区讨论！