Question

JS的新手赦免了草率的代码。我循环遍历一组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);
});

Answer 1

当您在循环之后调用回调时，可能没有任何请求已完成，因为它们是异步的。您可以使用Promise.all确保已解决所有承诺。

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({...})
}

额外提示：您可以通过从total函数返回response.totalCount来摆脱全局hope变量：

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

然后results中的getData正好是当前total - 来自特定回复的totalCount数组。所以你可以这样调用你的回调：

 callback(results);

JS Callback（将数据传递给D3）

1 个答案: