如何实现Google Charts加载与Fetch请求异步并行后执行绘图？

我原本通过以下方式基于Fetch返回的数据绘制Google Charts图表：

google.charts.setOnLoadCallback(drawChart);
function drawChart() {
  // get the data and draw the chart after fetch(url).then...
}

但我希望优化逻辑，让Google Charts库加载和Fetch数据请求异步并行进行，不需要互相等待，等两者都完成后再执行绘图函数，大致逻辑如下：

// load google charts
google.charts.setOnLoadCallback(???);
// get the data
fetch(url).???;
// a function that runs after both are complete
drawsChartsAfterBothComplete();

请问这个方案是否可行？具体该怎么实现？

当然可行！而且实现起来超简单——关键是要利用Google Charts的load()方法返回Promise的特性，结合Promise.all()来等待两个异步任务（图表库加载、数据请求）全部完成后再执行绘图逻辑。

具体实现思路 #

• 放弃setOnLoadCallback()，改用google.charts.load()返回的Promise来监听图表库加载完成事件
• 同时发起数据Fetch请求，得到另一个Promise
• 用Promise.all()把两个Promise打包，等两者都成功resolve后，再调用你的绘图函数

完整代码示例 #

// 1. 启动Google Charts加载，返回Promise
const loadChartsPromise = google.charts.load('current', {
  packages: ['corechart'] // 替换成你需要的图表包，比如bar、pie等
});

// 2. 发起数据请求，返回Promise
const fetchDataPromise = fetch('你的数据接口URL')
  .then(response => {
    if (!response.ok) {
      throw new Error(`请求失败：${response.status}`);
    }
    return response.json(); // 根据实际数据格式调整，比如text()、blob()等
  });

// 3. 等待两个异步任务都完成后执行绘图
Promise.all([loadChartsPromise, fetchDataPromise])
  .then(([_, fetchedData]) => {
    // 这里的fetchedData就是接口返回的数据，传入绘图函数
    drawsChartsAfterBothComplete(fetchedData);
  })
  .catch(error => {
    // 统一处理加载失败或请求失败的情况
    console.error('操作出错:', error);
    // 这里可以加用户提示，比如显示错误信息
  });

// 你的核心绘图函数
function drawsChartsAfterBothComplete(data) {
  // 示例：将数据转换为Google Charts需要的DataTable
  const dataTable = google.visualization.arrayToDataTable(data);
  
  // 配置图表选项
  const chartOptions = {
    title: '我的图表',
    width: 600,
    height: 400
  };
  
  // 初始化图表并绘制
  const chart = new google.visualization.ColumnChart(
    document.getElementById('chart-container')
  );
  chart.draw(dataTable, chartOptions);
}

为什么这个方案更优？ #

• 性能提升：两个异步操作并行执行，相比原来的串行等待，能有效减少整体耗时
• 代码更易维护：用Promise替代回调嵌套，逻辑更清晰，可读性更高
• 错误处理更全面：通过catch()统一捕获图表加载或数据请求的错误，避免遗漏异常场景

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