d3.js v5 - Promise.all 替换 d3.queue

Question

我已经使用 d3.js v4 有一段时间了，我了解到 Mike Bostock 已经用 Promise native JavaScript 对象替换了 v5 版本中的 d3.queue。我想与您核实一下我编写的这段代码是否正确(异步地)排队这些 URL:

var makeRequest = function() {
    "use strict";

    var bli = [
        "http://stats.oecd.org/sdmx-json/data/BLI2013/all/all",
        "http://stats.oecd.org/sdmx-json/data/BLI2014/all/all",
        "http://stats.oecd.org/sdmx-json/data/BLI2015/all/all",
        "http://stats.oecd.org/sdmx-json/data/BLI2016/all/all",
        "http://stats.oecd.org/sdmx-json/data/BLI/all/all"
    ];

    var promises = [];

    bli.forEach(function(url) {
        promises.push(
            new Promise(function(resolve, reject) {
                d3
                    .json(url)
                    .then(function(response) {
                        resolve(response);
                    })
                    .catch(function(error) {
                        console.log("Error on: " + url + ". Error: " + error);
                        reject(error);
                    });
            })
        );
    });

    Promise.all(promises).then(function(values) {
        console.log(values);
    });
};

makeRequest();

代码似乎运行正常，但是，这是正确的代码还是有更好的方法(最佳实践方法)用于使用 Promise.all 和 d3.js 进行排队？捕获错误是否正确实现？

Answer 1

您可以大大简化该代码:您无需使用 new Promise与 d3.json , 自 d3.json将自己创造 promise 。

所以，你可以这样做:

var files = ["data1.json", "data2.json", "data3.json"];
var promises = [];

files.forEach(function(url) {
    promises.push(d3.json(url))
});

Promise.all(promises).then(function(values) {
    console.log(values)
});

或者，如果您进入 code golf ，甚至更短:

var files = ["data1.json", "data2.json", "data3.json"];

Promise.all(files.map(url => d3.json(url))).then(function(values) {
    console.log(values)
});

因为我不能在 S.O. 中使用 JSON 文件。片段，检查这个 bl.ocks 中的控制台: https://bl.ocks.org/GerardoFurtado/f08993c9c729b0b3452ef1803ad9dcbf/c4b45c5acce6033085a667cbb7d34203d15de0f0