I know this questions is asked several times in several ways. But I realy dont get it:
I have a promise with a resolved value. I can console.log this object and everything seems to be fine. I can see, what I want to see.
I use PouchDB and NuxtJS (VueJS)
import PouchDB from 'pouchdb'
let testdb = new PouchDB('testdb');
let testDoc = function () {
testdb.get('2').then(function (doc) {
console.log(doc);
}).catch(function (err) {
console.log(err);
});
}
This works great. My result is what I expect and hope to see:
{
text: "testen",
_id: "2",
_rev: "1-c7e7c73d264aa5e6ed6b5cc10df35c5a"
}
Perfect. But now I am struggeling with returning this value, so other functions can access to it. Especially returning this data. In VueJS eg like that:
// ..
export default {
data() {
return {
doc: testDoc
}
}
}
So I can access to it via instance. But ofcourse, If I do it like that, data is promise
data: [
doc: promise
]
But I need the value, not what it is. I dont understand how to return the value.
I have read several How To´s. I guess, I understand the different between Callback and Promise. With both and async functions I get the same result. But all example are always with console.log(). But this works for me.
Has anyone an example hot to access this (scoped or nested?) value?
If I return the data:
let testdb = new PouchDB('testdb');
let testDoc = function () {
testdb.get('2').then(function (doc) {
return doc;
}).catch(function (err) {
console.log(err);
});
}
Why hasnt testDoc the value now? Or where the hack is the value?
I always have done it via commiting the value into the vuex store. This also works great.
let fetchOrga = async function({ store }) {
try {
let orgaDoc = await orgadb.get('orga');
store.commit('orgaUpdate', orgaDoc)
} catch (err) {
console.log(err);
}
}
But like I said, I want to have this data directly under control via IndexedDB
You can use async/await to wait until promise resolve:
// nuxt.js way
async asyncData() {
let testdb = new PouchDB('testdb');
return {
doc: await testdb.get('2'),
};
},
UPD (by comments):
data() {
return {
isReady: false,
doc: null,
};
},
async mounted() {
let testdb = new PouchDB('testdb');
this.doc = await testdb.get('2');
this.isReady = true;
},
In the mount of the component you should update your state doc then your doc will be available to work with anywhere in your inside your component.
export default {
data() {
return {
doc: [],
error : ""
}
},
mounted: () => {
testdb.get('2').then(doc => {
this.doc = doc;
}).catch(function(err) {
this.error = err;
});
}
}
testDoc in your example now contains a function. Not a promise nor the doc you're getting from the promnise. To get the actual doc you need to get inside the promise. Like this
let testdb = new PouchDB('testdb');
testdb.get('2').then(function (doc) {
// Your doc is here
console.log(doc);
return doc;
}).catch(function (err) {
console.log(err);
});
Alternatively you can use the async/await syntax, like this
let doc = await testdb.get('2');
// Your doc is here
console.log(doc);
Related
Problem
Trying to create an instance of my model results in this error:
SequelizeDatabaseError: null value in column "player_id" violates not-null constraint
Information
My model is defined like this:
const PlayerTournament = sequelize.define("player_tournament_data", {
rebuys: INTEGER,
position: INTEGER,
});
PlayerTournament.associate = () => {
PlayerTournament.belongsTo(Player, { foreignKey: "player_id" });
PlayerTournament.belongsTo(Tournament, { foreignKey: "tournament_id" });
};
PlayerTournament.removeAttribute("id");
And the call is done here:
await sequelize.transaction(async ta => {
try {
const tournament = await Tournament.create({}, { transaction: ta });
const promises = players.map(player => {
const playerID = getPlayerID(player);
return PlayerTournament.create(
{ player_id: playerID, tournament_id: tournament.id },
{ transaction: ta }
);
});
return await Promise.all(promises);
} catch (error) {
throw new Error(error);
}
});
But the resulting query looks like:
INSERT INTO "player_tournament_data" DEFAULT VALUES RETURNING "rebuys","position";
Thoughts
So basically what happens is that *sequelize* just ignores the values I pass into the function. When I console log the values, I can see that they are here and have the proper format. So did I go somewhere wrong in the definition or is there something else I am not aware of?
I am making my first hybrid web app using react hook.
I am faced with a timing problem with promise and context api.
Here are the logic I am facing with.
A function fetchApplications gets data from firebase firestore, it is defined in globalcontext.js (called in tableView)
tableView.js calls fetchApplications in useEffect.
fetchApplications is defined as promise function, I expect it will resolve(return) data until data fetched, it will resolove(return) object like {code:200, data:data}
problem
in the fetchData.code,
Cannot read property 'code' of undefined
Here is my code
In the tableview.js
React.useEffect(() => {
context.fetchApplications(auth.userId, "")
.then(function (fetchData) {
console.log("Fetched data: ", fetchData); ///this is undefined
if (fetchData.code !== 200) { /// error part
alert(fetchData.msg);
}
if (!fetchData.data) {
alert("No applications");
}
setsData(fetchData.data);
});
}, []);
In the GlobalContext.js
async function fetchApplications(userId, role) {
return new Promise((resolve, reject) => {
// resolve({ code: 200, data: "data" }); //If I add this code, it will be alright.
let dataArray = [];
let applicationRef = db
.collection("Users")
.doc(userId)
.collection("Applications");
applicationRef
.get()
.then(function (qs) {
qs.forEach(function (doc) { //doesn't work
console.log(doc.id, " => ", doc.data());
console.log(doc.size, " => ", typeof doc);
dataArray.push(doc.data());
});
return Promise.resolve(dataArray);
})
.then((data) => {
console.log("Global, Fetched Data", dataArray);
if (data) {
resolve({ code: 200, data: data });
}
return;
});
}).catch(function (error) {
reject({ code: 400, msg: "시스템에러 고객센터에 문의해주세요" });
});
}
wrote in codesendbox
If I was write the wrong way of promise, please let me know.
thanks
You're implementing a couple of bad practices and have some major issues. For starters, fetchApplications is marked as async but you're returning a manually created promise which is quite overkill as your fetching code actually generates a promise which you should directly return. Furthermore:
.then(function (qs) {
qs.forEach(function (doc) { //doesn't work
console.log(doc.id, " => ", doc.data());
console.log(doc.size, " => ", typeof doc);
dataArray.push(doc.data());
});
return Promise.resolve(dataArray);
})
I am not sure what exactly "//doesn't work" should mean but return Promise.resolve(dataArray); won't cut it for you. You're already in the then chain, so you can't resolve anything from the main promise at this point. You should just pass the data to the next then callback as return dataArray;.
All in all, I will suggest ditching the then-ables syntax all together and migrate to async/await altogether:
async function fetchApplications(userId, role) {
try {
const dataArray = [];
const applicationRef = db
.collection("Users")
.doc(userId)
.collection("Applications");
const querySnapshot = await applicationRef.get();
querySnapshot.forEach(doc => {
dataArray.push(doc.data());
});
return {
code: 200,
data: dataArray
};
}
catch (error) {
return {
code: 400,
msg: '시스템에러 고객센터에 문의해주세요'
};
}
}
Then, in your react component/hook:
React.useEffect(() => {
const fetchApplicationDataAsync = async () => {
const result = await context.fetchApplications(auth.userId, "");
if (result.code !== 200) {
alert(result.msg);
}
if (!result.data) {
alert("No applications");
}
setsData(result.data);
}
fetchApplicationDataAsync();
}, [auth.userId]);
Another problem and bad practice is that you're not specifying your dependencies for the useEffect hook. You have 2 external dependencies: the auth.userId paramater and the ontext.fetchApplications function. We alleviate one of the problem by creating the fetch function in the body of useEffect itself. However, the auth.userId should go into the dependency array as stated above.
You have to check for fetchData to be defined before accessing its properties.
A short form would be
if (fetchData && fetchData.code !== 200){...}
Applied to your code:
React.useEffect(() => {
context.fetchApplications(auth.userId, "")
.then(function (fetchData) {
console.log("Fetched data: ", fetchData); ///this is undefined
if (fetchData && fetchData.code !== 200) { /// error part
alert(fetchData.msg);
}else {
alert("No applications");
}
setsData(fetchData.data);
});
}, []);
By calling then() on the fetchApplications() function, as follows, you pass to the callback the fullfilment value from the Promise returned by fetchApplications() (i.e. fetchData gets the value returned by fetchApplications()).
context.fetchApplications(auth.userId, "")
.then(function (fetchData) {...}
However, fetchApplications() returns a Promise that resolves with undefined because, actually, you don't return the Promises chain. This is why you get an error on fetchData.code.
Adapting fetchApplications() as follows (using await, since you use async) should do the trick (untested!):
async function fetchApplications(userId, role) {
try {
let dataArray = [];
let applicationRef = db
.collection('Users')
.doc(userId)
.collection('Applications');
const qs = await applicationRef.get();
qs.forEach(doc => {
console.log(doc.id, ' => ', doc.data());
console.log(doc.size, ' => ', typeof doc);
dataArray.push(doc.data());
});
return { code: 200, data: dataArray };
} catch (error) {
return { code: 400, msg: '시스템에러 고객센터에 문의해주세요' };
}
}
Note that in any case you return an object with a code property, so no more problem when doing fetchData.code.
I am a beginner in javascript and am now trying to understand the subject of classes. I've defined the following class. Now I would like to use the result outside of this in a variable.
The class looks like this:
class Maad{
constructor(name, NumWeek, NumMonth){
this.name =name;
this.NumWeek = NumWeek;
this.NumMonth = NumMonth;
}
queryMaad(){
const mongodb =require('mongodb');
const client = require('mongodb').MongoClient;
const url= 'mongodb://localhost:27017/vertrieb';
client.connect(url,(error, db) =>{
if(!error){
console.log("month_log steht")
};
let col = db.collection("umsatz5");
col.aggregate([{'$match': {'AD': this.name}}, {'$match': {'Kalenderwoche':this.NumWeek}}, {'$count': 'procjetnumber'}],function(err, result){
if (err) {
console.error("Error calling", err);
}
console.log(result[0].projectnumber);
result[0].projectnumber;
})
db.close();
});
}
}
My request is:
let ma_1 = new Maad("Hans Wurst", NumWeek);
ma_1.queryMaad();
How can I save the result (the number of projects) in a variable to use it outside of the class? Thanks for your help.
In general, you would assign it basically the way that you assign anything:
const ma_1 = new Maad("Hans Wurst", NumWeek);
const myVar = ma_1.queryMaad();
However your method is a void method which doesn't return anything, so you need to edit your class if you want to get the number of projects.
Returning something from the function is harder than it sounds because MongoClient.connect is a void method which uses callbacks rather than returning a Promise of a response. Honestly I would recommend using a library like mongoose. But it is possible to make the method asynchronous ourselves by returning a new Promise which we resolve or reject based on the callbacks.
class Maad {
constructor(name, NumWeek, NumMonth) {
this.name = name;
this.NumWeek = NumWeek;
this.NumMonth = NumMonth;
}
async queryMaad() {
const url = "mongodb://localhost:27017/vertrieb";
return new Promise((resolve, reject) => {
MongoClient.connect(url, (error, db) => {
if (error) {
reject(error);
}
console.log("month_log steht");
let col = db.collection("umsatz5");
col.aggregate(
[
{ $match: { AD: this.name } },
{ $match: { Kalenderwoche: this.NumWeek } },
{ $count: "procjetnumber" }
],
function (err, result) {
if (err) {
reject(err);
}
resolve(result);
}
);
db.close();
});
});
}
}
Now queryMaad is an async method, one which returns a Promise. That Promise will resolve to the result of col.aggregate on success (you could also resolve to result[0].projectnumber). The promise will reject if there is an error in the connect or col.aggregate methods.
You now get your value like so (probably inside of a function which is itself async):
const result = await ma_1.queryMaad();
You can catch rejection errors here, or allow them to be thrown and catch them higher up.
try {
const result = await ma_1.queryMaad();
} catch (error) {
// console.error or whatever
}
I'm using asynchronous virtual properties to count how often that document has been referenced in a specific other collection. This feature has been added.
// Schema mortician.js
const Pickup = require('./pickup')
const mongoose = require('mongoose')
const mortSchema = mongoose.Schema({
name: {
type: String,
required: true
}
}, { timestamps: true })
mortSchema.virtual('count').get( async function () {
return await Pickup.countDocuments({ mortician: this._id })
})
module.exports = mongoose.model('Mortician', mortSchema)
However, when I try to render it like this, it's returning a Promise: Promise { <pending> } and the displayed value is [object Promise], like joseym describes over here: Support for Asynchronous Virtual #1894
async index(req, res) {
try {
const morticians = await Mortician.find({}).exec()
res.render('pages/morticians', {
title: 'Bestatter',
page: req.originalUrl,
morticians: morticians
})
} catch (err) { err => console.log(err) }
..
}
Since I'm directly passing the morticians element to render, I've idea where to place the needed await for mortician.count. I want to avoid looping (for (const mortician of morticians)), before passing it to res.render. How to solve this?
Does it even make sense, to query ("OtherSchema".find..) with in an virtual property? What's best practice?
You need to execute your promise, then save the result in a variable which will be used to render it
something like this
async index(req, res) {
try {
const morticians = await Mortician.find({}).exec();
res.render('pages/morticians', {
title: 'Bestatter',
page: req.originalUrl,
morticians: morticians
})
} catch (err) {
err => console.log(err)
}
}
I've read that having an async inside a Promise is anti-pattern for async/await. The code below works, but I am curious how else to achieve the same result without having async in Promise.
If I remove it, the linter would tell how I can't use await in my mongodb query. If I remove the await in the mongodb query, then it wouldn't wait for the result.
export const getEmployees = (companyId) => {
return new Promise(async (resolve, reject) => {
const employees = await Employees.find(
{ companyId },
);
// other logic here...
resolve({
employees,
});
});
Thanks.
async functions automatically return Promises already, which resolve with whatever expression is eventually returned. Simply make getEmployees an async function:
export const getEmployees = async (companyId) => {
const employees = await Employees.find(
{ companyId },
);
// other logic here...
return { employees };
};
(but make sure to catch in the consumer of getEmployees just in case there's an error)
As #CertainPerformance answered, that is perfect way to retrieve data from mongoDB using async/await, I would like to add some more information about how to handle errors in this case for correctness of the system, and better error handle to return better status to the client about his request.
I'd say it , you usually want to catch all exceptions from async/await call.
try {
const employees = await Employees.find({
companyId
});
// You can add more logic here before return the data.
return {
employees
};
} catch (error) {
console.error(error);
}
Now let's check the ways we can handle our errors that might occur.
Handle error inside error scope.
Assign a default value to the variable in the catch block.
Inspect error instance and act accordingly.
This is the most common way to handle errors in those cases and most elegant way in my opinion.
Handle error inside error scope:
export const getEmployees = async (companyId) => {
try {
const employees = await Employees.find({
companyId
});
// You can add more logic here before return the data.
return {
employees
};
} catch (error) {
console.error(error);
}
};
Assign a default value to the variable in the catch block:
export const getEmployees = async (companyId) => {
let employees;
try {
employees = await Employees.find({
companyId
});
// You can add more logic here before return the data.
employees = employees;
} catch (error) {
console.error(error);
}
if (employees) { // We received the data successfully.
console.log(employees)
// Business logic goes here.
}
return employees;
};
Inspect error instance and act accordingly:
export const getEmployees = async (companyId) => {
try {
const employees = await Employees.find({
companyId
});
// You can add more logic here before return the data.
return {
employees
};
} catch (error) {
if (error instanceof ConnectionError) {
console.error(error);
} else {
throw error;
}
}
};
Some more explanations about async await and more useful methods that you can find in those answers.
How run async / await in parallel in Javascript