关于D3.js v5用Promise.all替代d3.queue的异步请求代码正确性验证

嘿，很高兴看到你已经在着手从D3 v4的d3.queue过渡到v5的原生Promise异步处理啦！先给你明确说：你目前贴出的代码片段还缺少实际发起请求和处理异步流程的逻辑，不过我来帮你补全并确认正确的写法~

首先，先把你给出的初始代码片段整理出来：

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..." 
  ]
  // 这里缺少发起请求和处理异步的核心逻辑
}

在D3 v5里，所有数据加载方法（比如d3.json、d3.csv）都已经返回原生Promise了，所以我们完全可以用JavaScript的Promise API来实现和d3.queue一致的异步排队效果，下面给你两种常用的写法：

1. 并行加载（对应d3.queue的并行模式） #

如果希望同时发起所有请求，等全部加载完成后再处理结果，用Promise.all就可以实现，这和d3.queue默认的并行行为完全一致：

var makeRequest = async function() { 
  "use strict"; 
  var bliUrls = [ 
    "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" 
  ];

  try {
    // 把每个URL转成d3.json的Promise请求，用Promise.all并行处理
    var allData = await Promise.all(bliUrls.map(url => d3.json(url)));
    // 所有请求成功完成后，allData是对应每个URL的结果数组
    console.log("所有数据加载完成：", allData);
    // 在这里写你的后续业务逻辑，比如渲染可视化等
  } catch (error) {
    // 只要有一个请求失败，就会进入这里捕获错误
    console.error("请求出错啦：", error);
  }
};

// 别忘了调用这个函数
makeRequest();

2. 串行加载（对应d3.queue的串行模式） #

如果需要按顺序发起请求，前一个请求完成后再发起下一个，用async/await配合循环就能实现：

var makeRequest = async function() { 
  "use strict"; 
  var bliUrls = [ 
    "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" 
  ];

  var allData = [];
  try {
    for (const url of bliUrls) {
      const data = await d3.json(url);
      allData.push(data);
      console.log(`当前URL ${url} 加载完成`);
    }
    console.log("所有串行请求完成：", allData);
    // 后续逻辑...
  } catch (error) {
    console.error("串行请求出错：", error);
  }
};

makeRequest();

如果不习惯async/await的写法，也可以用传统的Promise链式调用：

var makeRequest = function() { 
  "use strict"; 
  var bliUrls = [ 
    "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" 
  ];

  Promise.all(bliUrls.map(url => d3.json(url)))
    .then(allData => {
      console.log("所有数据加载完成：", allData);
      // 后续操作...
    })
    .catch(error => {
      console.error("请求出错：", error);
    });
};

makeRequest();

总结一下：只要你按照上面的方式补全请求逻辑，就能正确实现这些URL的异步排队处理，完全可以替代d3.queue的功能~

内容的提问来源于stack exchange，提问作者Marco A. Ferra