無法為數組中的變量賦值

Question

我正在 JavaScript 中創建一個簡單的項目，但似乎無法弄清楚為什么這對我不起作用。 我創建了一個 function 獲取 API 以獲取隨機國家名稱，然后將該國家名稱推入一個空數組，但我似乎無法弄清楚如何從該數組中為我的變量賦值，可能遺漏了一些東西在這里很容易。

getRandomWord();
getRandomWord();
getRandomWord();
getRandomWord();

const words = [];

let selectedWord = words[Math.floor(Math.random() * words.length)];

console.log(words);
console.log(selectedWord);


// Fetch some random words
async function getRandomWord() {
  const res = await fetch('https://randomuser.me/api');
  const data = await res.json();

  const randomWord = data.results[0].location.country;

  words.push(randomWord);
}

我需要從單詞數組中為 selectedWord 分配一個隨機國家名稱，但它總是拋出未定義，盡管我在單詞數組中的位置從 0 到 3 看到 4 個不同的國家名稱。有人可以向我解釋一下，或者可能有更好的方法。 謝謝 ！

Answer 1

當selectedWords =執行時，提取尚未解決且words[]尚未填充。 使用 Promise.all 然后：

 const p = Promise.all([ getRandomWord(), getRandomWord(), getRandomWord(), getRandomWord() ]); const words = []; p.then(()=>{ const selectedWord = words[Math.floor(Math.random() * words.length)]; console.log(words); console.log(selectedWord); }); // Fetch some random words async function getRandomWord() { const res = await fetch('https://randomuser.me/api'); const data = await res.json(); const randomWord = data.results[0].location.country; words.push(randomWord); }

注意：如果您不想要快速失敗行為，您將需要使用 Promise.allSettled，任何失敗都會導致它立即返回。 另請注意，我正在使用 Promise.all 以便它同時運行提取而不是按順序等待它們。

async/await 而不是 then

 (async()=>{ let words = []; for(var i = 0; i < 4; i++) words.push(getRandomWord()); words = await Promise.all(words); const selectedWord = words[Math.floor(Math.random() * words.length)]; console.log(words); console.log(selectedWord); })() // Fetch some random words async function getRandomWord() { const res = await fetch('https://randomuser.me/api'); const data = await res.json(); const randomWord = data.results[0].location.country; return randomWord; }

Answer 2

好的，所以我稍微更改了代碼。

async function getRandomWord() {
  try {
    const res = await fetch('https://randomuser.me/api');
    const data = await res.json();

    const randomWord = data.results[0].location.country;

    return randomWord.toUpperCase();

    // words.push(randomWord.toUpperCase());
  } catch (e) {
    console.log(
      'There has been a problem with your fetch operation: ' + e.message
    );
  }
}

然后只是打電話

(async () => {
  selectedWord = await getRandomWord();
  displayWord();
})();

不敢相信我這樣做了：D 謝謝。