javascript - 从服务器向客户端获取/获取数据时出现问题。 (客户端向服务器发送数据成功)

Question

我正在为 Udacity 前端开发人员计划做一个项目。目的是使用API​​、node.js和webpack(构建工具)。在我的网站中，我有一个表单，您应该在其中输入一篇文章的 url，客户端会将该 url 发送到服务器，然后服务器会将其发送到 Aylien API，该 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 回调(包括用于 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 更改为 res.end，它既发送一 block 数据又结束响应。如果您不这样做，那么 Node 会认为您尚未将 block 发送回客户端。

如果你想让你的代码减少回调的嵌套，你可以使用异步函数(Promises)。对于不返回 Promises 的 API，您可以使用 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 和 res.end 用于发送文本或字节(缓冲区)。如果您想发送 JSON，express 会为您提供一个 res.json(...) ，它类似于 res.end(JSON.stringify(...)).