如何在node.js中使用相同的API端点打开多个页面

Question

我有一个网页，其中有一个按钮。当我单击按钮时，这段代码将运行并返回请求的数据。

现在我想做的是点击按钮的那一刻。应该会出现一个加载器，一旦 API 返回了所请求的数据，之后我只需渲染原始页面。

我遇到了麻烦，因为我不能使用 res.redirect(...) 否则 href 将被更改，我不能这样做。

请注意，有多个像这样的端点，因此使用重定向效率不高。

如果还有其他解决方法，请帮助我。

Answer 1

要在等待 API 响应时显示加载程序，然后渲染原始页面，您可以在客户端使用 JavaScript 以及现有的 Node.js 代码。

1.在 Node.js 应用程序中创建一个新路由来单独处理 API 请求

app.get("/api", async (req, res) => {
  try {
    const response = await axios.get(API_URL);
    res.json(response.data);
  } catch (error) {
    res.status(422).json(error.details);
  }
});

2。修改现有路由以最初呈现加载程序页面，并在客户端使用 JavaScript 向 /api 端点发出 AJAX 请求并处理响应：

app.get("/", (req, res) => {res.render("loader.ejs");});

3.现在，在客户端，您可以在单击按钮时使用 JavaScript 向 /api 端点发出 AJAX 请求，显示加载器，然后在收到 API 响应后渲染原始页面。

// Add an event listener to the button
$('#buttonId').on('click', function() {
  // Show the loader
  $('#loader').show();

  // Make an AJAX request to the '/api' endpoint
  $.ajax({
    url: '/api',
    method: 'GET',
    success: function(data) {
      // Once the API response is received, hide the loader and render the original page
      $('#loader').hide();
      // Render the original page with the received data
      res.render("home.ejs", { chapters: data, title: "Bhagavad Gita" });
    },
    error: function(error) {
      // Handle the error
      console.log(error);
    }
  });
});