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

Question

我正在尝试将使用 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>

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

Answer 1

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

你不能，就其本身而言。

您当前的实现类似于：

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

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

---

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

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

Answer 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())
}