获取 API 和 Node Js [关闭]答案

【问题标题】：Fetch API and Node Js [closed]获取 API 和 Node Js [关闭]
【发布时间】：2021-08-04 04:57:57
【问题描述】：

一般来说，我们在制作网站时会给出 2-3 种类型的响应。

更改发起请求的同一页面的内容
重定向到另一个页面/视图
重定向到另一个页面/视图，其中一些内容来自后面的数据库

我对何时使用 fetch api 呈现来自后端 rest api 的内容以及何时在使用 res.render() 时使用模板系统使用 expess 感到困惑。这两者是相互替代的，还是我非常无法理解的东西？

提前谢谢你。

【问题讨论】：

问题不够具体。目前尚不清楚您希望它如何工作。如果是SPA，那是一回事。如果它是在服务器端渲染的，那就是另一个
它不是 SPA 。我是 web 开发的初学者，所以问题可能有点愚蠢。我想渲染视图/html 文件。
就像我们可以使用 res.render() , res.redirect() 来做这些事情，或者我们也可以使用 res.send() 发送一些 json 对象和 fetch Api 将使用它在请求发起的页面上呈现。但是2和3的问题怎么办。 fetch api可以用于重定向吗？
如果我无法让您理解，那么请告诉我您如何处理上述所有三个问题，因为它不是 SPA。
@EstusFlask 考虑以上几点。

标签： node.js express web-deployment fetch-api rest

【解决方案1】：

一个给定的 http 请求需要有一个特定的目的。对于任何特定的 http 请求，您可能想要做很多不同的事情。服务器应该发送什么样的响应完全取决于该 http 请求的目的。

以下是一些说明不同目的的示例：

浏览器可能只需要与给定资源/URL 关联的 HTML 内容。为此，它会向服务器发送一个 GET，然后服务器会返回一个代表 HTML 页面的响应。此类 http 请求的一个示例是此问题的 URL：https://stackoverflow.com/questions/67527190/fetch-api-and-node-js。这将返回一个 HTML 页面，然后浏览器可以呈现该页面（并在其中运行任何 Javascript）。在 Express 中，您可以使用 res.render()、res.sendFile() 或 res.send() 甚至 res.write() 将 HTML 数据发送回浏览器。您使用哪一个取决于数据源是什么以及最适合的数据源。 res.render() 通常与模板系统（如 EJS、nunjucks、Jade、Mustache 等）结合使用。 res.sendFile() 发送已构建的静态文件。 res.send() 从您的 Javascript 中发送一个字符串（您可能是动态创建的）。
在浏览器中显示的网页可能希望从您的服务器请求一些数据。在这种情况下，网页中的 Javascript 将再次向服务器发送一个 GET 请求，其 URL 对应于它想要的数据。然后服务器将返回一个 JSON 响应，网页中的 Javascript 将接收该 JSON 并决定如何处理它（比如可能动态地向页面添加内容）。要在使用 Express 时将 JSON 响应发送回客户端，您可以使用 res.send(someObj) 或 res.json(someObj)。如果someObj 是一个Javascript 对象，那么两者都会做同样的事情。
浏览器可以从网页发布表单。当用户点击<form> 中的提交按钮并且浏览器从表单中的字段收集值并将它们发送到<form> 标记的action 属性中的链接时，这是完成的，通常作为POST 方法.然后，服务器将接收该数据，按预期处理并发送响应。浏览器会将响应呈现为新网页。有时，服务器想要发生的事情是表单发布，然后浏览器切换到新的 URL。为此，服务器使用 3xx 状态代码（通常为 302）进行响应，并将响应中的 Location 标头设置为新 URL。在这种情况下，浏览器看到 302 响应状态，获取 Location 标头，然后从服务器请求该新 URL。服务器获取新的 URL 请求，将内容返回给浏览器（在这种情况下通常是 HTML 页面），然后浏览器呈现该新页面。如果您的服务器希望告诉客户端转到一个新的 http URL，那么它可以使用类似res.redirect(302, newURL) 的内容。这只是一个快捷方式，它会自动将响应的 http 状态设置为 302，并将响应中的 Location 标头设置为您传递的 URL。

因此，这些只是如何使用不同的 http 请求和响应的真实示例。何时执行哪一个完全取决于任何给定 http 请求的目的和环境，这完全取决于您的应用程序设计。

请说明使用 Node、Express、Fetch API 发送这些类型响应的方法是什么。

不清楚你的意思是什么。 fetch() API 是一个浏览器 API，可用于从网页 Javascript 向任何目标服务器发送 http 请求，然后接收返回给该 Javascript 的响应。

Express 是一种构建 Web 服务器并定义您希望它接收和处理的 URL/http 方法的方法。

Node是Express运行的开发环境。

【讨论】：

看，我对何时使用 fetch api 来呈现来自后端 rest api 的内容以及何时在使用 res.render() 时使用模板系统使用 expess 感到困惑。这些都是替代方案吗对彼此，或者我非常无法理解的东西？
@anshu_anand - 获取 API 只是将数据从后端获取到前端 Javascript。它本身不会在浏览器中显示任何内容。由您的前端 Javascript 决定如何处理它收到的数据，例如将其插入当前页面或其他任何内容。首先，从你的 http 请求应该做什么开始。然后基于此，决定如何在您的服务器中处理该 http 请求。您在这里似乎本末倒置。
@anshu_anand - 例如，如果您有一个将链接到浏览器并由浏览器请求的 URL，并且该页面应显示来自后端某个数据源的动态数据，那么您可能会在您的后端使用模板系统和 res.render() 来生成一个完整的 HTML 页面，其中插入了数据。
是的，我明白这一点，但同样可以使用 res.render() 与模板系统一起完成吗？我说的是最终结果而不是过程。
@anshu_anand - 另一方面，如果你有一个家庭自动化控制器网页并且你想要一个按钮来打开或关闭某些东西，你可能会创建一个包含按钮的网页您可能会将一些前端 Javascript 连接到向您的服务器发送 http 请求以打开或关闭某些东西的按钮。该 API 调用可能只返回带有 res.json() 的简单 JSON 响应（成功或失败）。因此，使用哪个完全取决于 http 请求正在做什么以及需要什么类型的响应。