如何在呈现页面之前在服务器端执行api请求

How to do a api request on the server side before rendering the page?

本文关键字：服务器端 执行 api 请求      更新时间：2023-09-26

我在页面上有一个JS脚本，在页面加载时调用Y服务器，并显示一些数据。如果您查看页面源代码，您可以看到脚本正在调用Y服务器。

我需要做的是是从我的服务器向Y服务器发出api请求，并在没有JS脚本的情况下将页面呈现给客户端。因此，如果你查看页面源代码，你不会看到任何对Y服务器的引用，因为在页面呈现给客户端之前，这一切都发生在我的后台服务器上。

有人知道这个设置是如何完成的吗?寻求指导…文档链接?如果不清楚，请要求澄清。

在高层次上，您需要:

  1. 为API实现HTTP客户端
  2. 添加调用API的代码(可能在控制器中，但它可以是一个助手，模型或服务对象)
  3. (可选)解析响应(这取决于它的格式和你需要的格式)
  4. 在视图
    5. 中呈现解析后的响应

2,4很容易。这取决于你，除非你能提供具体的例子。不过，这应该很容易。剩下1.

如果您正在使用流行的API，那么很有可能已经编写了客户端。如果它是内部的东西，您可以使用Net::HTTP或其他流行的HTTP客户端库之一编写自定义的东西。只要你不需要从浏览器发送任何cookie/header，这应该是非常容易的。

下面是使用RestClient和返回HTML的API的快速示例。 
class SampleController < ApplicationController
  def index
    @mydata = RestClient.get('http://path.to/your/api?with=params')
  end
end
# /app/views/index.html.erb
<h1>Here's Your Data</h1>
<%= raw @mydata %>

您需要的是直接从服务器生成HTML，并呈现动态页面。您必须从模板中通用html，并将其直接呈现给客户端。例如，php，您将拥有带有php变量的.twig文件，而不是静态html。java的servlet也是如此。页面在后台呈现，并作为静态文件发送到客户端。不确定ROR的确切方法。

我在尝试一个简单的例子。假设变量data包含您想要从api获取的元素，下面是您的示例:

//第一个case
staticPage1.html
[…]
var data = loadAjax (url)

window.console.log(数据);//从后端提供的页面与前端相同


//生成第二个case
。someServerSideTemplate
[…]
var data={{getDataFromUrl(url)}}//一些服务器端模板语言
generated.html
[…]
Var data={"message":"hello world"}//实际页面呈现


相关文章：