JavaScript Fetch POST请求返回数据如何在请求外部全局访问使用

你当前的代码缺失两个核心步骤：

1. 没有将异步请求返回的gameId赋值给你提前定义的全局变量，仅做了控制台打印
2. 没有处理异步请求的时序校验，后续直接调用全局变量会出现值为undefined/空的问题

完整修改后代码 #

const apiUrl = 'https://word-guessing-game.onrender.com'

// 全局存储字段，所有函数都可以访问
let globalGameId = null;
// 初始化状态标记，避免请求未完成时其他函数调用空值
let isGameReady = false;
    
async function initGame(url) {
    let response = await fetch(apiUrl, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
    });
    let data = await response.json()
    const gameId = data.game.id
    // 赋值给全局变量
    globalGameId = gameId
    isGameReady = true
    return gameId
}

// 示例：其他需要调用gameId的函数
async function getGameDetail() {
    // 先校验初始化状态，避免报错
    if (!isGameReady || !globalGameId) {
        console.log('游戏尚未初始化完成，请稍后重试')
        return
    }
    const res = await fetch(`${apiUrl}/games/${globalGameId}`, {
        method: 'GET'
    })
    const gameData = await res.json()
    console.log('当前游戏数据：', gameData)
    return gameData
}

// 示例：提交猜测的PUT请求函数
async function submitGuess(guessWord) {
    if (!isGameReady || !globalGameId) {
        console.log('游戏尚未初始化完成，请稍后重试')
        return
    }
    const res = await fetch(`${apiUrl}/games/${globalGameId}`, {
        method: 'PUT',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            guess: guessWord
        })
    })
    const result = await res.json()
    return result
}
    
async function main() {
    // 初始化游戏拿到gameId
    await initGame(apiUrl)
    console.log('游戏初始化完成，gameId：', globalGameId)
    // 后续你可以直接调用其他自定义函数，不需要额外传gameId参数
    // 比如 await getGameDetail()
    // 比如 await submitGuess('test')
}
    
main();

代码说明 #

• 全局变量globalGameId存储请求返回的游戏ID，所有定义在同一作用域的函数都可以直接访问
• 新增isGameReady状态标记，避免异步请求未完成时其他函数调用空的globalGameId导致报错
• 你可以按照示例扩展更多游戏逻辑函数，不需要额外传递gameId参数，直接读取全局变量即可

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