JavaScript调用fetch拉取数据导出CSV仅显示表头无数据问题求助

问题根因 #

• 异步执行时序错误：getRelease 内部调用的 fetch 是异步网络请求，你在循环触发所有请求后立刻执行 download，此时所有请求尚未返回结果，rows 还是初始的空值结构，所以导出只有表头。
• rows 数组被重复覆盖：你在 getRelease 中每次请求成功都执行 rows = [单条数据]，直接清空了之前存入的所有数据，就算等所有请求完成，最终也只会保留最后一条查询结果。
• 数组字段直接拼接CSV会乱列：artists/genres 这类字段本身是数组，直接用逗号拼接会和CSV的列分隔符冲突，导致列错位。
• 关于你怀疑的返回值问题：return fetch 是正确的，刚好可以利用它返回的 Promise 实例来批量等待所有请求完成。

修复后的完整代码 #

// 初始rows设为空数组，去掉无效占位项
var rows = [];
var csvContent = "";

function readIdFile(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = function(e) {
      const parsedLines = e.target.result.split(/\r|\n|\r\n/);
      resolve(parsedLines);
    };
    reader.readAsText(file);
  });
}

document.getElementById('fileInput').addEventListener('change', function(e) {
  var file = e.target.files[0];
  // 每次导入前清空之前的历史数据
  rows = [];

  if (file) {
    readIdFile(file).then(idList => {
      const validIds = idList.filter(v => v !== '');
      // 收集所有请求的Promise实例
      const requestPromises = validIds.map(id => getRelease(id));
      // 等待所有请求完成后再执行导出
      Promise.all(requestPromises).then(() => {
        download();
      })
    });
  }
});

function getRelease(idFiltered) {
  return fetch(`https://api.*******.com/releases/${idFiltered}`, {
    'User-Agent': 'Dispodger/0.1',
  })
  .then(response => response.json())
  .then(data => {
    if (data.message === 'Release not found.') {
      // 不存在的ID也写入错误提示，避免遗漏
      rows.push([idFiltered, "查询失败", "-", "-", "-", "-", "Release不存在"]);
      return;
    }
    // 数组类型字段先用顿号拼接成字符串，避免和CSV分隔符冲突
    const artists = data.artists ? data.artists.map(artist => artist.name).join("、") : "未知";
    const country = data.country || '未知';
    const released = data.released_formatted || '未知';
    const genres = data.genres ? data.genres.join("、") : "未知";
    const styles = data.styles ? data.styles.join("、") : "未知";
    const tracklist = data.tracklist ? data.tracklist.map(track => track.title).join("、") : "未知";
    // 追加数据到rows，不要覆盖整个数组
    rows.push([idFiltered, artists, country, released, genres, styles, tracklist]);
  });
}

function download() {
  const ROW_NAMES = ["Release ID", "artists", "country", "released", "genres", "styles", "tracklist"];
  // 给每个字段加双引号包裹，避免内容含逗号/引号时格式错乱
  const formatRow = (row) => row.map(item => `"${String(item).replace(/"/g, '""')}"`).join(",");
  csvContent = "data:text/csv;charset=utf-8,"
  + formatRow(ROW_NAMES) + "\n" + rows.map(e => formatRow(e)).join("\n");

  var encodedUri = encodeURI(csvContent);
  var link = document.createElement("a");
  link.setAttribute("href", encodedUri);
  link.setAttribute("download", "my_data.csv");
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

内容的提问来源于stack exchange，提问作者double-happiness