如何从Next.js应用程序中的URL读取CSV文件

Question

我有一个Next.js应用程序，它需要从同一个repo中的URL读取多个位置的CSV文件，但我似乎无法检索到这些数据。你可以在我的回购中找到相关文件。

注意，我试图从中提取数据的URL是：https://raw.githubusercontent.com/ivan-rivera/balderdash-next/main/public/test_rare_words.csv

以下是我迄今为止所尝试的：

方法1：导入数据

let vocab = {};
...
async function buildVocab() {
const words = await import(VOCAB_URL); // this works when I point to a folder in my directory, but it does not work when I deploy this app. If I point at the URL address, I get an error saying that it cannot find the module
for (let i = 0; i < words.length; i++) {
vocab[words[i].word] = words[i].definition;
}
}

方法2：木瓜蛋白酶

const papa = require("papaparse");
let vocab = {};
...
export async function buildVocab() {
await papa.parse(
VOCAB_URL,
{
header: true,
download: true,
delimiter: ",",
step: function (row) {
console.log("Row:", row.data); // this prints data correctly
},
complete: function (results) {
console.log(results); // this returns an object with several attributes among which is "data" and "errors" and both are empty
},
}
);
// this does not work because `complete` does not return anything
vocab = Object.assign({}, ...raw.map((e) => ({ [e.word]: e.definition })));
console.log(vocab);
}

方法3：针头

const csvParser = require("csv-parser");
const needle = require("needle");
let vocab = {};
...
let result = [];
needle
.get(VOCAB_URL)
.pipe(csvParser())
.on("data", (data) => {
result.push(data);
});
vocab = Object.assign({}, ...result.map((e) => ({ [e.word]: e.definition })));
// This approach also returns nothing, however, I noticed that if I force it to sleep, then I do get the results I want:
setTimeout(() => {
console.log(result);
}, 1000); // now this prints the data I'm looking for

我想不通的是如何强制这个函数等待needle检索数据。我已经将它声明为一个异步函数，并使用await buildVocab()调用它，但它没有帮助。

你知道我该怎么解决这个问题吗？对不起，我是JS初学者，所以我可能缺少一些基本的东西：(

Answer 1

在花了几个小时之后，我想我终于找到了一个解决方案：

let vocab = {};
export async function buildVocab() {
await fetch(VOCAB_URL)
.then((resp) => resp.text())
.then((text) => {
papa.parse(text, { header: true }).data.forEach((row) => {
vocab[row.word] = row.definition;
});
});
}

我仍然无法解决的唯一奇怪之处是：我在另一个异步函数中调用我的buildVocab函数，我注意到如果我没有在该函数中包含console.log语句，那么vocb仍然无法及时填充。以下是功能：

export async function sampleWord() {
await buildVocab();
const keys = Object.keys(vocab);
const index = Math.floor(Math.random() * keys.length);
console.log(`selected word: ${keys[index]}`); // this is important!
return keys[index];
}