从服务器到客户端获取/获取数据的问题。 （从客户端到服务器的数据发送成功）

Question

我正在为Udacity Front End Developer程序做一个项目。目的是使用API​​，node.js和webpack（构建工具）。在我的网站上，我有一个表格，您应该在其中输入文章的网址，客户端会将其发送到服务器，然后服务器将其发送到Aylien API，后者使用AI分析文本和返回文本的类别，等等。

因此，我在终端中使用npm run build-prod构建项目，然后运行服务器并启动网站。我输入了一条随机王牌文章的网址，然后在服务器终端中看到该网址已成功从客户端发送到服务器（我已经使用console.log对其进行了控制），然后又发送到了外部API成功并返回了数据（哪个类别等），但是，我想将该信息/数据发送到客户端，但这是我无法完成的地方。我已经尝试修复它，但是看不到为什么我没有将数据传递给客户端，并且在Google Chrome中使用检阅也没有错误。

你们能帮我吗？赞赏！ 服务器js文件和客户端js文件中的以下代码。

编辑：以下代码的最新更新： 编辑2：现在解决问题。雅各布帮了我很多忙。问题出在我使用表单，而不是在preventDefault中。使用简单的e.preventDefault可以解决此问题。

服务器js文件：

    app.post('/post', (req, res) => {
    console.log('I got a request.')
    const data = req.body;
    console.log(data);
    textapi.classify({
        url: data.text
    }, function(error, response) {
        if (error === null) {
            console.log(response);
            res.json(response);
            res.end();
        } else {
            console.log('This is not a valid text or article to evaluate. Try again.')
        }
    });
});

客户端js文件：

    async function postData (url, data) {
    const options = {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(data)
    };
    const response = await fetch(url, options);
    const json = await response.json();
    console.log(json);
}

formBox.addEventListener('submit', () => {
    data.text = document.getElementById('textBox').value;
    postData('/post', data);
});

Answer 1

大多数JavaScript回调（包括ANDROID_SDK_ROOT - location of your android SDK folder ANDROID_HOME - location of your android SDK folder JAVA_HOME - Location of your JDK folder PATH - Locations where programs could be located PATH Should Include %ANDROID_SDK_ROOT%\emulator %ANDROID_SDK_ROOT%\tools %ANDROID_SDK_ROOT%\tools\bin %ANDROID_SDK_ROOT%\platform-tools %ANDROID_SDK_ROOT%\build-tools %JAVA_HOME%\bin C:\Program Files\nodejs C:\Users<your username>\AppData\Roaming\npm 的回调）被称为异步。异步代码完成后，您想要发生的所有事情 也必须进入该回调。

textapi.classify

请注意，我也将app.post('/post', (req, res) => { const data = req.body; textapi.classify({ url: data.text }, function(error, response) { if (error === null) { res.end(response); } else { res.status(400).end('This is not a valid text or article to evaluate. Try again.'); } }); }); 更改为res.send，它既发送数据块并结束响应。如果您不这样做，那么节点会认为您尚未完成将块发送回客户端的操作。

如果您想减少代码与回调的嵌套，可以使用异步函数（Promises）。对于不返回Promises的API，您可以使用res.end来包装它们。这是使用异步函数方法的方法：

require('util').promisify

请注意，const { promisify } = require('util'); const classifyText = promisify(textapi.classify.bind(textapi)); app.post('/post', async (req, res) => { try { const response = await textapi.classify({ url: req.body.text }); res.end(response); } catch (error) { console.error(error); res .status(400) .end('This is not a valid text or article to evaluate. Try again.'); } }); 和res.send用于发送文本或字节（缓冲区）。如果您想发送JSON，则express为您提供了一个res.end，类似于res.json(...)。

Answer 2

您的问题在server.js文件中 应该是这样的：

app.post('/post', (req, res) => {
console.log('I got a request.')
data = req.body;
console.log(data);
textapi.classify({
    url: data.text
}, function(error, response) {
    if (error === null) {
        console.log(response);
        res.send(response);
    } else {
        console.log('This is not a valid text or article to evaluate. Try again.')

    }
});