如何使用 express 和 fetch 打印來自服務器的響應？

Question

我在嘗試使用 express 的響應時收到 object 響應，這是我正在使用的 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]”而不是名稱表單值，我該怎么辦？

Answer 1

全局fetch function 返回解析為Response object 的 Promise。 此 object 包含有關響應的所有信息，例如標頭、狀態、正文等。要獲取響應的正文，您需要先對響應進行解碼。

在您的情況下，您需要將正文作為字符串讀取，因此我們將使用response.text() 。 這是Response object 上的一種方法。 它還返回解析為字符串的 promise。

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

Answer 2

從獲取中返回的“響應”是 object，其中不僅包含響應中的數據。 這是一個Response object 這意味着它包含狀態代碼（如 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 object 沒有有意義的toString() function 值，這樣可以最好地向您展示它。 如果您不確定它是哪種 object，一個好的調試技術是使用console.log(obj)對 output 進行調試，這樣您就可以看到它的樣子。 這通常會給你一個關於你真正在做什么的線索。

如何使用 express 和 fetch 打印來自服務器的響應？

問題描述

2 個解決方案

解決方案1
1 已采納 2021-12-31 17:39:25

解決方案2
1 2021-12-31 17:44:50

如何使用 express 和 fetch 打印來自服務器的響應？

問題描述

2 個解決方案

解決方案1 1 已采納 2021-12-31 17:39:25

解決方案2 1 2021-12-31 17:44:50

解決方案1
1 已采納 2021-12-31 17:39:25

解決方案2
1 2021-12-31 17:44:50