Make async call from Vue component to NodeJs server and wait for answer
What I'm trying to accomplish is this: I have a Server running Vue.js. After "npm run dev" the app is displayed on localhost:8080 . Now after everything is built, this piece of code in a component is executed:
(I have a NodeJs server running on port 3000)
HelloWorld.Vue
mounted () {
axios.get('http://localhost:3000/')
.then((response) => {
console.log(response.data);
this.User = response.data;
})
.catch((error) => {
console.log(error);
});
}
Which will basically ask the NodeJS Server to perform a query on a Post Gres database.
Server.Js
app.get('/', function (req, res) {
return res.send(connectBD());
});
function connectBD(){
res = client.query("Select * from entidademeio");
res.rows.forEach(row=>{
console.log(row);
tmp = JSON.stringify(row['nomeentidade']) + "";
queryResult += tmp; //Imprime as rows da b
});
client.end();
return queryResult;
}
But i get this error from the Vue side:
Request failed with status code 500
at createError (createError.js?16d0:16)
at settle (settle.js?db52:18)
at XMLHttpRequest.handleLoad (xhr.js?ec6c:77)
However if i return a string :
Server.Js
app.get('/', function (req, res) {
return res.send("bla");
});
it gets displayed like i wanted in the console on the Vue Side. Can somebody please provide me with a solution and some code snippets.I want the result of the query to be displayed on the console from Vue Side. Thanks
EDIT:
If I change my ConnectBD() to:
async function connectBD(){
var conString = "postgres://**********************";
var client = new pg.Client(conString);
var result;
await client.connect();
res = await client.query("Select * from entidademeio");
res.rows.forEach(row=>{
console.log(row);
tmp = JSON.stringify(row['nomeentidade']) + "";
result += tmp; //Imprime as rows da b
});
await client.end();
console.log(result);
return result;
}
I get an empty array from Vue side but the terminal from node is returning the correct result.
NEW EDIT: The empty array:
The empty array on the console from Vue Side
node.js asynchronous vue.js
asked Nov 23 '18 at 3:17
John DoeJohn Doe
144
add a comment |
What I'm trying to accomplish is this: I have a Server running Vue.js. After "npm run dev" the app is displayed on localhost:8080 . Now after everything is built, this piece of code in a component is executed:
(I have a NodeJs server running on port 3000)
HelloWorld.Vue
mounted () {
axios.get('http://localhost:3000/')
.then((response) => {
console.log(response.data);
this.User = response.data;
})
.catch((error) => {
console.log(error);
});
}
Which will basically ask the NodeJS Server to perform a query on a Post Gres database.
Server.Js
app.get('/', function (req, res) {
return res.send(connectBD());
});
function connectBD(){
res = client.query("Select * from entidademeio");
res.rows.forEach(row=>{
console.log(row);
tmp = JSON.stringify(row['nomeentidade']) + "";
queryResult += tmp; //Imprime as rows da b
});
client.end();
return queryResult;
}
But i get this error from the Vue side:
Request failed with status code 500
at createError (createError.js?16d0:16)
at settle (settle.js?db52:18)
at XMLHttpRequest.handleLoad (xhr.js?ec6c:77)
However if i return a string :
Server.Js
app.get('/', function (req, res) {
return res.send("bla");
});
it gets displayed like i wanted in the console on the Vue Side. Can somebody please provide me with a solution and some code snippets.I want the result of the query to be displayed on the console from Vue Side. Thanks
EDIT:
If I change my ConnectBD() to:
async function connectBD(){
var conString = "postgres://**********************";
var client = new pg.Client(conString);
var result;
await client.connect();
res = await client.query("Select * from entidademeio");
res.rows.forEach(row=>{
console.log(row);
tmp = JSON.stringify(row['nomeentidade']) + "";
result += tmp; //Imprime as rows da b
});
await client.end();
console.log(result);
return result;
}
I get an empty array from Vue side but the terminal from node is returning the correct result.
NEW EDIT: The empty array:
The empty array on the console from Vue Side
node.js asynchronous vue.js
asked Nov 23 '18 at 3:17
John DoeJohn Doe
144
add a comment |
What I'm trying to accomplish is this: I have a Server running Vue.js. After "npm run dev" the app is displayed on localhost:8080 . Now after everything is built, this piece of code in a component is executed:
(I have a NodeJs server running on port 3000)
HelloWorld.Vue
mounted () {
axios.get('http://localhost:3000/')
.then((response) => {
console.log(response.data);
this.User = response.data;
})
.catch((error) => {
console.log(error);
});
}
Which will basically ask the NodeJS Server to perform a query on a Post Gres database.
Server.Js
app.get('/', function (req, res) {
return res.send(connectBD());
});
function connectBD(){
res = client.query("Select * from entidademeio");
res.rows.forEach(row=>{
console.log(row);
tmp = JSON.stringify(row['nomeentidade']) + "";
queryResult += tmp; //Imprime as rows da b
});
client.end();
return queryResult;
}
But i get this error from the Vue side:
Request failed with status code 500
at createError (createError.js?16d0:16)
at settle (settle.js?db52:18)
at XMLHttpRequest.handleLoad (xhr.js?ec6c:77)
However if i return a string :
Server.Js
app.get('/', function (req, res) {
return res.send("bla");
});
it gets displayed like i wanted in the console on the Vue Side. Can somebody please provide me with a solution and some code snippets.I want the result of the query to be displayed on the console from Vue Side. Thanks
EDIT:
If I change my ConnectBD() to:
async function connectBD(){
var conString = "postgres://**********************";
var client = new pg.Client(conString);
var result;
await client.connect();
res = await client.query("Select * from entidademeio");
res.rows.forEach(row=>{
console.log(row);
tmp = JSON.stringify(row['nomeentidade']) + "";
result += tmp; //Imprime as rows da b
});
await client.end();
console.log(result);
return result;
}
I get an empty array from Vue side but the terminal from node is returning the correct result.
NEW EDIT: The empty array:
The empty array on the console from Vue Side
node.js asynchronous vue.js
asked Nov 23 '18 at 3:17
John DoeJohn Doe
144
What I'm trying to accomplish is this: I have a Server running Vue.js. After "npm run dev" the app is displayed on localhost:8080 . Now after everything is built, this piece of code in a component is executed:
(I have a NodeJs server running on port 3000)
HelloWorld.Vue
mounted () {
axios.get('http://localhost:3000/')
.then((response) => {
console.log(response.data);
this.User = response.data;
})
.catch((error) => {
console.log(error);
});
}
Which will basically ask the NodeJS Server to perform a query on a Post Gres database.
Server.Js
app.get('/', function (req, res) {
return res.send(connectBD());
});
function connectBD(){
res = client.query("Select * from entidademeio");
res.rows.forEach(row=>{
console.log(row);
tmp = JSON.stringify(row['nomeentidade']) + "";
queryResult += tmp; //Imprime as rows da b
});
client.end();
return queryResult;
}
But i get this error from the Vue side:
Request failed with status code 500
at createError (createError.js?16d0:16)
at settle (settle.js?db52:18)
at XMLHttpRequest.handleLoad (xhr.js?ec6c:77)
However if i return a string :
Server.Js
app.get('/', function (req, res) {
return res.send("bla");
});
it gets displayed like i wanted in the console on the Vue Side. Can somebody please provide me with a solution and some code snippets.I want the result of the query to be displayed on the console from Vue Side. Thanks
EDIT:
If I change my ConnectBD() to:
async function connectBD(){
var conString = "postgres://**********************";
var client = new pg.Client(conString);
var result;
await client.connect();
res = await client.query("Select * from entidademeio");
res.rows.forEach(row=>{
console.log(row);
tmp = JSON.stringify(row['nomeentidade']) + "";
result += tmp; //Imprime as rows da b
});
await client.end();
console.log(result);
return result;
}
I get an empty array from Vue side but the terminal from node is returning the correct result.
NEW EDIT: The empty array:
The empty array on the console from Vue Side
node.js asynchronous vue.js
node.js asynchronous vue.js
asked Nov 23 '18 at 3:17
John DoeJohn Doe
144
asked Nov 23 '18 at 3:17
John DoeJohn Doe
144
edited Nov 23 '18 at 4:40
John Doe
asked Nov 23 '18 at 3:17
John DoeJohn Doe
144
asked Nov 23 '18 at 3:17
John DoeJohn Doe
144
asked Nov 23 '18 at 3:17
John DoeJohn Doe
144
144
add a comment |
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53440259%2fmake-async-call-from-vue-component-to-nodejs-server-and-wait-for-answer%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53440259%2fmake-async-call-from-vue-component-to-nodejs-server-and-wait-for-answer%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
