Axios 请求成功但页面不显示：两个前端错误的分析与修正

原始代码

后端 ResponseBodyController.java

java 复制代码

package com.xie.spring.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller
public class ResponseBodyController {

    @GetMapping("/msg")
    @ResponseBody
    public String hello() {
        return "hello";
    }
}

前端 index.html

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<button id="loadMsgBtn">获取信息</button>
<div id="msg"></div>

<script>
    document.addEventListener("DOMContentLoaded", function () {
        let loadMsgBtn = document.querySelector("#loadMsgBtn");
        let msgDiv = document.querySelector("#msg");

        loadMsgBtn.addEventListener("click", async function () {
            try {
                let response = axios.get("msg");
                msgDiv.textContent = response.data();
            } catch (e) {
                console.log(e);
            }
        });
    });
</script>
</body>
</html>

一、问题现象

点击"获取信息"按钮后，页面没有任何文字显示。

后端日志却显示请求完全成功：

复制代码

GET "/spring1/msg"
Mapped to com.xie.spring.controller.ResponseBodyController#hello()
Using 'application/json', given [application/json, text/plain, */*] and supported [text/plain, */*]
Writing ["hello"]
Completed 200 OK

后端返回了 "hello"，状态码 200，响应体正确写出。问题不在后端，而在前端 JavaScript 的两个写法错误。

二、错误一：没有等待 Promise 完成

javascript 复制代码

let response = axios.get("msg");

axios.get() 返回的是一个 Promise，不是响应对象。

Promise 表示"未来会完成的异步操作"，当前这行代码执行完时，请求可能还没有发出。

此时：

javascript 复制代码

response          // Promise 对象
response.data     // undefined

response 不是响应对象，后面的 response.data 自然拿不到数据。

修正方式一：使用 `await`

javascript 复制代码

let response = await axios.get("msg");

外层函数已经是 async function，可以直接使用 await。await 会等待 Promise 完成，把 Promise 解析成真正的响应对象。

修正方式二：使用 `then`

javascript 复制代码

axios.get("msg").then(function (response) {
    msgDiv.textContent = response.data;
}).catch(function (e) {
    console.log(e);
});

then 是 Promise 的回调，请求成功后才执行。两种写法等价，await 更直观。

三、错误二：把 `data` 当成方法调用

javascript 复制代码

msgDiv.textContent = response.data();

response.data 是属性，不是方法。加括号会尝试把它当函数调用，抛出：

复制代码

TypeError: response.data is not a function

这个异常被外层的 catch 捕获，只打印到浏览器控制台，页面上没有任何提示。所以用户看到的就是"点击没反应"。

修正方式

javascript 复制代码

msgDiv.textContent = response.data;

去掉括号，读取属性值。

四、修正后的完整代码

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<button id="loadMsgBtn">获取信息</button>
<div id="msg"></div>

<script>
    document.addEventListener("DOMContentLoaded", function () {
        let loadMsgBtn = document.querySelector("#loadMsgBtn");
        let msgDiv = document.querySelector("#msg");

        loadMsgBtn.addEventListener("click", async function () {
            try {
                let response = await axios.get("msg");
                msgDiv.textContent = response.data;
            } catch (e) {
                console.log(e);
            }
        });
    });
</script>
</body>
</html>

改动点：

改动	原代码	修正后
等待请求完成	`let response = axios.get("msg");`	`let response = await axios.get("msg");`
读取响应数据	`response.data()`	`response.data`

五、执行流程对比

原代码执行流程

复制代码

点击按钮
  → axios.get("msg") 返回 Promise，赋值给 response
  → response.data 是 undefined
  → response.data() 抛 TypeError
  → catch 捕获，console.log 输出错误
  → 页面无变化

修正后执行流程

复制代码

点击按钮
  → await axios.get("msg") 发出请求并等待
  → 后端返回 200，响应体 "hello"
  → response 是响应对象
  → response.data 是 "hello"
  → msgDiv.textContent 设为 "hello"
  → 页面显示 hello

六、Axios 响应对象的结构

理解 response.data 为什么是属性，需要知道 Axios 响应对象的组成：

属性	含义
`response.data`	服务端返回的响应体
`response.status`	HTTP 状态码，如 200
`response.statusText`	状态描述，如 OK
`response.headers`	响应头
`response.config`	本次请求的配置
`response.request`	生成响应的请求对象

data、status、headers 都是属性，不是方法。只有 Axios 实例上的方法（如 axios.get、axios.post）才加括号调用。

七、为什么控制台有错误但页面没提示

javascript 复制代码

try {
    // ...
} catch (e) {
    console.log(e);
}

catch 中只执行了 console.log(e)。console.log 只输出到浏览器控制台，不会在页面上显示任何内容。

排查这类问题时，打开浏览器开发者工具（F12）的 Console 面板，就能看到：

复制代码

TypeError: response.data is not a function

八、请求路径是否正确

javascript 复制代码

axios.get("msg")

这是相对路径。当前页面地址是：

复制代码

http://localhost:8080/spring1/

相对路径 msg 解析为：

复制代码

http://localhost:8080/spring1/msg

后端映射是：

java 复制代码

@GetMapping("/msg")

项目 context path 是 /spring1，完整路径正好匹配。日志也确认了：

复制代码

GET "/spring1/msg"
Mapped to ... ResponseBodyController#hello()
Completed 200 OK

所以路径没有问题。如果写成 /msg（带前导斜杠），会解析成 http://localhost:8080/msg，丢失 context path，导致 404。

九、常见问题补充

1. 如果请求返回 404

检查 axios.get 的路径是否带 context path。相对路径 msg 在 /spring1/ 页面下会正确解析，绝对路径 /msg 会丢失 context path。

2. 如果 `response.data` 是对象

后端返回 JSON 对象时，response.data 是 JavaScript 对象，直接赋给 textContent 会显示 [object Object]。需要提取具体字段：

javascript 复制代码

msgDiv.textContent = response.data.username;

或者用 JSON.stringify(response.data) 查看完整内容。

3. 如果后端返回的是带双引号的 JSON 字符串

Axios 会自动解析，response.data 是解析后的字符串，不带双引号。

4. 如果请求跨域

前后端不同源时，浏览器会拦截响应。需要后端配置 CORS，或使用同源部署。当前项目是同源部署，不涉及跨域。

十、记忆方法

1. 两个错误口诀

复制代码

axios 返回 Promise，不 await 拿不到；
data 是属性不是方法，加括号就报错。

2. 正确写法三件套

复制代码

await 等请求，
response 是对象，
response.data 取数据。

3. 和 fetch 对比记

javascript 复制代码

// fetch 需要两次 await
let response = await fetch("msg");
let data = await response.text();

// axios 一次 await，data 直接是属性
let response = await axios.get("msg");
let data = response.data;

记住：fetch 的 data 要再 await 一次，axios 的 data 直接是属性。

4. 调试口诀

复制代码

页面没反应，先开 F12；
console 有错误，catch 没显示；
await 补上，括号去掉。

十一、总结

维度	说明
问题本质	前端 JavaScript 写法错误，后端请求已成功
错误一	`axios.get` 返回 Promise，没有 `await` 或 `then`
错误二	`response.data` 是属性，加括号调用抛 `TypeError`
修正方式	`await axios.get(...)` + `response.data`
排查入口	浏览器 F12 Console 面板
路径问题	相对路径 `msg` 正确，绝对路径 `/msg` 会丢 context path
返回对象时	需要提取具体字段，不能直接赋给 `textContent`

点击按钮没有反应，不是后端没返回，而是前端没有正确拿到返回值。axios.get 返回的是 Promise，必须 await 或 then 才能拿到响应对象；response.data 是属性，不是方法，去掉括号即可。以后遇到"请求成功但页面没变化"，先开 F12 看 Console，再看 Network 里的响应，基本都能快速定位。

Axios 请求成功但页面不显示：两个前端错误的分析与修正