node js обновлено. получить не работает. терминал показывает данные, консоль браузера - нет

Question

Я действительно боролся с проектом онлайн-курса. Я пытаюсь сделать вызов API, а затем получить данные, но это не работает. Я могу видеть данные в терминале моего сервера, и когда я go до конечной точки / настроения, я также могу видеть все данные. Если я go до конечной точки, а затем вернусь на страницу с формой и повторно отправить, я вижу все данные в консоли, и страница обновляется правильно. Проблема в том, что данные не извлекаются и возвращаются немедленно. Это соответствующий код:

index. js (на стороне сервера):

var path = require('path');
const express = require('express');
const mockAPIResponse = require('./mockAPI.js');
const dotenv = require('dotenv');
const bodyParser = require('body-parser');

const app = express()
app.use(express.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
const cors = require('cors');
app.use(cors());

app.use(express.static('dist'))

dotenv.config();
console.log(`Your API key is ${process.env.API_ID}`);

console.log(__dirname)

projectData = {};

url = {};

const AYLIENTextAPI = require('aylien_textapi');

let textapi = new AYLIENTextAPI({
    application_id: process.env.API_ID,
    application_key: process.env.API_KEY,
})


let apiCall = async (url) => {
    textapi.sentiment({
        'url': url
    }, function(error, response) {
        if (error === null) {
            projectData = response;
            console.log(projectData);
        }else{
            console.log(error)
        }
    })
};

app.route('/sentiment')
    .get(getData)
    .post(getURL)


function getData(req, res){
    //JSON.stringify(projectData);
    res.status(200).send(projectData)
    console.log(projectData)
};

app.route('/')
    .get(function (req, res) {
        console.log(process.env);
        res.sendFile('dist/index.html', { root: __dirname + '/,'})
        res.status(200).json(projectData)
    })
    .post(getSentiment);

function getSentiment(req, res){
    console.log(req.body);
    projectData = req.body;
    console.log(projectData);
    res.status(200).json(projectData);
};

const port = 8000;

// designates what port the app will listen to for incoming requests
app.listen(port, function () {
    console.log(`Example app listening on ${port}`)
})



app.post('/postURL', getURL);

function getURL(req, res){
    console.log(req.body);
    url = req.body.data;
    console.log(url)
    apiCall(url)
    .then(res.status(200).json(projectData))
}

Я пробовал

res.status(200).json(projectData)

и

res.status(200).send(projectData)

и оба возвращают неопределенный объект в консоли браузера.

formHandler. js:

import { postURL } from "./postURL"
import { updateUI } from "./updateUI"



function handleSubmit(event) {
    event.preventDefault()

    // check what text was put into the form field
    let url = document.getElementById('URL').value
    postURL('/sentiment', url)
    .then(updateUI());
};

export { handleSubmit }

мой наставник сказал мне изменить

.then(updateUI())

to

.then(updateUI)

, но, похоже, это не вызывает функцию.

Я также пытался:

postURL('/postURL', url)

и получить тот же результат.

postURL. js:

import { apiCall } from "./apiCall"
import { updateUI } from "./updateUI"

let postURL = async(url = '', data = {})=>{
    console.log(data);
    let response = await fetch(url, {
        method: 'POST',
        credentials: 'same-origin',
        headers: {
            "Content-Type": 'application/json',
        },
        body: JSON.stringify( { data} ),
    });
    try {
        updateUI()
    }catch(error){
        console.log("error", error);
    }
}

export { postURL }

updateUI. js:

const updateUI = async () =>{
    const res = await fetch('/sentiment');
    console.log(res);
    try {
        console.log(res.data)
        const allData = await res.json();
        console.log(allData)
        document.getElementById("polarity").innerHTML = allData.polarity;
        document.getElementById("polarityConfidence").innerHTML = allData.polarity_confidence;
        document.getElementById("subjectivity").innerHTML = allData.polarity;
        document.getElementById("subjectivityConfidence").innerHTML = allData.polarity_confidence;
        return allData
    } catch(error) {
        console.log(error)
    }
};

export { updateUI }

console.log (res) возвращает это:

Response {type: "basic", url: "http://localhost:8000/sentiment", redirected: false, status: 200, ok: true, …}
type: "basic"
url: "http://localhost:8000/sentiment"
redirected: false
status: 200
ok: true
statusText: "OK"
headers: Headers {}
body: (...)
bodyUsed: true
__proto__: Response

Я действительно бьюсь головой об стену, пытаясь понять, почему я вижу данные в серверном терминале, а также когда я go чувствую в браузере, но, что бы я ни пытался, я не могу получить данные с конечной точки. Я не могу сказать вам, насколько я был бы признателен за любую помощь по этой проблеме.

Большое спасибо, Майкл

Answer 1

Я понял. Мне нужно было переместить функцию apiCall непосредственно в мой маршрут / postURL.

app.post('/postURL', getURL);

function getURL(req, res){
    console.log(req.body);
    url = req.body.data;
    console.log(url)
    textapi.sentiment({
        'url': url
    }, function(error, response) {
        if (error === null) {
            projectData = response;
            console.log(projectData);
            res.send(projectData)
        }else{
            projectData = {polarity: 'enter a valid URL', polarity_confidence: 'enter a valid URL', subjectivity: 'enter a valid URL', subjectivity_confidence: 'enter a valid URL'}
            console.log(error)
            res.send(projectData)
        }
    })
}