如何为iTunes搜索API提供回调功能？

Question

我正在努力寻找一种方法来提供一个回调函数来正确使用 iTunes商店搜索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 = true
document.body.appendChild(script)

我一直收到以下错误信息：

Uncaught ReferenceError: getiTunes is not defined

我也试过 &callback="getiTunes" 和 &callback=${getiTunes} 而且它们也失败了。

这些函数是在一个 useEffect 的钩子。我有什么特殊的方法来检索函数名吗？

---

除了

如果我试着不提供回调函数，只有当搜索是一个新的搜索（即我以前没有搜索过这个词），它才会工作。然而，如果我有（比如说在生产的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}`

Eg代码。

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)