使用 d3.json() 获取数据不起作用，而使用 JS 异步 await 工作.为什么

Question

我正在尝试从 url 获取一些数据以在 d3.js 中使用。我无法使用d3.json(url, callback)获取数据。虽然当我使用 (ES8( async await功能时它工作正常。

有人可以帮助我理解为什么吗？我做错了什么？谢谢！

d3.json(( 示例：

d3.json("https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/GDP-data.json", json => {
  
     const data = json.data; // array of dates and values
     const lowestVal = d3.min(data, d => d[1]);
     const highestVal = d3.max(data, d => d[1]);
     
     console.log(lowestVal);
     console.log(highestVal);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

异步等待示例：

(async function() {
  try {
    const response = await fetch("https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/GDP-data.json");
    if (response.ok) {
      const jsonResponse = await response.json();
      
      const data = jsonResponse.data; // array of dates and values
      const lowestVal = d3.min(data, d => d[1]);
      const highestVal = d3.max(data, d => d[1]);
      
      console.log(lowestVal);
      console.log(highestVal);
    }
  } catch(error) {
    console.log(error);
  }
})();

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

我知道这里也应该有一些 CORS 问题。但我目前正在研究CodePen。所以CORS在这里不是问题。

非常感谢您的任何见解。

Answer 1

根据文档，d3.json像fetch一样返回一个承诺，而不是接受回调。(编辑：显然在v4中它接受了回 调 - 这解释了它。如果你使用这个承诺，它就会起作用。

您可以通过async/await使用承诺，就像使用fetch一样，也可以使用then和(因为您不会将链返回给任何其他将处理它的人(catch

。

async/await ：

(async function() {
  try {
    const jsonResponse = await d3.json("https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/GDP-data.json");
    const data = jsonResponse.data; // array of dates and values
    const lowestVal = d3.min(data, d => d[1]);
    const highestVal = d3.max(data, d => d[1]);
    console.log(lowestVal);
    console.log(highestVal);
  } catch(error) {
    console.log(error);
  }
})();

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

then/catch ：

d3.json("https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/GDP-data.json")
.then(json => {
  
     const data = json.data; // array of dates and values
     const lowestVal = d3.min(data, d => d[1]);
     const highestVal = d3.max(data, d => d[1]);
     
     console.log(lowestVal);
     console.log(highestVal);
})
.catch(error => {
    console.error(error);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>