我无法从服务器（node.js + express）获取数据，在客户端通过 fetch API
[英]I can not get data from the server (node.js + express), on the client through the fetch API
问题描述
How can I get { data: data } on the client using fetch() from the res.render () or res.json() methods of the server?
如何使用服务器的res.render ()或res.json()方法中的fetch()在客户端上获取{ data: data } ？
1) rendered page 1) 渲染页面
2) fetch() is called, data (data) came from the server 2) fetch()被调用，数据（data）来自服务器
3) I want to manipulate them in the DOM 3) 我想在DOM操作它们
data comes, but they redraw the page and I see the json structure数据来了，但他们重绘了页面，我看到了json结构
Server.js服务器.js
let PORT = process.env.PORT || 5000;
const express = require('express');
const app = express();
const server = require('http').createServer(app);
// not matter
app.set('views', './views');
app.set('view engine', 'ejs');
app.use(express.static('public'));
app.use(express.json());
// this
const data = {
array: [1, 2, 3],
string: 'string'
};
app.get('/', function(req, res) {
res.json(data)
});
index.ejs(html) index.ejs(html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script>
fetch('/')
.then(res => {
return res.json();
})
.then(obj => console.log(obj));
</script>
</body>
</html>
2 个解决方案
解决方案1
2 2020-03-23 00:09:09
When you do this:当你这样做时：
fetch("/", {method: "get"}).then(res => {
console.log(res);
});
You will find that res is a BODY object which contains a readable stream and the data in that stream has not yet been read (only the headers have been read).你会发现res是一个 BODY 对象，它包含一个可读流，并且该流中的数据还没有被读取（只有头被读取）。 So, to get that data, you have to use one of the methods that reads it depending upon what type of data you are expecting.因此，要获取该数据，您必须使用其中一种方法来读取它，具体取决于您期望的数据类型。
res.json()
res.text()
res.formData()
res.blob();
res.arrayBuffer();
These are all asynchronous methods that also return a promise.这些都是异步方法，它们也返回一个 promise。 So, if you just want text:所以，如果你只想要文本：
fetch("/", {method: "get"}).then(res => res.text()).then(text => {
console.log(text);
});
解决方案2
0 已采纳 2020-03-26 19:40:47
My code is working correctly.我的代码工作正常。
The problem is that I am taking data from where I am.问题是我正在从我所在的地方获取数据。
Example: I am on this page - localhost:5000/ , and trying to get data from the same place:示例：我在此页面上 - localhost:5000/ ，并尝试从同一位置获取数据：
app.get(/, function (req, res ) {
res.json(data);
})
and it turns out that first I get the data from the server and the res.json(data) method sends it and draws this data on the page, and that's all, nothing more.事实证明，首先我从服务器获取数据，然后res.json(data)方法发送它并在页面上绘制这些数据，仅此而已。
If I need to get something, I would prescribe:如果我需要得到一些东西，我会开处方：
app.get(/data, function (req, res ) {
res.json(data);
});
Full code:完整代码：
app.get('/', function(req, res) {
res.send('index');
});
const data = {
array: [1, 2, 3],
string: 'string'
};
app.get('/data', function(req, res) { // <---
res.json(data);
});
fetch('/data').then(res => res.json())
.then(obj => console.log(obj));
We start the server, go to the localhost/ , open the console, and bam!我们启动服务器，转到localhost/ ，打开控制台，然后砰！
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.