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

我试图将一个用fetchapi获取的json objectfetch发送到一个EJS文件，当有人访问该网站时，该文件将被加载。问题是我发现在页面加载时发送的对象是未定义的，因为提取数据需要一些时间

我可以用async包装res.render并等待获取数据，然后呈现页面，但这会减慢网站加载时间。我希望在获取api中的值之前，ejs文件中有一个默认值

//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));
    });
}

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

试试这个

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

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

从本质上说，你不能

您当前的实现类似于：

打电话给某人

询问他们的信息

被搁置

他们会回来给你信息

你想要的是在第二步之后挂断电话，这样当他们得到信息时，你就不在了

---

最接近的方法是返回一个文档，其中包含一些客户端JS，该JS对数据发出第二个HTTP请求，然后在获取数据时修改live页面的DOM

---

这通常被称为Ajax。你可以在现代浏览器中使用

fetch

。

对于OP已经在做的事情来说，这（可以说）是一种更好的语法……但它并不能满足他们的要求。我一直听说过ajax，但不敢接近它。现在再多读一点，我就能明白它是如何解决我的问题的。希望学习它不会太痛苦，哈哈。谢谢你的解释！