调用d3.csv异步函数返回Promise {<pending>} 如何获取目标数组

问题根因 #

所有async函数的返回值默认是Promise实例，你直接调用赋值时，CSV文件还在异步加载中，Promise处于pending状态，所以打印出来是未完成的Promise对象，只有等异步操作完成后结果才会存入[[PromiseResults]]。

解决方法1：在async上下文中用await调用 #

你需要在调用generateCountryData的外层也套async函数，或者使用ES2022支持的顶层await，代码示例：

// 方式1：用立即执行的async函数（兼容所有支持async的环境）
(async () => {
  const countryDataArray = await generateCountryData();
  // 此处可以拿到正常的数组结果
  console.log("Country Data (Ary.): ", countryDataArray);
  // 所有依赖这个数组的业务逻辑都放在这个作用域内执行
  // 例如渲染图表的逻辑：renderChart(countryDataArray)
})()

// 方式2：如果你的运行环境（现代浏览器、Node.js 14.8+）支持顶层await，可直接写
const countryDataArray = await generateCountryData();
console.log("Country Data (Ary.): ", countryDataArray);

解决方法2：用.then链式调用处理返回结果 #

如果你不想额外声明async上下文，也可以直接在返回的Promise对象后挂载.then回调，异步操作完成后会自动执行回调并传入结果：

generateCountryData().then(countryDataArray => {
  // 回调内部可拿到正常数组
  console.log("Country Data (Ary.): ", countryDataArray);
  // 所有依赖这个数组的业务逻辑写在回调内
})

额外优化建议 #

你原有的代码里混用了await和.then，可以统一风格简化写法：

async function generateCountryData() {
  // 直接await拿到d3.csv的处理结果，无需额外嵌套then
  const rawData = await d3.csv("./data/data.csv", (d) => ({
    id : +d.id,
    country : d.name,
    faction : +d.overlord
  }))
  const dataArray = rawData.map(Object.values)
  console.log("Proto Data Array: ", dataArray);
  return dataArray;
}

内容的提问来源于stack exchange，提问作者ThincThru