EJS 中异步请求数据并渲染 HTML 的正确方法-html教程-PHP中文网

EJS 中异步请求数据并渲染 HTML 的正确方法

EJS 是服务端模板引擎，不支持在模板中直接使用 .then() 处理前端异步逻辑；中的 JavaScript 在服务端同步执行，无法等待 Promise，因此 fetch 的响应不会渲染到页面。正确做法是在路由处理函数中完成异步请求，再将结果传入 EJS 渲染。

ejs 是服务端模板引擎，不支持在模板中直接使用 `.then()` 处理前端异步逻辑；`` 中的 javascript 在服务端同步执行，无法等待 promise，因此 `fetch` 的响应不会渲染到页面。正确做法是在路由处理函数中完成异步请求，再将结果传入 ejs 渲染。

在 Express + EJS 应用中，常见的误区是试图在 EJS 模板内（如 ) 直接调用异步函数并插入 HTML —— 这根本不可行。原因在于：

和是服务端代码块，在 Node.js 环境中同步执行；
myFetchInterfaceFunction() 若返回 Promise（如基于 node-fetch 或 axios 的服务端请求），其 .then() 回调会在事件循环后续阶段执行，而此时 EJS 模板早已编译、渲染并发送给浏览器；
因此
response
永远不会被写入输出流，但 console.log('response') 仍能在服务端打印（因回调最终被执行）。

✅ 正确实践：异步逻辑前置到路由层，数据通过 res.render() 传入模板

示例（Express 路由文件 routes/page.js）：

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

const express = require('express');
const router = express.Router();
const axios = require('axios'); // 或 node-fetch

router.get('/page', async (req, res) => {
  try {
    const response = await axios.get('https://api.example.com/data');
    // 将响应数据（如 HTML 字符串或结构化 JSON）安全传递给 EJS
    res.render('page', { 
      serverHtml: response.data.html || '', // 假设 API 返回含 HTML 的字段
      title: 'Dynamic Page',
      data: response.data // 其他结构化数据
    });
  } catch (err) {
    console.error(err);
    res.status(500).render('error', { message: 'Failed to load content' });
  }
});

module.exports = router;

对应 EJS 模板 views/page.ejs：


<title></title><p>page</p>

  <!-- 安全插入服务端已获取的 HTML（需确保内容可信） -->
  

  <!-- 或渲染结构化数据（更推荐、更安全） -->

⚠️ 关键注意事项：

使用（非转义输出）插入预信任的 HTML 字符串；若内容来自外部 API，务必先做 XSS 过滤（如用 DOMPurify.sanitize() 处理后再传入）；
绝对避免在 EJS 中写 fetch()、.then()、async/await 等前端异步语法——它们在服务端无意义且无法生效；
如需客户端动态加载内容，请改用纯前端方案：在浏览器中用 fetch() 获取数据，再通过 DOM 操作（如 innerHTML 或框架如 React/Vue）更新视图。

总结：EJS 的职责是服务端静态/半静态渲染，异步数据获取必须在 res.render() 调用前完成。把逻辑移出模板、交还给路由控制器，是清晰、安全、可维护的唯一正解。