从 API 获取数据，然后将其发送到 EJS 文件

Posted 2023-03-11

【中文标题】从 API 获取数据，然后将其发送到 EJS 文件

【英文标题】：Fetching data from an API then sending it to an EJS file

【发布时间】：2019-12-31 15:45:02

【问题描述】：

我正在尝试将使用 fetch-api 提取的 json 对象发送到 EJS 文件，该文件在有人访问网站时加载。问题是我发现发送的对象在页面加载时未定义，因为获取数据需要一些时间。

我可以用异步包装 res.render 并等待等待获取数据然后渲染页面，但这会减慢网站加载时间。我希望 ejs 文件中有一个默认值，直到获取来自 api 的那个。

//One of the routes
router.get("/", (req, res) => 
fetchData(object => 
res.render("landingPage",  obj: object );
)

);

function fetchData(callback)
fetch("http://localhost:3000/api/teachers") //Could change this to a find request to the data base directly like Teacher.find()...
    .then(res => res.json())
    .then(res => 
      return callback(res);
    )
    .catch(err => 
      console.log(JSON.stringify(err));
    );

<!--In the html file-->
<h5><%= obj.someValue %></h5>

在我提供的代码中，服务器等待获取数据然后呈现页面。我希望页面加载，并在提取完成后将提取的对象添加到页面。我怎么能这样做？

【参考方案1】：

在我提供的代码中，服务器等待获取数据然后呈现页面。我希望页面加载，并在提取完成后将提取的对象添加到页面。我怎么能这样做？

你不能，就其本身而言。

您当前的实现类似于：

给某人打电话 向他们询问信息 被搁置 他们回来并为您提供信息

你想要的是在第 2 步之后挂断，所以当他们收到信息时，你已经不在了。

---

您最接近的方法是返回一个包含一些客户端 JS 的文档，该 JS 对数据进行第二次 HTTP 请求，然后在获取数据时修改实时页面的 DOM。

这通常称为 Ajax。您可以在现代浏览器中原生使用fetch。

【讨论】：

我一直听说 ajax，但不敢靠近它。现在阅读更多内容，我可以看到它如何解决我的问题。希望学习它不会那么痛苦哈哈。感谢您的解释！

【参考方案2】：

试试这个

router.get("/", async(req, res) => 
  const obj = await fetchData()
  res.render("landingPage",  obj );
);

function fetchData()
  return fetch("http://localhost:3000/api/teachers")
      .then(res => res.json())

【讨论】：

这（可以说）是更好的语法来做 OP 已经在做的事情……但它没有做他们要求的事情。