Node.js中Axios获取API数据无法传递至EJS模板问题排查

问题分析 #

• 后端问题点：
  1. Axios响应处理错误：axios.get返回的是包含data属性的响应对象，你直接把整个响应对象转成字符串传给模板，应该提取API返回的实际数据。
  2. 不必要的JSON序列化：把数据转成字符串后，EJS无法对字符串执行forEach遍历操作。
• EJS模板问题点：
  1. 输出语法错误：EJS中输出变量的正确语法是<%= %>，而非<?= ?>。
  2. 数据路径错误：API返回的用户列表在data.data字段中，每个用户对象直接包含firstname，不需要通过user.data.firstname访问。

修复后的代码 #

后端路由代码 #

router.get("/", async (req, res, next) => {
    try {
        // 发起请求并获取Axios响应
        const response = await axios.get("http://localhost:8080/api/v1/users/?key=API_KEY");
        // 提取API返回的用户数组（对应API结构里的data字段）
        const userList = response.data.data;
        // 直接传递数组给模板，无需序列化
        res.render('pages/home', { userList });
    } catch (err) {
        console.log(err);
        // 补充错误处理，避免请求失败时无响应
        res.status(500).send("获取用户数据失败");
    }
});

EJS模板代码 #

<% if (userList && userList.length) { %>
    <% userList.forEach(user => { %>
        <%= user.firstname %> <br>
    <% }) %>
<% } else { %>
    <p>暂无用户数据</p>
<% } %>

补充提示 #

• 添加数据存在性判断，避免数组为空或未定义时触发遍历报错。
• 错误处理逻辑可以进一步优化，比如渲染专门的错误页面，提升用户体验。

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