我有一个前端应用程序，我想从 Express 后端返回结果。让我们将这些结果称为 country 和 city 作为参考。
我找了一大堆，但找不到任何关于前端和中间件关系的可靠资源。是的，我知道这些东西是什么，以及它们的流动顺序，但困惑在于：
country 和 city？您认为对仍在学习的更大的开发社区有所帮助的任何其他信息都是有益的。
【问题讨论】：
标签： javascript express middleware
中间件用于帮助后端完成处理传入请求的工作。它不与后端分开存在。它是后端的一部分。例如，您可能有一个中间件，用于检查传入请求是否经过适当的授权/身份验证，然后才能由其常规路由处理程序处理路由。
我需要连接前端和中间件吗？怎么样？
没有。您的前端向后端发送请求。后端可能会也可能不会使用中间件来为请求提供服务。这完全取决于后端的实现以及它需要为任何给定请求执行的操作。
如果我已经从前端连接到后端，是否还必须连接到中间件？
没有。您无需单独连接到中间件。您连接到后端，后端可能会或可能不会使用中间件来完成其工作（前端不会知道）。
如何从中间件和/或 express 后端返回国家和城市？
您必须显示有关您实际尝试从请求返回的内容的更多详细信息，但常见的数据格式是 JSON，因此您可以使用所需的响应构造一个 Javascript 对象，然后将其发送回客户端作为来自传入请求的响应，使用 res.json(someObj) 或 res.send(someObj)（如果 someObj 是 Javascript 对象，两者都做同样的事情）。
例如：
app.get("/getsomething", (req res) => {
// do some processing here to get cityResult and countryResult
// construct object to send back to client
const obj = { city: cityResult, country: countryResult};
// send this object as JSON back the the client as the response to this
// incoming request
res.json(obj);
});
【讨论】：
虽然您可以从中间件返回数据，但这可能不是您想要做的。中间件是在后端接收请求和获取资源之间执行的一段代码。在中间件中，您可以执行诸如检查用户是否有权访问某个资源或通过请求传递的某种凭据对用户进行身份验证等操作。
无论哪种方式，您通常会通过 XmlHttpRequest 从前端向后端发出请求。这些请求通常是异步的，因此它们的使用不会在执行时阻塞整个页面。有很多方法可以创建 XmlHttpRequest。原生 Javascript 方式有点难看，所以我建议改用 fetch api。如果您需要做更复杂的事情，您也可以使用第三方库。我个人喜欢axios，但这取决于你。
为了让你更好地理解 Express 在做什么，它基本上是一个等待 http 请求的无限循环。您需要定义路由，执行返回数据的函数。
这是一个基本示例。请注意，此脚本是通过 NodeJS 执行的：
// myserver.js
const express = require('express')
const app = express()
app.get('/cities', (req, res) => {
const cities = /** somehow get all the cities **/
res.json(cities);
})
/** the rest of the server... **/
/** For example, the route for Countries **/
在前面的示例中，我们构建了一个基本服务器，它监听 url localhost:3000/cities 并在获取该 url 时执行一个函数。上述函数将获取所有城市并将它们作为 JSON 返回。
在您的前端，您需要执行一个调用此 url 的 XmlHttpRequest，以让服务器执行该函数，该函数将返回数据。呼……我希望我没有在那儿失去你。
一个典型的例子是使用 fetch api 的简单调用。 请注意，此脚本是在浏览器中执行的。
// myclient.js
async fetchAllCities() {
const cities = await fetch('http://localhost:3000/cities');
console.log(cities);
}
// just for fun, we add a click listener on a button and call the function defined above.
document.getElementById('myButton').addEventListener('click', async function() {
// we fetch the cities when we click on the button !
await fetchAllCities();
});
在前面的示例中，我使用fetch 函数来调用我们在 Express 服务器中声明的 url。
我也在使用 Async / Await，这可能有点棘手，但这只是意味着在继续之前等待数据在那里。
我强烈建议阅读该主题。以下是一些参考资料。
How do I return the response from an asynchronous call?
Understanding async/await on NodeJS.
我希望这个 XmlHttpRequest 的简要概述能帮助您了解 API 的工作原理。
【讨论】：