function projectHTML(e) {
let proj = await getProject(e.srcElement.dataset.id);
console.log(proj);
return `
<div id="Project">
<h1>${proj.name}</h1>
<p>Description: ${proj.description}</p>
</div>
`;
}
async function getProject(id) {
try {
let res = await fetch(`http://127.0.0.1:5000/api/projects/${id}`);
res = await res.json();
return res;
} catch (e) {
console.error(e);
}
}
The first function, projectHTML(), is being called from another file. I am able to return the value from function gethelp(), ProjectsHTML(). I can even log it in the console and indeed see it's correct. However, it won't load up into the template literal that I have. Please, someone lend a hand. I tried doing async...await in try blocks in ProjectsHTML() and still no luck.
Image of web issue
Function
async function getProject(id) {
try {
const res = await fetch(`http://127.0.0.1:5000/api/projects/${id}`);
return res.json();
} catch (e) {
console.error(e);
}
}
Call
getProject(id).then((data) => {
console.log(data)
})
You need to modify your code like following:
async function projectHTML(e) {
let proj = await getProject(e.srcElement.dataset.id);
console.log(proj)
return `<div id="Project">
<h1>${proj.name}</h1>
<p>Description: ${proj.description}</p>
</div>`;
};
If I am not wrong above function is an event handler and you are using passing it in your html. If not, and you are calling it from another function, you need to use awaitwhile calling this function:
await projectHtml(e)
Let me know if this helps.
Related
I'm making a application in javascript (Nodejs), I'm kinda new to it. My code needs to do multiple congruent requests, I organized my code in async functions so I can linearly call them
my first code looked like this
async function Fa(param,param1,callback,error){
//SOME CODE
}
async function Fb(param){
//SOME CODE
}
async function Fc(param){
//SOME CODE
}
function Fd(param,callback,error){
//SOME CODE
}
and use it like this
Fa(param,param1,
(result,result1) => {
Fb(resultB) => {
Fc(resultB);
}
},
(error) => { /*handle error*/ }
);
Fd(param,
(result)=>{
//handle result
},
(error)=>{
//handle error
}
)
of course this is not the right way to go for me...
so I got creative and wrote this
async function Fa(param,param1){
var errorFun,resultFun;
function setOnError(error){errorFun = error;}
function setOnResult(result){resultFun = result;}
async function execute(){
//SOME CODE HERE
}
return {setOnError,setOneResult,execute}
//I had to write a execute function because `Fa` being an async function I couldn't access setError and other inner functions from outside
}
I'm not repeating all the functions but I hope you got the idea
so my code looks like this
var resultA,resultA1;
var fa = await Fa(param,param1);
fa.setOnError((error) => /*handle error*/ );
//I want to terminate my code here (all this being in a function) but I don't know how to do so because I can't even set a flag to understand if error function has been called because I have multiple function with error and setting multiple flags would be stupid
fa.setOnResult( (result,result1) => {resultA = result; resultA1 = result1} );
await fa.execute()
var fb = await Fb(param);
fb.setOnResult((result) => {Fc(result);})
await fb.execute();
var fd = await Fd(param);
fd.setOnResult(/*some code*/);
fd.setOnError(/*some code*/);
await fd.execute();
I like my second version more but I don't know how to handle the errror (I want to stop executing the main function) and I think it's a bit overkill..
Any suggestion will be appreciated, thank you
you can try this code.
if execute function throw an error, it will be caught by the try-catch block in the main function
async function Fa(param, param1) {
var errorFun, resultFun;
function setOnError(error) { errorFun = error; }
function setOnResult(result) { resultFun = result; }
async function execute() {
//SOME CODE HERE
if (error) {
throw new Error(error);
}
}
return { setOnError, setOnResult, execute }
}
async function main() {
try {
var fa = await Fa(param, param1);
fa.setOnError((error) => /*handle error*/ );
fa.setOnResult((result, result1) => { resultA = result; resultA1 = result1 });
await fa.execute();
var fb = await Fb(param);
fb.setOnResult((result) => { Fc(result); });
await fb.execute();
var fd = await Fd(param);
fd.setOnResult(/*some code*/);
fd.setOnError(/*some code*/);
await fd.execute();
} catch (error) {
// handle error
}
}
Is it possible to return a response when call a function within another function?
I have following codes -
// Add Category
exports.saveCategory = async function(catData, callback){
try{
const images = await uploadImages(catData.files);
console.log(images); //nothing prints here
const save = await function(catData,images){
console.log('catdata');
return callback({status:200,message:'test'});
}
} catch (e) {
console.log(e);
}
}
function uploadImages(images) {
//some stuff
return images;
}
Expected output : I want to return name of uploaded images from uploadImages function and pass it to another function to save in database.
Only async function returns promise.Make your uploadImages function async
async function uploadImages(images) {
//some stuff
return images;
}
The solution of Shubh Dixit works fine but i have to correct, that async functions do NOT return a real Promise but async function object. These do not have a .catch() or .finally() method. He is right, that a return inside a async function object will return a Promise.resolve()
async function x() {
return 2;
}
let value = await x();
returns a solved Promise with the value 2. Then the await returns the value of the resolved Promise to value. But if you try
let value = await x().catch((error)=> {console.log(error);});
you will recieve an error that .catch() is no method of x.
I am currently working with destructuring arrays in Javascript, I would like to access these variables in other functions but currently, I am struggling to figure out how I might go about this.
I've tried calling the function and then console.log(thermostatArray) -> I believe this returned pending promise
I've tried calling the function and awaiting it and then console.log thermostatArray.
dataFormat() is properly able to see log and use the array but heatCallCheck() is not and I am not seeing past the issue yet.
var express = require("express");
var router = express.Router();
const multer = require("multer");
var Excel = require("exceljs");
const index = require("../routes/index");
const workbook = new Excel.Workbook();
async function convertFile(workbook) {
csvWorkbook = workbook.csv.readFile("./uploads/uploadedFile.csv");
await csvWorkbook.then(async function(csvWorkbook) {
const worksheet = workbook.getWorksheet("sheet1");
try {
// await dataFormat(worksheet);
await heatCallCheck(worksheet,)
} catch (err) {
console.log(err);
}
await workbook.xlsx.writeFile("./uploads/convertedFile.xlsx").then(() => {
console.log("converted file written");
});
});
}
async function dataFormat(worksheet) {
let thermostatArray = []
await csvWorkbook.then(async function(worksheet) {
const serialNum = worksheet.getCell("D1").value;
const thermostatName = worksheet.getCell("D2").value;
const startDate = worksheet.getCell("D3").value;
const endDate = worksheet.getCell("D4").value;
const thermostat = worksheet.eachRow({includeEmpty: true}, function(row,rowNumber){
if (rowNumber > 6) {
thermostatArray.push(row.values)
}
})
console.log(`${thermostatArray[5]} Array Sample from dataFormat` )
console.log(`${thermostatArray[6]} Array Sample from dataFormat` )
return thermostatArray
})}
async function heatCallCheck(worksheet,thermostatArray) {
let test = await dataFormat(worksheet).then(thermostatArray => {
return thermostatArray[5]
}).catch(err => {
console.error(err)
})
console.log(`${test} result `)
}
My expected results, in this case, would be that I would be able to see the 4th element in thermostat array using the heatCallCheck() function.
I figured I would be able to access it after the .then is called.
my understanding is that .then(thermostatArray =>
makes that array the return value.
You do this:
async function someFunction() {
const myResultFromAPromise = await functionThatReturnsAPromise();
// ....do some stuff
return myResultFromAPromise;
}
OR
function someFunction() {
return functionThatReturnsAPromise().then(function(myResultFromAPromise) {
// ...do some stuff
return myResultFromAPromise;
});
}
but don't do both, it's just terribly confusing.
EDIT: as a commenter pointed out, you can await anything, but it's clear from your code that you're very confused about the point of async/await
Searched on many places and also went through many tutorials to deeply understand the async/awiat behavior of the javascript. Here is my code:
var bookAppointment = async (data) => {
return User.findOne({_id: data.user_id})
.then((userfound) =>{
//manipulate user's data and find if in array the specific object exist
var found = await userfound.dataArray.find( function(element){
return element.data == data.user_data
});
//here I want to wait until above result comes to evaulate below condition
if(found)
{
return "Sorry! data does not exist";
}
else
{
return userfound;
}
})
.catch(err => {
return err
});
}
What I want to achieve is to make my if else condition to wait above find function on array of javascript. Here is the error I'm facing:
SyntaxError: await is only valid in async function
I'm unable to understand where I'm wrong! Even my function has keyword async with its definition. Anyone around for a quick help?
At (userfound) =>{...} you're scoping another function.
For await to work, you need it to be something like async (userfound) => {...}
Catch and Then keyword are not used is async/await functions.
var bookAppointment = async (data) => {
var found = await User.findOne({_id: data.user_id});
try {
//do here like in then
} catch (e) {
//error handling
}
}
According to this article: https://medium.com/#bluepnume/learn-about-promises-before-you-start-using-async-await-eb148164a9c8
It seems like it could be possible to use below syntax:
let [foo, bar] = await Promise.all([getFoo(), getBar()]);
for multiple promises execution. However while using it I get Uncaught SyntaxError: Unexpected identifier.
How can i use async/await and promise.all to achieve multiple simultaneous operations executed and one resolve with a response.
-----EDITED
the function i am using inside promise.all is this one:
async function getJson(callback) {
try {
let response = await fetch('URL_LINK_HERE');
let json = await response.json();
return json;
} catch(e) {
console.log('Error!', e);
}
}
as a test field i am using google chrome Version 60.0.3112.113
Most likely your code looks something like this:
var thingsDone = await Promise.all([
Promise.resolve("eat"),
Promise.resolve("sleep")
]);
console.log(thingsDone);
This will not work because the await keyword is only valid within an async function (which the global context is not). It will simply cause a syntax error.
One way to handle this is to use it like a regular old promise and not using the await keyword:
Promise.all([
Promise.resolve("eat"),
Promise.resolve("sleep")
]).then((thingsDone) => console.log(thingsDone));
Or if you want to get fancy (or need more room to write an expressive function), wrap your logic in an async function and then handle it like a promise:
async function doThings() {
var eat = await Promise.resolve("eat");
var sleep = await Promise.resolve("sleep");
return Promise.all([Promise.resolve(eat), Promise.resolve(sleep)]);
}
doThings().then((thingsDone) => console.log(thingsDone));
This would allow you to use await as needed and is much more helpful in a more complicated function.
Or even more succinctly using an immediately-executing async function:
(async() => {
var eat = await Promise.resolve("eat");
var sleep = await Promise.resolve("sleep");
return Promise.all([Promise.resolve(eat), Promise.resolve(sleep)]);
})().then((thingsDone) => console.log(thingsDone));
torazaburo pointed me to right direction in his comments and i figured it out, this is the final code that is working:
var getJson = async function() {
try {
let response = await fetch('http://mysafeinfo.com/api/data?list=englishmonarchs&format=json');
let json = await response.json();
return json;
} catch(e) {
console.log('Error!', e);
}
}
var check_all = async function(callback) {
callback( [foo, bar] = await Promise.all([getJson(), getJson()]) );
};
check_all(function(data) {
console.log(data);
});
This works, example here: https://jsfiddle.net/01z0kdae/1/