Question

我正在尝试访问一些打开的数据。即以下内容：http://ratings.food.gov.uk/enhanced-search/en-GB/%5E/Newcastle%20Upon%20Tyne/Relevance/0/%5E/Equal5/0/1/10/json

我想使用此JSON并使用JQuery将其转换为JSON对象。我收到有关Access-Control-Allow-Origin的错误，因此必须使用内置的fetch（）函数。

我已经对它的工作方式进行了一些研究，但是我不完全了解如何实施它来解决我的问题。

下面的代码是我要做的：

const proxyurl = "https://cors-anywhere.herokuapp.com/";//CORS Proxy to allow access to FHR API
const FHRNewcastle5 = "http://ratings.food.gov.uk/enhanced-search/en-GB/%5E/Newcastle%20Upon%20Tyne/Relevance/0/%5E/Equal5/0/1/10/json"; // site that doesn’t send Access-Control-*
fetch(proxyurl + FHRNewcastle5) // https://cors-anywhere.herokuapp.com/https://example.com
.then(response => response.json())
.then(contents => console.log(contents))
.catch(() => console.log("Can’t access " + FHRNewcastle5 + " response. Blocked by browser?"))

我知道我必须修改它的'console.log'部分来创建我的JSON对象（至少我认为这就是我的操作方式。）

抱歉，如果有一个简单的解决方案，我仍在学习：）

edit：当我写这篇文章的时候，我并不真正了解JSON在JavaScript中是如何使用的。意识到无法在我的解决方案中使用提取功能后，我改用AJAX，发现它更容易理解。

Answer 1

如果不与then进行交互，就无法从承诺中神奇地提取数据，因为代码不知道承诺何时解决，这可能需要1毫秒或2分钟。

以下是两个如何处理响应数据的示例：

fetch(url) 
  .then(response => response.json())
  .then(contents => {
    // your either do it here
  })
  .catch(() => console.error('error'))

fetch(url) 
  .then(response => response.json())
  .then(contents => {
    doSomething(contents);
  })
  .catch(() => console.error('error'))

function doSomething(data) {
  // or do it here
}

我认为这个问题的根源是您没有完全理解诺言。我建议您阅读this和/或观看一些YouTube视频。

也有async/await作为替代方案，但它也使用了底层的诺言，在您完全了解诺言是什么以及它如何工作之前，我不建议您尝试使用它。

将响应从fetch（）转换为JSON对象

1 个答案: