我现在一直在使用d3.js v4并且我已经了解到Mike Bostock已经使用Promise本机JavaScript对象替换了v5版本中的d3.queue。我想和你联系,看看我写的代码是否正确排队(异步)这些网址:
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排队?是否正确实施了捕获错误?
答案 0 :(得分:20)
您可以大量简化该代码:您不必将new Promise
与d3.json
一起使用,因为d3.json
本身会创建承诺。
所以,你可以这样做:
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
答案 1 :(得分:0)
这是使用ES6 async functions和ES6 array destructuring的方法:
async function chart() {
const [first, second] = await Promise.all([
d3.json('data1.json'),
d3.json('data2.json'),
])
console.log('data2.json :', second)
}
chart()
答案 2 :(得分:0)
如果您想根据自己的喜好清理数据,还可以为数据添加格式化功能。 .then()会将您的数据保存在一个不错的数组中,您以后可以使用。
const myData = d3.csv("data.csv", formatterFunction)
.then(data => /* do whatever*/ )
function formatterFunction(row){
// do formatting
return // formatted data
}