如何向 iTunes 搜索 API 提供回调函数

Question

我正在努力寻找一种方法来提供回调函数以正确使用iTunes Store 搜索 API。我正在尝试实现这种行为：const getiTunes = fetch(`https://itunes.apple.com/search?term=${search}&media=movie&limit=200`)  .then(results => results.json())  .then(results => {    if (results.errorMessage) throw Error(results.errorMessage)    else setResults(results)  })  .catch(error => {    //handle error  })到目前为止，我有这个：const getiTunes = results =>  {  if (results.errorMessage) throw Error(results.errorMessage)  else setITunes(results)}const script = document.createElement("script")script.src = `https://itunes.apple.com/search?term=${search}&media=movie&limit=200&callback=getiTunes`script.async = truedocument.body.appendChild(script)我不断收到以下错误：Uncaught ReferenceError: getiTunes is not defined我也尝试过&callback="getiTunes"，&callback=${getiTunes}但他们也失败了。useEffect这些函数在 React的钩子中被调用。有没有一种特定的方法我必须检索函数名称？在旁边如果我尝试不提供回调函数，它只会在搜索是新搜索时起作用（即我之前没有搜索过该术语）。但是，如果我有（比如在生产 URL 上或本地），那么它将出现以下错误：Access to fetch at 'https://itunes.apple.com/search?term=spiderman&media=movie&limit=200' from origin 'http://localhost:3000' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header has a value "--it has the last URL I used to search for this successfully--"...

Answer 1

您正在尝试的方法是 JSONP(JSON with Padding)方法。我们只需要外部脚本和一个函数。外部网站为您的方法提供回调函数。

所以它发送函数参数中的所有数据。

错误地您已添加}到您的脚本网址

script.src = `https://itunes.apple.com/search?term=${search}&media=movie&limit=200&callback=getiTunes}`

例如代码：

const getiTunes=results=>{

if (results.errorMessage) throw new 

Error(results.errorMessage)

  else setITunes(results)

};

const script = document.createElement("script")

script.src = `https://itunes.apple.com/search?term=bat&media=movie&limit=200&callback=getiTunes`

script.async = true

document.body.appendChild(script);

// returns getiTunes(...someData)

Answer 2

通过添加我的脚本来处理对文档的响应，我能够得到这个工作。

const loadItunes = document.createElement("script")

loadItunes.src = `https://itunes.apple.com/search?term=${search}&media=movie&limit=200&callback=getiTunes`

loadItunes.async = true

const handleResults = document.createElement("script")

handleResults.type = "text/javascript"

handleResults.text = "function getiTunes(response) { //function code };"

document.body.appendChild(loadItunes)

document.body.appendChild(handleResults)

更新的答案

我通过这个代码沙箱找到了更好的解决方案。它通过创建一个函数来完美地解决这个问题，然后将响应传递给回调函数。

export const fetchJSONP = (url, callback) => {

  var callbackName = "jsonp_callback_" + Math.round(100000 * Math.random())

  window[callbackName] = function (data) {

    delete window[callbackName]

    document.body.removeChild(script)

    callback(data)

  }

  var script = document.createElement("script")

  script.src = url + (url.indexOf("?") >= 0 ? "&" : "?") + "callback=" + callbackName

  document.body.appendChild(script)

}

然后我以下列方式使用它：

const handleResponse = response => {

  //do stuff with response

}

fetchJSONP("https://itunes.apple.com/search?term=spiderman&media=movie&limit=200", handleResponse)