Develop Reference

JavaScript, async/await and promises

I have a problem with async/await and some Promises.
I have this code. It starts here:
let valid = await LoadRouter.load(body);
console.log(valid);//showing me Pending Promises
The function is:
loadGeneratingUnits(data){
let newUGArray = [];
try {
const result = data.map(async (itemGU, index) => {
const checGU = await this.checkDataGu(itemGU.nombre);
if(!checGU){
let newUG = {
generating_unit_name: itemGU.nombre,
description: (!itemGU.descripcion) ? null : itemGU.descripcion,
it_generating_unit_id: (!itemGU.it_unidad_generadora) ? 0 : itemGU.it_unidad_generadora
}
newUGArray.push(newUG);
}
})
return result;
} catch (error) {
throw new Error(error.message)
}
}
This one is where I have the problems
async checkDataGu(guName = null){
if(guName){
return await generatingUnitModel.findOne({
attributes: [
'id',
'generating_unit_name',
],
where: {
generating_unit_name: guName
}
})
}
}
Any comment about the use of async/await on this code?

By making the callback to data.map() async, data.map() is now transforming the data into an array of Promises, because the return value of an async function is always a Promise. await only will wait for a Promise to resolve, not an array of them. You should use Promise.all for that:
const result = Promise.all(data.map(async (itemGU, index) => {
const checGU = await this.checkDataGu(itemGU.nombre);
if(!checGU){
let newUG = {
generating_unit_name: itemGU.nombre,
description: (!itemGU.descripcion) ? null : itemGU.descripcion,
it_generating_unit_id: (!itemGU.it_unidad_generadora) ? 0 : itemGU.it_unidad_generadora
}
newUGArray.push(newUG);
}
}))
Now result is one Promise that will resolve with an array of the values each inner Promise resolved with. Ultimately this means your upper let valid = await LoadRouter.load(body); should resolve with the array you expect.

Resolve promises in iteration

I'm looking to iterate over a number of promises but the lambda function is completing before they are resolved.
module.exports.handler= async(event, context, callback) => {
let a = {'a': 'b', 'x', 'y'};
let b = {'i': 'n'};
Object.keys(listA).map(async ax => {
Object.keys(listB).map(async bx => {
await validate(ax, bx);
}
}
}
async function validate(a, b) {
let promise = getPromise(a, b);
await promise.then((output) => {
...
console.log('success');
});
}
How can all the promises be resolved before the process completes?

This is because awaits in loops that require a callback will not be processed synchronously (See this).
One way you could avoid this is you could build an array of promises, and use Promise.all to await completion.
Example:
module.exports.handler = (event, context, callback) => {
let a = {'a': 'b', 'x': 'foo', 'y': 'bar'};
let b = {'i': 'n'};
let promises = []
Object.keys(a).forEach(ax => {
Object.keys(b).forEach(bx => {
promises.push(validate(ax, bx));
})
})
Promise.all(promises)
.then(results => {
//do stuff with results
})
.catch(error => {
//handle error
})
}

The Promise.allSettled() method returns a promise that resolves after all of the given promises have either resolved or rejected, with an array of objects that each describes the outcome of each promise.
you can use #Michael solution just replace Promise.all with
Promise.allSettled
The Promise.allSettled() method returns a promise that resolves after
all of the given promises have either resolved or rejected, with an
array of objects that each describes the outcome of each promise mozilla Doc.
The Promise.all() method returns a single Promise that fulfills when
all of the promises passed as an iterable have been fulfilled or when
the iterable contains no promises. It rejects with the reason of the
first promise that rejects mozilla doc.
module.exports.handler = (event, context, callback) => {
let a = {'a': 'b', 'x': 'foo', 'y': 'bar'};
let b = {'i': 'n'};
let promises = []
Object.keys(a).forEach(ax => {
Object.keys(b).forEach(bx => {
promises.push(validate(ax, bx));
})
})
Promise.allSettled(promises)
.then(results => {
//do stuff with results
})
.catch(error => {
//handle error
})
}
const promise1 = Promise.resolve(3);
const promise2 = new Promise((resolve, reject) => setTimeout(reject, 100, 'foo'));
const promise3 = Promise.resolve(4);
const promises = [promise1, promise2,promise3];
Promise.allSettled(promises).
then((results) => results.forEach((result) => console.log(result.status)));
// expected output:
// "fulfilled"
// "rejected"
// "fulfilled"

properly using async and await

The function below calls several asynchronous functions in a for loop. It's parsing different CSV files to build a single JavaScript object. I'd like to return the object after the for loop is done. Its returning the empty object right away while it does the asynchronous tasks. Makes sense, however I have tried various Promise / async /await combinations hopes of running something once the for loop has completed. I am clearly not understanding what is going on. Is there a better pattern to follow for something like this or am I thinking about it incorrectly?
async function createFormConfig(files: string[]): Promise<object>
return new Promise(resolve => {
const retConfig: any = {};
for (const file of files) {
file.match(matchFilesForFormConfigMap.get('FIELD')) ?
parseCsv(file).then(parsedData => {
retConfig.fields = parsedData.data;
})
: file.match(matchFilesForFormConfigMap.get('FORM'))
? parseCsv(file).then(parsedData => retConfig.formProperties = parsedData.data[0])
: file.match(matchFilesForFormConfigMap.get('PDF'))
? parseCsv(file).then(parsedData => retConfig.jsPdfProperties = parsedData.data[0])
: file.match(matchFilesForFormConfigMap.get('META'))
? parseCsv(file).then(parsedData => {
retConfig.name = parsedData.data[0].name;
retConfig.imgType = parsedData.data[0].imgType;
// console.log(retConfig); <- THIS CONSOLE WILL OUTPUT RETCONFIG LOOKING LIKE I WANT IT
})
: file.match(matchFilesForFormConfigMap.get('PAGES'))
? parseCsv(file).then(parsedData => retConfig.pages = parsedData.data)
: console.log('there is an extra file: ' + file);
}
resolve(retConfig); // <- THIS RETURNS: {}
});
This is the code I'm using to call the function in hopes of getting my 'retConfig' filled with the CSV data.
getFilesFromDirectory(`${clOptions.directory}/**/*.csv`)
.then(async (files) => {
const config = await createFormConfig(files);
console.log(config);
})
.catch(err => console.error(err));
};

First, an async function returns a Promise, so you dont have to return one explicitely.Here is how you can simplify your code:
async function createFormConfig(files: string[]): Promise<object> {
// return new Promise(resolve => { <-- remove
const retConfig: any = {};
// ...
// The value returned by an async function is the one you get
// in the callback passed to the function `.then`
return retConfig;
// }); <-- remove
}
Then, your function createFormConfig returns the config before it has finished to compute it. Here is how you can have it computed before returning it:
async function createFormConfig(files: string[]): Promise<object> {
const retConfig: any = {};
// Return a Promise for each file that have to be parsed
const parsingCsv = files.map(async file => {
if (file.match(matchFilesForFormConfigMap.get('FIELD'))) {
const { data } = await parseCsv(file);
retConfig.fields = data;
} else if (file.match(matchFilesForFormConfigMap.get('FORM'))) {
const { data } = await parseCsv(file);
retConfig.formProperties = data[0];
} else if (file.match(matchFilesForFormConfigMap.get('PDF'))) {
const { data } = await parseCsv(file);
retConfig.jsPdfProperties = data[0];
} else if (file.match(matchFilesForFormConfigMap.get('META'))) {
const { data } = await parseCsv(file);
retConfig.name = data[0].name;
retConfig.imgType = data[0].imgType;
} else if (file.match(matchFilesForFormConfigMap.get('PAGES'))) {
const { data } = await parseCsv(file);
retConfig.pages = data;
} else {
console.log('there is an extra file: ' + file);
}
});
// Wait for the Promises to resolve
await Promise.all(parsingCsv)
return retConfig;
}

async functions already return promises, you don't need to wrap the code in a new one. Just return a value from the function and the caller will receive a promise that resolves to the returned value.
Also, you have made an async function, but you're not actually using await anywhere. So the for loop runs through the whole loop before any of your promises resolve. This is why none of the data is making it into your object.
It will really simplify your code to only use await and get rid of the then() calls. For example you can do this:
async function createFormConfig(files: string[]): Promise<object> {
const retConfig: any = {};
for (const file of files) {
if (file.match(matchFilesForFormConfigMap.get('FIELD')){
// no need for the then here
let parsedData = await parseCsv(file)
retConfig.field = parsedData.data
}
// ...etc
At the end you can just return the value:
return retConfig

Promise All with Axios

I just read an Article related to promise and was unable to comprehend how we can do multiple API call using Axios via Promise.all
So consider there are 3 URL, lets call it something like this
let URL1 = "https://www.something.com"
let URL2 = "https://www.something1.com"
let URL3 = "https://www.something2.com"
And an array in which we will store Value
let promiseArray = []
Now, I want to run this in parallel (Promise.all), but I am unable to figure our how will we do it? Because axios have a promise in itself (or at-least that's how I have used it).
axios.get(URL).then((response) => {
}).catch((error) => {
})
Question: Can someone please tell me how we can we send multiple request using promise.all and axios

The axios.get() method will return a promise.
The Promise.all() requires an array of promises. For example:
Promise.all([promise1, promise2, promise3])
Well then...
let URL1 = "https://www.something.com"
let URL2 = "https://www.something1.com"
let URL3 = "https://www.something2.com"
const promise1 = axios.get(URL1);
const promise2 = axios.get(URL2);
const promise3 = axios.get(URL3);
Promise.all([promise1, promise2, promise3]).then(function(values) {
console.log(values);
});
You might wonder how the response value of Promise.all() looks like. Well then, you could easily figure it out yourself by taking a quick look at this example:
var promise1 = Promise.resolve(3);
var promise2 = 42;
var promise3 = new Promise(function(resolve, reject) {
setTimeout(resolve, 100, 'foo');
});
Promise.all([promise1, promise2, promise3]).then(function(values) {
console.log(values);
});
// expected output: Array [3, 42, "foo"]
For more information: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

fetchData(URL) function makes a network request and returns promise object with pending status.
Promise.all will wait till all promises are resolved or any promise is rejected. It returns a promise and resolve with array of responses.
let URLs= ["https://jsonplaceholder.typicode.com/posts/1", "https://jsonplaceholder.typicode.com/posts/2", "https://jsonplaceholder.typicode.com/posts/3"]
function getAllData(URLs){
return Promise.all(URLs.map(fetchData));
}
function fetchData(URL) {
return axios
.get(URL)
.then(function(response) {
return {
success: true,
data: response.data
};
})
.catch(function(error) {
return { success: false };
});
}
getAllData(URLs).then(resp=>{console.log(resp)}).catch(e=>{console.log(e)})
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

You still can use promise.all with array of promises passed to it and then wait for all of them to be resolved or one of them gets rejected.
let URL1 = "https://www.something.com";
let URL2 = "https://www.something1.com";
let URL3 = "https://www.something2.com";
const fetchURL = (url) => axios.get(url);
const promiseArray = [URL1, URL2, URL3].map(fetchURL);
Promise.all(promiseArray)
.then((data) => {
data[0]; // first promise resolved
data[1];// second promise resolved
})
.catch((err) => {
});

Just to add to the approved answer axios also has its of Promise.all in the form axios.all it expects a list of promises and returns an array of responses.
let randomPromise = Promise.resolve(200);
axios.all([
axios.get('http://some_url'),
axios.get('http://another_url'),
randomPromise
])
.then((responses)=>{
console.log(responses)
})

Hope this may help
var axios = require('axios');
var url1 = axios.get('https://www.something.com').then(function(response){
console.log(response.data)
})
var url2 = axios.get('https://www.something2.com').then(function(response){
console.log(response.data)
})
var url3 = axios.get('https://www.something3.com').then(function(response){
console.log(response.data)
})
Promise.all([url1, url2, url3]).then(function(values){
return values
}).catch(function(err){
console.log(err);
})

Use Promise.allSettled which is almost same as Promise.all but it doesn't reject as a whole if any promise rejects.
Promise.allSettled just waits for all promises to settle, regardless of the result.
const [ first, second, third ] = await Promise.allSettled([
fetch('https://jsonplaceholder.typicode.com/todos/'),
fetch('https://jsonplaceholder.typicode.com/todos/'),
fetch('https://jsonplaceholder.typicodecomtodos')
])
// P.S: you can replace fetch with axios
The resulting array has:
{ status:"fulfilled", value:result } for successful responses
{ status:"rejected", reason:error } for errors.

Something like this should work:
const axios = require('axios');
function makeRequestsFromArray(arr) {
let index = 0;
function request() {
return axios.get('http://localhost:3000/api/' + index).then(() => {
index++;
if (index >= arr.length) {
return 'done'
}
return request();
});
}
return request();
}
makeRequestsFromArray([0, 1, 2]);

// using axios return
const promise0 = axios.get( url )
.then( function( response ) {
return response
} )
// using function new promise
function promise1() {
return new Promise( ( resolve, reject ) => {
const promise1 = axios.get( url )
.then( function( response ) {
return response
} )
resolve( promise1 )
) }
}
Promise.all( [promise0, promise1()] ).then( function(results) {
console.log(results[0]);
console.log(results[1]);
});

Returning value from multiple promises within Meteor.method

After a bunch of looking into Futures, Promises, wrapAsync, I still have no idea how to fix this issue
I have this method, which takes an array of images, sends it to Google Cloud Vision for logo detection, and then pushes all detected images with logos into an array, where I try to return in my method.
Meteor.methods({
getLogos(images){
var logosArray = [];
images.forEach((image, index) => {
client
.logoDetection(image)
.then(results => {
const logos = results[0].logoAnnotations;
if(logos != ''){
logos.forEach(logo => logosArray.push(logo.description));
}
})
});
return logosArray;
},
});
However, when the method is called from the client:
Meteor.call('getLogos', images, function(error, response) {
console.log(response);
});
the empty array is always returned, and understandably so as the method returned logosArray before Google finished processing all of them and returning the results.
How to handle such a case?

With Meteor methods you can actually simply "return a Promise", and the Server method will internally wait for the Promise to resolve before sending the result to the Client:
Meteor.methods({
getLogos(images) {
return client
.logoDetection(images[0]) // Example with only 1 external async call
.then(results => {
const logos = results[0].logoAnnotations;
if (logos != '') {
return logos.map(logo => logo.description);
}
}); // `then` returns a Promise that resolves with the return value
// of its success callback
}
});
You can also convert the Promise syntax to async / await. By doing so, you no longer explicitly return a Promise (but under the hood it is still the case), but "wait" for the Promise to resolve within your method code.
Meteor.methods({
async getLogos(images) {
const results = await client.logoDetection(images[0]);
const logos = results[0].logoAnnotations;
if (logos != '') {
return logos.map(logo => logo.description);
}
}
});
Once you understand this concept, then you can step into handling several async operations and return the result once all of them have completed. For that, you can simply use Promise.all:
Meteor.methods({
getLogos(images) {
var promises = [];
images.forEach(image => {
// Accumulate the Promises in an array.
promises.push(client.logoDetection(image).then(results => {
const logos = results[0].logoAnnotations;
return (logos != '') ? logos.map(logo => logo.description) : [];
}));
});
return Promise.all(promises)
// If you want to merge all the resulting arrays...
.then(resultPerImage => resultPerImage.reduce((accumulator, imageLogosDescriptions) => {
return accumulator.concat(imageLogosDescriptions);
}, [])); // Initial accumulator value.
}
});
or with async/await:
Meteor.methods({
async getLogos(images) {
var promises = [];
images.forEach(image => {
// DO NOT await here for each individual Promise, or you will chain
// your execution instead of executing them in parallel
promises.push(client.logoDetection(image).then(results => {
const logos = results[0].logoAnnotations;
return (logos != '') ? logos.map(logo => logo.description) : [];
}));
});
// Now we can await for the Promise.all.
const resultPerImage = await Promise.all(promises);
return resultPerImage.reduce((accumulator, imageLogosDescriptions) => {
return accumulator.concat(imageLogosDescriptions);
}, []);
}
});