请求协助：Yummly API调用实现及JSON与JSONP差异解析

没问题！我一步步帮你理清JSON和JSONP的核心区别，同时写出能直接运行的API调用代码——先把基础概念讲透，再上可复用的示例。

先搞懂：JSON vs JSONP 到底差在哪？ #

• JSON：就是纯结构化的数据格式（键值对、数组这类），浏览器有「跨域同源策略」限制，直接用普通GET请求拿不同域名的JSON会被拦截，除非目标API开启了CORS（跨域资源共享）。
• JSONP：是早年绕开跨域限制的“奇技淫巧”——它把JSON数据包装成一个函数调用（比如myCallback({...你的数据...})），因为浏览器允许加载跨域的JS脚本，所以通过动态创建<script>标签来获取，再提前定义好回调函数接收数据。不过现在Fetch + CORS是更现代、更安全的方案，只要API支持CORS就不用JSONP了。

Yummly API（一般通过RapidAPI提供）是支持CORS的，所以我们优先用Fetch + JSON的方式来实现。

可直接运行的HTML示例（Fetch调用Yummly API） #

首先你得先去Yummly的开发者平台（或RapidAPI）申请API密钥，拿到X-RapidAPI-Key和X-RapidAPI-Host这两个必填的请求头信息，然后替换下面代码里的占位符：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Yummly API 测试</title>
</head>
<body>
    <button id="getRecipes">点击获取热门食谱</button>

    <script>
        // 替换成你自己的API密钥和Host
        const MY_API_KEY = '你的RapidAPI密钥';
        const API_HOST = 'yummly2.p.rapidapi.com';

        // 给按钮绑定点击事件
        document.getElementById('getRecipes').addEventListener('click', async () => {
            try {
                // 发起Fetch请求
                const response = await fetch(`https://${API_HOST}/feeds/list?limit=5&start=0&tag=list.recipe.popular`, {
                    method: 'GET',
                    headers: {
                        'X-RapidAPI-Key': MY_API_KEY,
                        'X-RapidAPI-Host': API_HOST
                    }
                });

                // 检查请求是否成功（HTTP状态码200-299）
                if (!response.ok) {
                    throw new Error(`请求失败: ${response.status} ${response.statusText}`);
                }

                // 把返回的JSON字符串解析成JS对象
                const recipeData = await response.json();
                
                // 打印完整数据到控制台
                console.log('Yummly API返回的完整数据:', recipeData);
                // 打印第一个食谱的名称，方便你快速看到效果
                console.log('第一个热门食谱:', recipeData.feed[0].display.displayName);
            } catch (error) {
                // 捕获并打印错误信息
                console.error('调用API时出错:', error);
            }
        });
    </script>
</body>
</html>

代码关键点说明： #

• 用async/await让异步代码更易读，你也可以用.then()链式调用的写法，效果是一样的。
• 必须携带X-RapidAPI-Key和X-RapidAPI-Host请求头，这是Yummly API的认证要求，没有的话会返回权限错误。
• response.json()就是把API返回的JSON格式字符串转换成JS对象，这时候你就能直接操作里面的字段了。

（可选）JSONP方式的对比示例 #

如果想直观感受JSONP的工作方式，这里也给你写一个示例（同样需要替换API密钥）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Yummly JSONP 测试</title>
</head>
<body>
    <button id="getWithJSONP">用JSONP获取食谱</button>

    <script>
        // 提前定义JSONP的回调函数，API返回的脚本会调用这个函数
        function handleRecipeData(data) {
            console.log('JSONP返回的数据:', data);
            console.log('第一个食谱名称:', data.feed[0].display.displayName);
        }

        document.getElementById('getWithJSONP').addEventListener('click', () => {
            // 动态创建script标签
            const scriptTag = document.createElement('script');
            // 注意URL里要加`callback=handleRecipeData`参数，告诉API返回指定函数调用的格式
            scriptTag.src = `https://yummly2.p.rapidapi.com/feeds/list?limit=5&start=0&tag=list.recipe.popular&X-RapidAPI-Key=你的密钥&X-RapidAPI-Host=yummly2.p.rapidapi.com&callback=handleRecipeData`;
            
            // 把script标签加到页面里，浏览器会自动加载并执行脚本
            document.body.appendChild(scriptTag);

            // 加载完成后移除script标签，避免重复加载
            scriptTag.onload = () => scriptTag.remove();
        });
    </script>
</body>
</html>

JSONP的局限性： #

• 只能用GET请求，没法发送POST等其他类型的请求。
• 安全性较低，因为加载的是外部JS脚本，如果源被篡改，可能会执行恶意代码。
• 错误处理很麻烦，不像Fetch可以用try/catch直接捕获。

最后验证步骤： #

1. 替换代码里的API密钥为你自己的。
2. 保存HTML文件，用浏览器打开。
3. 打开浏览器的开发者工具（按F12），切换到「Console」标签。
4. 点击页面上的按钮，就能看到控制台打印的API数据了。

这样你就能直观感受到：用Fetch获取的是纯JSON数据，直接解析成对象；而JSONP是通过回调函数接收被包装过的数据。

内容的提问来源于stack exchange，提问作者Fofaster