使用d3-fetch加载多文件问题：异步调用致第二个数据对象未定义

看起来你遇到的核心问题是没有正确处理异步操作的执行顺序——当你尝试加载第二个数据源时，第一个请求可能还没完成，或者第二个请求的异步逻辑没写对，导致数据对象变成undefined。下面我会结合常见的异步处理方式，给你具体的修改方向：

1. 先把异步请求封装成Promise（统一管理） #

如果你的数据加载是基于传统回调（比如XMLHttpRequest），建议先把它们封装成Promise，这样更容易控制执行顺序：

// 封装第一个数据源的加载函数
function loadFirstData() {
  return new Promise((resolve, reject) => {
    // 替换成你的实际加载逻辑，比如fetch或XHR
    fetch('/api/first-data')
      .then(res => res.json())
      .then(data => resolve(data))
      .catch(err => reject(err));
  });
}

// 封装第二个数据源的加载函数
function loadSecondData() {
  return new Promise((resolve, reject) => {
    fetch('/api/second-data')
      .then(res => res.json())
      .then(data => resolve(data))
      .catch(err => reject(err));
  });
}

2. 选择合适的加载方式：串行/并行 #

根据两个数据源的依赖关系，选对应的加载逻辑：

方式一：串行加载（第二个依赖第一个的结果） #

如果第二个数据需要用到第一个数据的内容（比如用第一个数据的ID作为第二个请求的参数），就用这种顺序执行的方式：

// 在Riot Tag的mounted钩子（或合适的生命周期）中执行
this.on('mounted', async () => {
  try {
    // 先等第一个数据加载完成
    this.firstData = await loadFirstData();
    // 再加载第二个数据
    this.secondData = await loadSecondData();
    // 数据就绪后更新视图
    this.update();
  } catch (err) {
    console.error('数据加载失败:', err);
  }
});

方式二：并行加载（两个数据无依赖） #

如果两个数据源完全独立，用Promise.all同时发起请求，能提升加载效率：

this.on('mounted', async () => {
  try {
    // 同时发起两个请求，等待所有请求完成
    const [firstData, secondData] = await Promise.all([
      loadFirstData(),
      loadSecondData()
    ]);
    this.firstData = firstData;
    this.secondData = secondData;
    this.update();
  } catch (err) {
    console.error('数据加载失败:', err);
  }
});

3. 避开同步代码中访问异步数据的坑 #

绝对不要在异步操作还没完成时就直接访问数据，比如下面这种错误写法一定要避免：

// ❌ 错误：此时loadSecondData还在执行，secondData是undefined
loadSecondData();
console.log(this.secondData); // undefined

必须在Promise的then回调里，或者await之后再去使用数据。

4. 可选：添加加载状态优化体验 #

为了避免页面显示异常，建议加上加载状态提示：

<my-tag>
  <div if={loading}>数据加载中...</div>
  <div if={!loading && firstData && secondData}>
    <!-- 渲染你的数据 -->
    <p>第一个数据：{firstData.someField}</p>
    <p>第二个数据：{secondData.someField}</p>
  </div>

  <script>
    this.loading = true;

    this.on('mounted', async () => {
      try {
        const [firstData, secondData] = await Promise.all([
          loadFirstData(),
          loadSecondData()
        ]);
        this.firstData = firstData;
        this.secondData = secondData;
      } catch (err) {
        console.error(err);
      } finally {
        this.loading = false;
        this.update();
      }
    });
  </script>
</my-tag>

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