Axios调用未完成致addPlayer与joinGame函数执行中断排查

问题现象 #

• addPlayer函数中Axios.post已成功向数据库写入数据，但未执行到console.log("end of addPlayer")，导致joinGame中await addPlayer()后的代码直接中断
• 刷新页面时，addPlayer的try/catch会捕获到错误

具体问题与修复方案 #

1. Axios.get请求未加await且参数传递错误 #

看joinGame中的这段代码：

const getPlayerDataRes = Axios.get(`${baseURL}getInitialPlayerData`, {
    socket_id: socket.id
});
let id2 = getPlayerDataRes.data.id;

• Axios.get是异步操作，直接赋值的getPlayerDataRes是Promise对象而非响应结果，此时访问.data.id会直接抛出Cannot read properties of undefined (reading 'data')错误
• Axios.get的URL参数必须放在配置对象的params字段里，否则后端无法接收socket_id参数，会导致请求返回错误

修复代码：

// 加上await，并将参数放入params中
const getPlayerDataRes = await Axios.get(`${baseURL}getInitialPlayerData`, {
    params: {
        socket_id: socket.id
    }
});
let id2 = getPlayerDataRes.data.id;

2. addPlayer的catch块静默吞掉错误 #

当请求出现异常（比如刷新页面时请求被浏览器中断），addPlayer的catch块仅打印日志，但没有将错误向上抛出，导致joinGame无法感知到错误，甚至因为async函数默认返回resolved的Promise，让后续逻辑混乱。

修复代码：

const addPlayer = async () => {
    try {
        console.log("addplayers");
        await Axios.post(`${baseURL}addPlayers`, {
            username: ign,
            socket_id: socket.id,
            code: code,
        });
        console.log("end of addPlayer");
        return 1; // async函数自动包装为resolved Promise，无需手动调用Promise.resolve
    } catch (error) {
        console.log(error);
        // 将错误向上抛出，让上层joinGame的catch可以捕获处理
        throw error;
    }
};

3. 刷新页面时的请求中断问题 #

刷新页面时，浏览器会强制中断所有未完成的AJAX请求，Axios会抛出CancelError，这是正常的浏览器行为。如果需要区分这种情况，可以在catch里做判断：

catch (error) {
    if (Axios.isCancel(error)) {
        console.log("请求因页面刷新被取消");
    } else {
        console.log("请求出错:", error);
        throw error;
    }
}

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