如何使用 express 和 fetch 打印来自服务器的响应？答案

【问题标题】：how can i print a response from server using express and fetch?如何使用 express 和 fetch 打印来自服务器的响应？
【发布时间】：2021-12-31 17:13:58
【问题描述】：

我在尝试使用 express 的响应时得到对象响应，这是我正在使用的 HTML 和客户端 js

    <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>
  <body>
    <form method="post">
      <input id="names" name="names" type="text" />
    </form>
    <button id="send">send</button>
    <p id="text"></p>
    <script>
      document.getElementById("send").addEventListener("click", () => {
        
        let datos = {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({
            names: document.getElementById("names").value,
          }),
        };

        fetch("/myaction", datos)
          .then(function (response) {
            document.getElementById("text").innerHTML = response;
          })
          .catch(() => {
            document.getElementById("text").innerHTML = "Error";
          });
      });
    </script>
  </body>
</html>

我正在尝试在“文本”元素中使用 server.js 的响应，服务器是

var express = require('express');
var bodyParser = require('body-parser');
var app     = express();
app.use(express.json()) 
//Note that in version 4 of express, express.bodyParser() was
//deprecated in favor of a separate 'body-parser' module.
app.use(bodyParser.urlencoded({ extended: true })); 

//app.use(express.bodyParser());
app.get('/', function(req, res) {
  res.sendFile(__dirname + "/index.html");
});

app.post('/myaction', function(req, res) {
  res.send(req.body.names);
});

app.listen(8088, function() {
  console.log('Server running');
});

当 fetch request myaction express 返回名称查询但我不能在 fetch 上使用它时，因为它打印“[object Response]”而不是名称表单值，我该怎么办？

【问题讨论】：

标签： javascript node.js express

【解决方案1】：

全局 fetch 函数返回一个解析为 Response 对象的 Promise。此对象包含有关响应的所有信息，例如标头、状态、正文等。要获取响应的正文，您需要先对响应进行解码。

在您的情况下，您需要将正文作为字符串读取，因此我们将使用response.text()。这是Response 对象上的一个方法。它还返回一个解析为字符串的承诺。

fetch("/myaction", datos)
  .then(function (response) {
    return response.text();
  })
  .then(function (text) {
    document.getElementById("text").textContent = text;
  })
  .catch(() => {
    document.getElementById("text").textContent = "Error";
  });

【讨论】：

【解决方案2】：

从 fetch 返回的“响应”是一个对象，它不仅包含响应中的数据。这是一个Response 对象，这意味着它包含状态代码（如 200）以及数据。通常，您可以使用 response.json()（如果是 JSON 格式）或 response.text()（如果是文本）从响应中获取数据。这些函数是异步的，所以也返回一个 Promise。所以你的代码可以是这样的：

fetch("/myaction", datos)
.then(function (response) {
  return response.text();   // a Promise that will resolve to the data
})
.then(function (text) {
  document.getElementById("text").innerHTML = text;
})
.catch(() => {
  document.getElementById("text").innerHTML = "Error";
});

每当您看到一个看起来像 [object Object] 的字符串时，这意味着您看到的 Javascript 对象没有有意义的 toString() 函数，因此这是向您展示价值的最佳方式。如果你不确定它是什么类型的对象，一个好的调试技术是使用console.log(obj) 输出它，这样你就可以看到它的样子。这通常会给你一个线索，让你知道你真正在做什么。

【讨论】：