为何变量players与currentPlayer显示未定义？异步函数使用疑问

核心问题 #

你代码里的setPlayers()是异步函数（带async标记），这类函数执行后不会直接返回最终的玩家数组，而是返回一个Promise对象。你直接把这个Promise赋值给players变量，然后去取players[0]，但Promise对象没有索引属性，所以currentPlayer会变成undefined，后续其他函数调用时自然会提示变量未定义。

两种修复方案 #

方案1：用async/await处理异步结果

把变量赋值和后续逻辑放在一个异步初始化函数里，用await等待setPlayers()的Promise完成，拿到真正的数组：

let message = document.getElementById('game-message');

async function setPlayers() {
    message.innerHTML = `<p>Name of player One?</p>`;
    let player1 = await getUserInput();
    message.innerHTML = `<p>Name of player Two</p>`;
    let player2 = await getUserInput();
    const players = [];
    players.push(player1, player2);
    return players;
}

// 初始化游戏的异步函数
async function initGame() {
    var players = await setPlayers(); // 等待Promise解析，拿到真实的玩家数组
    var currentPlayer = players[0];
    // 所有需要用到players和currentPlayer的代码都要放在这里或者后续的异步步骤里
    console.log(currentPlayer);
}

// 启动初始化
initGame();

方案2：用.then()处理Promise回调

如果不想额外写初始化函数，可以直接用Promise的.then()方法获取结果：

let message = document.getElementById('game-message');

async function setPlayers() {
    message.innerHTML = `<p>Name of player One?</p>`;
    let player1 = await getUserInput();
    message.innerHTML = `<p>Name of player Two</p>`;
    let player2 = await getUserInput();
    const players = [];
    players.push(player1, player2);
    return players;
}

setPlayers().then(players => {
    var currentPlayer = players[0];
    // 依赖players和currentPlayer的逻辑写在这里
    console.log(currentPlayer);
});

关键注意点 #

所有依赖players和currentPlayer的代码，必须等Promise完成后再执行——也就是要么放在await之后，要么放在.then()的回调函数里。如果提前执行，会因为变量还没拿到真实值而报错。

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