javascript - iTunes Search Api 问题 - 未捕获( promise )SyntaxError : Unexpected end of input

Question

我正在尝试阅读一些有关集成 API 和在 JS 中创建一些迷你应用程序的教程。问题是我在尝试从 API 获取一些基本数据时遇到了问题。

我收到的控制台错误是:未捕获( promise 中)语法错误:输入意外结束 在 script.js:4

我非常感谢您的帮助。

这是我的代码:

const url = 'https://itunes.apple.com/search?term=ATB';

fetch(url, {mode: "no-cors"})
    .then ( (response) => response.json() )
    .then((data) => {
        console.log(data.results)
    });

Answer 1

iTunes Search Api 返回一个文件而不是简单的 JSON。您可以借助 JSONP 请求获取数据。您无法使用 fetch api 调用它。

您必须使用 src url 和回调函数动态创建脚本标记。

JSONP stands for JSON with Padding. Requesting a file from another domain can cause problems, due to cross-domain policy. Requesting an external script from another domain does not have this problem. JSONP uses this advantage, and request files using the script tag instead of the XMLHttpRequest object

完成加载文件后，JSONP 将触发回调。

示例:

function clickButton() {
  var s = document.createElement("script");
  s.src = "https://itunes.apple.com/search?term=ATB&limit=2&callback=callbackHandler";
  document.body.appendChild(s);
}
function callbackHandler(data) {
  console.log(data);
}

<button type="button" onclick="clickButton()">Get Data</button>

You could also use third party libraries for this like. fetch-jsonp

您还可以使用JQuery getJSON方法从api获取数据。

示例:

function clickButton() {
  let url = "https://itunes.apple.com/search?term=ATB&limit=2&callback=?";
  $.getJSON(url, function(data) {
    console.log(data);
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" onclick="clickButton()">Get Data</button>