Проблема с извлечением / получением данных с сервера ТО клиенту. (Отправка данных с клиентского сервера на ТО успешно работает)

Question

Я делаю проект для программы Udacity Front End Developer. Цель - использовать API, node.js и веб-пакет (инструменты сборки). На моем веб-сайте у меня есть форма, в которую вы должны добавить URL-адрес статьи, и клиент отправит этот URL-адрес на сервер, а затем сервер отправит его в API Aylien, который использует AI для анализа текста и вернуть, к какой категории относится текст: et c.

Итак, я строю проект в терминале с помощью npm run build-prod, а затем запускаю сервер и запускаю веб-сайт. Я вставил URL-адрес случайной статьи Трампа, и я вижу в терминале сервера, что URL-адрес успешно отправляется на сервер ОТ клиента (я использовал console.log для управления им), а затем также отправляется на внешний сервер. API успешно и возвращает данные (к какой категории и т. Д. c.) НО, я затем хочу отправить эту информацию / Данные клиенту, но я не могу это сделать. Я пытался исправить это, но не могу понять, почему я не передаю данные клиенту, и нет ошибки при использовании inspect в Google Chrome.

Можете ли вы, ребята, помочь мне? Ценить это! Код ниже из файла js сервера и файла js клиента.

РЕДАКТИРОВАТЬ: Последнее обновление кода ниже: РЕДАКТИРОВАТЬ 2: Проблема теперь решена. Джейкоб мне очень помог. Проблема заключалась в том, что я использовал форму, а не использовал предотвращение по умолчанию. Использование простого 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, называются асинхронно . Все, что вы хотите, чтобы произошло после того, как этот асинхронный код завершает , также должен go в этом обратном вызове.

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, что оба отправляет порцию данных и заканчивает ответ. Если вы этого не сделаете, то узел думает, что вы еще не закончили отправку кусков обратно клиенту.

Если вы хотите сделать свой код менее вложенным с обратными вызовами, вы можете использовать функции asyn c (Обещания). Для API, которые не возвращают Promises, вы можете использовать require('util').promisify для их переноса. Вот как бы вы использовали подход асин c:

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(...)).

Answer 2

Ваша проблема на сервере. 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.')

    }
});