JS async函数初始返回[object Promise] 如何在按键前获取正常值

async 声明的函数返回值永远是 Promise 实例，你的代码存在两个时序问题：

• 你同步执行selectedWord = getData(apiUrl)时，直接把异步函数返回的 Promise 对象赋值给了selectedWord，此时接口请求还未完成，初始调用displayWord()时读取到的selectedWord就是 Promise 对象，调用toString()就会渲染出[object Promise]。
• 你没有等待接口请求完成就执行了初始渲染，等你按下按键时，异步请求大概率已经执行完毕，getData内部把接口返回的真实数据赋值给了selectedWord，所以按键后能正常显示。

核心是等接口数据返回完成后，再执行初始渲染逻辑，同时修正多余的赋值操作，修复后完整代码如下：

const wordEl = document.getElementById('word');    
let selectedWord = [];
let correctLetters = [];

const apiUrl = 'https://random-word-api.herokuapp.com/word';

async function getData(url) {
  const response = await fetch(url);
  const data = await response.json();
  // 接口返回单词数组，取第一个值拆为字母数组存储
  selectedWord = data[0].split('');
}

function displayWord() {
  wordEl.innerHTML = selectedWord
    .map(
      (letter) => `
          <span class="letter">
            ${correctLetters.includes(letter) ? letter : ''}
          </span>
        `
    )
    .join('');
}

window.addEventListener('keydown', (e) => {
  if (selectedWord.includes(e.key)) {
    if (!correctLetters.includes(e.key)) {
      correctLetters.push(e.key);
      displayWord();
    }
  }
});

// 初始化：等待接口数据拉取完成后再渲染页面
async function init() {
  await getData(apiUrl);
  displayWord();
}
init();

• 删掉了selectedWord = getData(apiUrl)这行错误赋值，避免selectedWord被赋值为 Promise 对象。
• 新增初始化函数init()，用await等待接口请求完成、selectedWord被赋值为真实的单词字母数组后，再调用displayWord()完成初始渲染。
• 优化了数据存储逻辑：拉取到单词后直接拆分为字母数组存储，不需要后续每次渲染都重复执行toString().split('')操作，逻辑更清晰。

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