为什么 fetch 方法不能获取任何东西？(feat node.js, restAPI)

Question

我是 node.js 和 mySQL 的新手我做克隆编码餐厅网站。所以我做了数据库和服务器。


var app=express();


app.listen(9999,function(){ //I'm using 9999 port and I use Localhost
    console.log('Server is running');
})

//connect mySQL
var client=mysql.createConnection({
    user:'root',
    password:'pswd' //for Question
});

我使用 9999 端口并在本地主机上打开我的服务器。

我有 html。只是测试 html 文件(minuk_test.html) 当我请求“/store/restaurant_info”时，我想使用 json.

接收数据

--main.js--

app.get('/store/restaurant_info',function(request,response){
    client.query('SELECT * FROM RESTAURANT_INFO',function(error,result,fields){
        if(error){
            console.log('Query syntax error');
        }else{
            response.json(result);
            console.dir(result[0].name);
            console.log('check sending data');
        }
    });
});

app.get('/Project/html/minuk_test.html',function(request,response){
    fs.readFile('../html/minuk_test.html','utf-8',function(error,data){
        if(error){
            console.log('Loading minuk_test.html is failed');
        }
        response.send(data);
    })
})

这是我的 html 代码。 -- html 文件--

<!DOCTYPE html>
<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">
    <title>API TEST</title>
    <link rel="stylesheet" href="/minuks_test.js">
</head>
<body>
    <h1>Test</h1>
    <div id="restaurant">
        <span></span>
        <span></span>
    </div>
</body>
</html>

这是我的 javascript

--javscript文件--

import fetch from "node-fetch";

function getAPI(){
    const url=`http://127.0.0.1:9999/store/restaurant_info`;
    fetch(url)
        .then(response=>{
            console.log(response);
            response.json();
        })
        .then(data={
            console.log(data);
        });
}

getAPI();

我希望当我输入“minuk_test.html”时，html 执行javascript 文件。在 javascript 文件中，使用 get 请求 url 购买。

但是我有两个问题。

首先，我运行我的服务器。并输入 localhost:9999/Project/html/minuk_test.html 如果 html 运行 javascript 文件。 javascript 向 /store/restaurant_info 提交请求。然后服务器控制台打印 result[0].name 和 'check sending data' 但控制台很清楚。

其次，我运行 javascript文件打开了服务器。然后console.log（响应）在这里

Response {
  size: 0,
  [Symbol(Body internals)]: {
    body: PassThrough {
      _readableState: [ReadableState],
      _events: [Object: null prototype],
      _eventsCount: 5,
      _maxListeners: undefined,
      _writableState: [WritableState],
      allowHalfOpen: true,
      [Symbol(kCapture)]: false,
      [Symbol(kCallback)]: null
    },
    stream: PassThrough {
      _readableState: [ReadableState],
      _events: [Object: null prototype],
      _eventsCount: 5,
      _maxListeners: undefined,
      _writableState: [WritableState],
      allowHalfOpen: true,
      [Symbol(kCapture)]: false,
      [Symbol(kCallback)]: null
    },
    boundary: null,
    disturbed: false,
    error: null
  },
    type: 'default',
    url: 'http://127.0.0.1:9999/store/restaurant_info',
    status: 200,
    statusText: 'OK',
    headers: {
      connection: 'close',
      'content-length': '8035',
      'content-type': 'application/json; charset=utf-8',
      date: 'Mon, 30 May 2022 11:53:15 GMT',
      etag: 'W/"1f63-IYBGYq/MlY5TBn49Gp7cFQ7aH+A"',
      'x-powered-by': 'Express'
    },
    counter: 0,
    highWaterMark: 16384
  }
}

undefined //console.log(data);

response.size为0，正常吗？ console.log(data) 未定义

但在邮递员中，

postman 可以接收 json 数据。

我不明白为什么我的 html 收不到 json。请帮助我。

Answer 1

因为 html 文件中没有包含 javascript 文件，而且它不包含是因为您没有在网络服务器上提供静态文件，所以没有任何东西运行（另外，它不是 stylesheet，但 script 标签）

如果您内联 javascript，它应该可以工作。此外，在浏览器中您使用 fetch，并在 server-side 上使用 node-fetch：

<!DOCTYPE html>
<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">
    <title>API TEST</title>
    <script>
        function getAPI(){
            const url=`http://127.0.0.1:9999/store/restaurant_info`;
            fetch(url)
                .then(response=>{
                    console.log(response);
                    response.json();
                })
                .then(data={
                    console.log(data);
                });
        }

        getAPI();        
    </script>
</head>
<body>
    <h1>Test</h1>
    <div id="restaurant">
        <span></span>
        <span></span>
    </div>
</body>
</html>

但您应该设置静态文件，请参见此处：

https://expressjs.com/en/starter/static-files.html

此外，您可以设置自己的路由，无需扩展名，也可以使用 .sendFile 代替 fs 来提供特定文件，但您需要提供绝对路径（通过 path模块）：

看这里：

http://expressjs.com/en/api.html#res.sendFile

app.get('/my-route', function(request, response, next) {

    response.sendFile(require('path').join(__dirname, '../html/minuk_test.html'), function(err) {
        if (err) {
            next(err)
        } else {
            console.log('Sent:', fileName)
        }
    });
});

为什么 fetch 方法不能获取任何东西？(feat node.js, restAPI)

Why fetch method can't fetch anything?(feat node.js, restAPI)

mysql

rest

node.js