如何获取CSV格式的数据输出？

Question

这是我的代码：

var idFiltered = "";
var artists = [];
var country = "";
var released = "";
var genres = [];
var styles = [];
var tracklist = [];

var rows = [
  [idFiltered, artists, country, released, genres, styles, tracklist],
];

var csvContent = [];

function id(file) {
  return new Promise((resolve, reject) => {
    reader = new FileReader();
    reader.onload = function(e) {
      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];

  if (file != undefined) {
    id(file).then(id => {
      console.log(id)
      console.log(parsedLines)
      console.log(typeof id);

      var idInt = id.map(Number);
      idFiltered = id.filter(function(v){return v!==''});

      console.log(idFiltered)

      idFiltered.forEach(idFiltered => {
        getRelease(idFiltered);
      });
      download(csvContent);
    });
  }
});

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.') {
      return { error: `Release with ID ${idFiltered} does not exist` };
    } else {
      const id = data.id;
      artists = data.artists ? data.artists.map(artist => artist.name) : [];
      country = data.country || 'Unknown';
      released = data.released_formatted || 'Unknown';
      genres = data.genres || [];
      styles = data.styles || [];
      tracklist = data.tracklist ? data.tracklist.map(track => track.title) : [];

      console.log(idFiltered);
      console.log(artists, country, released, genres, styles, tracklist)

      rows = [
        [idFiltered, artists, country, released, genres, styles, tracklist],
      ];

      console.log(rows);

    }
  });
}

function download() {
  const ROW_NAMES = ["Release ID", "artists", "country", "released", "genres", "styles", "tracklist"];
  csvContent = "data:text/csv;charset=utf-8,"
  + ROW_NAMES + "\n" + rows.map(e => e.join(",")).join("\n");

  console.log(csvContent);

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

当我在第 72 rows console.log rows ，数据显然在那里，看起来我成功地抓取了数据但只是把它扔掉了； 它显然永远不会进入download功能。 我最初将下载功能作为GetRelease()一部分，但效果不佳，我每行获取一个文件，尽管有我想要的数据。 现在我只得到一个文件，但没有数据，只包含标题。 请问有什么帮助吗？ TIA。

编辑：我开始怀疑我是否从getRelease返回了错误的东西？ 也许我需要做return rows而不是return fetch ？

Answer 1

getRelease是异步的。 它返回一个 Promise，而不是一个值。 你不能简单地做idFiltered.forEach( getRelease ) 。

解决方案：用async/await语法重写getRelease

async function getRelease(idFiltered) { // Returns a Promise

    const response = await fetch(...);

    const data = await response.json();

    if (data.message === 'Release not found.') {
        return { error: `Release with ID ${idFiltered} does not exist` };
    } else {
        // ....
        console.log(rows);
        return rows;
    }
}

现在你可以这样做：

for( let id of idFiltered){
    await getRelease(id);
}

这将使每个fetch调用按顺序进行，一个接一个。 或者，您可以将它们全部与Promise.all并行：

await Promise.all( idFiltered.map(getRelease) );

然后你可以download(csvContent); .

document.getElementById('fileInput')
    .addEventListener('change', async function (e) { // add "async"

        const file = e.target.files[0];

        if (!file) return;

        const id2 = await id(file);
        
        console.log(id2)
        console.log(parsedLines)
        console.log(typeof id2);

        const idFiltered = id2.filter(v => v !== '');

        console.log(idFiltered)

        await Promise.all(idFiltered.map(id => getRelease(id) ));

        download(csvContent);

    });