问前端与中间件的关系

EN

虽然您可以从中间件返回数据，但这可能不是您要做的事情。中间件是在后端接收请求和获取资源之间执行的一段代码。在中间件中，您可以做一些事情，比如检查用户是否有访问某个资源的权限，或者通过请求传递的某种证书对用户进行身份验证。

无论是哪种方式，通常情况下，从前端到后端的请求都是通过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。

我也在使用异步/等待，这可能有点棘手，但它只是意味着在前进之前等待数据的存在。

我强烈建议阅读这一主题。以下是一些参考资料。

如何从异步调用返回响应？

理解异步/等待NodeJS。

MDN等待

我希望对XmlHttpRequest的简要概述能帮助您了解API的工作原理。

中间件用于帮助后端完成处理传入请求的工作。它不存在独立于后端。是后端的一部分。例如，您可能有中间件来检查传入请求在路由可以由它的常规路由处理程序处理之前是否得到了适当的授权/身份验证。

我需要连接我的前端和中间件吗？怎么会这样呢？

不是的。您的前端向后端发送请求。后端可以使用中间件来服务请求，也可以不使用中间件。这完全取决于后端的实现以及它对任何给定请求需要做什么。

如果我已经从前端连接到我的后端，我还需要连接到中间件吗？

不是的。您不会单独连接到中间件。您连接到后端，后端可能使用中间件，也可能不使用中间件来完成其工作(这是前端不知道的事情)。

如何从中间件和/或快速后端返回国家和城市？

您必须展示更多详细信息，说明您实际上试图从请求返回的内容，但通用数据格式是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);
});