使用Axios发送GET请求返回undefined的问题求助

嘿，这个问题我太熟了——本质是JavaScript异步代码的执行顺序在搞鬼！

你遇到的情况是：axios.get是异步操作，它不会卡住等待请求完成，而是直接继续执行后面的同步代码。所以你写的console.log("Data before sending is ")和response.send(data)，会在axios还没从后端拿到数据的时候就先跑了，这时候data自然还是初始的undefined状态。

给你两种靠谱的解决方案：

方案1：把响应逻辑放到.then回调内部 #

直接将发送响应的代码移到axios请求成功的回调里，确保只有拿到数据后才执行响应操作：

router.get('/marketUpdates', ((request, response) => {
    console.log("market updates");
    axios.get('http://localhost:8082/marketUpdates')
        .then(function (axiosResponse) { // 注意这里变量名别和外层的response重名
            console.log("GET Response")
            console.log(axiosResponse.data);
            const data = axiosResponse.data;
            console.log("Data before sending is ")
            console.log(data);
            response.send(data); // 确保数据获取后再发送响应
        })
        .catch(function (error) {
            console.log("Error in fetching market updates");
            response.status(500).send("Failed to fetch market updates"); // 错误时也要返回响应，避免客户端挂起
        });
}))

方案2：用async/await简化异步逻辑（更推荐） #

把路由处理函数改成async函数，用await等待axios请求完成，让异步代码看起来像同步代码，逻辑更清晰：

router.get('/marketUpdates', async ((request, response) => { // 标记为async函数
    console.log("market updates");
    try {
        const axiosResponse = await axios.get('http://localhost:8082/marketUpdates'); // await等待请求结果
        console.log("GET Response")
        console.log(axiosResponse.data);
        const data = axiosResponse.data;
        console.log("Data before sending is ")
        console.log(data);
        response.send(data);
    } catch (error) {
        console.log("Error in fetching market updates");
        response.status(500).send("Failed to fetch market updates");
    }
}))

核心原则就是：必须等异步请求完成、拿到数据之后，再执行发送响应的操作，不能让同步代码抢先执行。

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