EJS中then块内HTML标签不显示的原因及异步渲染解决方法

问题原因 #

EJS是服务器端渲染模板，模板的编译和HTML生成是同步执行的。当模板代码执行到myFetchInterfaceFunction().then(...)时，只会注册一个异步回调函数，不会等待异步操作完成就直接完成模板渲染，把生成的HTML发送给浏览器。等后续异步回调触发时，模板已经完成渲染，此时回调里的EJS标签和HTML代码根本不会被EJS解析处理，自然不会出现在最终页面中。而console.log('response')是在浏览器端执行的客户端JS代码，所以能在控制台看到输出。

解决方法 #

方案1：服务器端提前获取异步数据（推荐） #

在Node.js的路由逻辑中，先完成异步请求拿到数据，再将数据作为模板变量传给EJS，让模板同步渲染内容：

// Node.js 路由示例
app.get('/target-page', async (req, res) => {
  try {
    // 提前获取异步数据
    const responseData = await myFetchInterfaceFunction();
    // 把数据传给模板
    res.render('your-template-file', { responseData });
  } catch (error) {
    res.status(500).send('数据获取失败');
  }
});

对应EJS模板代码：

<p>page</p>
<!-- 直接使用服务器端传入的变量渲染 -->
<% if (responseData) { %>
  <p><%= responseData %></p>
<% } %>

方案2：客户端异步渲染（适合必须在浏览器端发起请求的场景） #

如果需要在浏览器端发起异步请求，不要用EJS标签在回调里写HTML，而是通过DOM操作动态插入内容：

<p>page</p>
<!-- 预留一个容器用于展示异步内容 -->
<div id="response-content"></div>

<script>
  // 客户端发起异步请求
  myFetchInterfaceFunction().then(res => {
    console.log('response');
    // 动态生成HTML并插入到页面
    const container = document.getElementById('response-content');
    container.innerHTML = `<p>${res}</p>`;
  }).catch(err => {
    console.error('请求出错:', err);
  });
</script>

注意：如果myFetchInterfaceFunction原本是服务器端函数，需要将其封装为HTTP接口，客户端通过fetch直接请求该接口地址。

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