我正在为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);
});
答案 0 :(得分: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(...)
。
答案 1 :(得分:0)
您的问题在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.')
}
});