iTunes Search Api问题-未捕获（承诺）语法错误：输入的意外结束

Question

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

我得到的控制台错误是：未捕获（承诺中）SyntaxError：输入意外结束在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请求的帮助下获取数据。您无法使用访存api进行调用。

您必须使用src网址和回调函数动态创建脚本标签。

JSONP表示带填充的JSON。由于跨域策略，从另一个域请求文件可能会导致问题。从另一个域请求外部脚本不会出现此问题。 JSONP利用了这一优势，并使用脚本标签而不是XMLHttpRequest对象来请求文件]

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>

您也可以为此使用第三方库。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>