Question

我用来获取JSON数据的API只允许你输入一个日期，而且他们没有任何获取多个日期的方法。因此，我决定创建一个for循环来循环一些日期，以获取我需要的所有json数据。问题是，循环不等待json文件返回数据，所以即使我得到一些数据，我也没有得到所有的数据。更糟糕的是，有些日期回来很慢，所以它们甚至没有以正确的顺序被推入阵列。它只是随意地推动它们进入它们。在获取数据之前，我怎么能告诉循环“等待”，直到再次循环？

jsonDataArray = [];
    for (var k = 10; k < 20; k++){
        var num = k;
        var n = num.toString();
        var mydate = "2017-02-"+n; 
        d3.json("http://api.fixer.io/"+mydate, function (jsonData) {
            jsonDataArray.push(jsonData);   
        }
    )}

Answer 1

JavaScript中的I / O是非阻塞的，因此在循环完成后，数据将在回调处理程序中返回。

您可以从循环中返回Promise数组，然后使用Promise.all。这是个主意：

results = [];
for (var k = 10; k < 20; k++){
        var num = k;
        var n = num.toString();
        var mydate = "2017-02-"+n;
        results.push(new Promise(function(resolve, reject) {
          d3.json("http://api.fixer.io/"+mydate, function (jsonData) {
              resolve(jsonData);
          }}));
    )}  

Promise.all(results).then(function (jsonArray) {
    ... work on the jsonArray
}

Answer 2

结帐d3.promise （第三方模块）和d3.range()

Promise.all(
  d3.range(10, 20)
    .map(day => d3.promise.json("http://api.fixer.io/2017-02-" + day))
).then(data => {
  console.log(data);
})

.as-console-wrapper{top:0;max-height:100%!important}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/d3.promise@2.0.0/dist/d3.promise.js"></script>

我的For循环太快，我错过了获取关键数据

2 个答案: