Javascript JS回调（将数据传递到D3）

JS新手，所以请原谅这些粗心的代码。我在一组URL中循环，用这些URL中的值填充数组，并尝试将数组传递给D3。对数组进行手动编码可以很好地返回结果，但我似乎无法使其与回调一起工作：

total = []

function get(url) {
 return new Promise(function(resolve, reject) {
    var req = new XMLHttpRequest();
    req.open('GET', url, true);
    req.onload = function() {
    if (req.status == 200) {
    resolve(req.response);
      }
      else {
        reject(Error(req.statusText));
      }
    };
    // Handle network errors
    req.onerror = function() {
      reject(Error("Network Error"));
    };
    // Make the request
    req.send();
  });
}


function hope(url){
get(url).then(function(response) {
  return JSON.parse(response);
}).then(function(response) {
  total.push(response.totalCount);
//console.log(total);
return total;
});
}

function getData( callback ) {
for (i = 0; i < arra.length; i++) { 
url = arra[i];
hope(url);
}
callback(total);
}


function chartIt(total){
console.log(total);
d3.select(".chart")
  .selectAll("div")
    .data(total)
  .enter().append("div")
    .style("width", function(d) { return d * 10 + "px"; })
    .text(function(d) { return d; });
}

getData( function(){
  chartIt(total);
});

total=[]
函数get（url）{
返回新承诺（功能（解决、拒绝）{
var req=新的XMLHttpRequest（）；
请求打开（'GET'，url，true）；
req.onload=函数（）{
如果（请求状态==200）{
解决（请求响应）；
}
否则{
拒绝（错误（请求状态文本））；
}
};
//处理网络错误
req.onerror=函数（）{
拒绝（错误（“网络错误”）；
};
//提出请求
请求发送（）；
});
}
希望函数（url）{
获取（url）。然后（函数（响应）{
返回JSON.parse（response）；
}).然后（功能（响应）{
total.push（response.totalCount）；
//控制台日志（总计）；
返回总数；
});
}
函数getData（回调）{
对于（i=0；i

当您在循环刚结束时调用回调时，可能还没有完成任何请求，因为它们是异步的。您可以使用来确保所有承诺都已得到解决

function getData(callback) {
    var requests = arra.map(function(url) { return hope(url); });
    Promise.all(requests)
        .then(function(results) {
            callback(total);
        })
}

要使其工作，您还需要从

hope

函数返回一个承诺，这非常简单，因为您的

get

函数已经返回了一个承诺-只需向前传递它：

function hope(url) {
     return get(url).then({...})
}     

---

额外提示：您可以通过从

hope

函数返回

response.totalCount

来摆脱全局

total

变量：

function hope(url) {
    return get(url).then(function(response) {
        return JSON.parse(response);
    }).then(function(response) {
        return response.totalCount;
    });
}

然后，

getData

中的

结果

将与当前的

total

完全相同-一个来自特定响应的

totalCount

数组。因此，您可以这样调用回调：

 callback(results);

---

为了指针，特别是承诺，所有！我更新了getData以使用callback（results），按照您的建议删除了全局变量，但是没有传递数据。奇怪的是，如果我输入console.log，我会看到结果是按应该的方式填充的。更正-将回调（results）替换为functionName（results），一切正常：-）再次！