issue with async await - javascript

I am trying to make two block of code to run sequentially with async and await
I have the code in stackblitz, open the console on Chrome to see the trace
let isMomHappy = true;
function willIgotNewPhone () {
return new Promise( (resolve, reject) => {
if (isMomHappy) {
const phone = {
brand: 'samsung',
color : 'black'
};
resolve(phone);
} else {
const reason = new Error('mom not happy');
reject(reason);
}
});
}
async function showOff(phone) {
return new Promise( (resolve, reject) => {
const message = ' Hey Friend I show my phone ' + phone.brand;
resolve(message);
});
}
async function askMom() {
return await new Promise( async (resolve) => {
console.log('before asking Mom'); // log before
await willIgotNewPhone()
.then( function(fullfilled) {
console.log('Got phone from mom ' + JSON.stringify(fullfilled));
})
.catch( function(error) {
console.log(error.message);
});
console.log('after asking Mom'); // afeter log
resolve('END');
});
}
let data: any[] = [];
async function createData() {
return new Promise( (resolve, reject) => {
for (let index = 0; index < 500000; index++) {
const element: any = {};
element.id = index;
element.name = '' + index;
data.push(element);
}
if (data && data.length > 0) {
console.log(' ====== creating data size=%s', data.length);
resolve(data);
} else {
reject( new Error(' ==== Creating data Error : empty'));
}
});
}
async function callCreateData() {
return new Promise( async (resolve) => {
console.log(' ======before creating data');
await createData().then( (dataReturn: any[]) => {
console.log(' ----datareturn length=%s', dataReturn.length);
});
console.log(' ======after creating data');
});
}
async function callingMom() {
await askMom().then( (str) => {
console.log(str);
});
}
callingMom();
callCreateData();
I am calling 2 functions this.callingMom() and this.callCreateData();
and expecting the traces of the 2 functions to be sequential
I was expecting the following output
before asking Mom
Got phone from mom {"brand":"samsung","color":"black"}
after asking Mom
=====before creating creating data
===== creating data size=500000
----datareturn length=500000
===== after creating creating data
but I got the output :
before asking Mom
======before creating data
====== creating data size=500000
Got phone from mom {"brand":"samsung","color":"black"}
----datareturn length=500000
======after creating data
after asking Mom
END
Any idea what is my problem ?
Thanks

async functions can be used for two things, primarilly: to return a Promise, and to be able to use the await keyword inside. If you're not using await, or if the only await you're using is the Promise that's going to be returned, there's no point in having an async function at all - just use a normal function that returns a Promise, like in your willIgotNewPhone.
Also, in order to chain promises together, you need to use then. Simply calling asynchronous functions right after the other won't cause the thread to pause until they're done. Like this:
callingMom().then(callCreateData);
let isMomHappy = true;
function willIgotNewPhone() {
return new Promise((resolve, reject) => {
if (isMomHappy) {
const phone = {
brand: 'samsung',
color: 'black'
};
resolve(phone);
} else {
const reason = new Error('mom not happy');
reject(reason);
}
});
}
function showOff(phone) {
return new Promise((resolve, reject) => {
const message = ' Hey Friend I show my phone ' + phone.brand;
resolve(message);
});
}
function askMom() {
return new Promise(async (resolve) => {
console.log('before asking Mom'); // log before
await willIgotNewPhone()
.then(function(fullfilled) {
console.log('Got phone from mom ' + JSON.stringify(fullfilled));
})
.catch(function(error) {
console.log(error.message);
});
console.log('after asking Mom'); // afeter log
resolve('END');
});
}
let data = [];
function createData() {
return new Promise((resolve, reject) => {
for (let index = 0; index < 500000; index++) {
const element = {};
element.id = index;
element.name = '' + index;
data.push(element);
}
if (data && data.length > 0) {
console.log(' ====== creating data size=%s', data.length);
resolve(data);
} else {
reject(new Error(' ==== Creating data Error : empty'));
}
});
}
function callCreateData() {
return new Promise(async (resolve) => {
console.log(' ======before creating data');
await createData().then((dataReturn) => {
console.log(' ----datareturn length=%s', dataReturn.length);
});
console.log(' ======after creating data');
});
}
function callingMom() {
return askMom().then((str) => {
console.log(str);
});
}
callingMom().then(callCreateData);

Related

React Native .then seems to be running out of order

I currently have the following method in a react native class, however I think this would apply to JS in general but I might be wrong:
dbGetTemplateOptions = () => {
let dataArray = [];
let subcategories = this.state.subcategories;
subcategories.forEach(item => {
let getSubValues = new Promise(function(resolve, reject) {
resolve(item);
})
getSubValues.then((item) => this.dbGetValues(item.subCatId))
getSubValues.then((value) => console.log(2))
});
}
According to my limited js knowledge of promises, in the above I'm resolving a promise and running getSubValues.then() which would mean that each of the .then methods run AFTER the method returns.
In the above code I call the method dbGetValues(item.subCatId)
Which is this:
async dbGetValues(subCatId) {
let subValues = [];
let result = await db.transaction(tx => {
tx.executeSql(
'SELECT * FROM dr_template_relational '
+ ' INNER JOIN dr_report_categorie_values on dr_report_categorie_values.id = dr_template_relational.value_id'
+ ' WHERE dr_template_relational.subcategory_id = ' + subCatId + ' AND dr_template_relational.template_id = ' + this.state.currentTemplateId,
[],
(trans, result) => {
const sqLiteResults = result.rows._array;
sqLiteResults.forEach(el => {
subValues.push({ subCategoryId: subCatId, values: el.value_id, name: el.name, narrative: el.narrative });
})
});
},
(err) => console.error(err),
() => {
console.log(1);
return subValues;
}
);
return result;
}
Notice my console.log(2) is after the then which is calling the method.
Inside the method also notice I have console.log(1). I would expect these to run in order since I'm waiting for it to finish before the next then runs. I realize I'm incorrect because the console.log is actually.
2
2
1
1
dbGetTemplateOptions = () => {
let dataArray = [];
let subcategories = this.state.subcategories;
subcategories.forEach(item => {
let getSubValues = new Promise(function(resolve, reject) {
resolve(item);
})
getSubValues.then((item) => this.dbGetValues(item.subCatId))
getSubValues.then((value) => console.log(2))
});
}
You're resolving the promise before actually calling the asynchronous dbGetValues function. This is why the then triggers before the callbacks of dbGetValues do.
It's hard to know what changes to make without more context of what you're tying to do, but I think you might actually want something like:
dbGetTemplateOptions = () => {
let dataArray = [];
let subcategories = this.state.subcategories;
subcategories.forEach(item => {
let getSubValues = new Promise(async (resolve, reject) => {
const result = await this.dbGetValues(item.subCatId)
resolve(result);
})
getSubValues.then((value) => console.log(2))
});
}
Or to try to simplify even more:
dbGetTemplateOptions = () => {
let dataArray = [];
let subcategories = this.state.subcategories;
subcategories.forEach(async (item) => {
const result = await this.dbGetValues(item.subCatId)
// Do something with result here
console.log(2)
});
}
Obviously this is based on assumptions of what you're doing

Nested promises with for loop doesn't work

I have this nested loop of promises and at then end a for loop that pushes items in the files array.
public async content() {
let files = [];
return new Promise(async (resolve, reject) => {
await this.axios.get(this.currentRequest).then(async biosample => {
await this.axios.get(this.currentRequest + biosample.data.item).then(async datasets => {
for (let i = 0; i < datasets.data.Items.length; i++) {
await this.axios.get(this.currentRequest + datasets.data.Items[i].Id).then(response => {
files.push(response.data.Item);
}).catch(reason => {
reject(reason)
});
}
})
}).catch(function (error) {
reject(new Error(error.response))
});
resolve(files)
})
}
The calls are made correctly, because if I use Promise.all([promises here]), then it works. But I'm trying to learn to chain promises properly.
When I'm debugging with webstorm datasets seems to be defined and have the necessary properties.
Schematically you code must like this
content() {
return Promise.resolve()
.then(_ => this.axios.get(this.currentRequest)
.then(biosample => this.axios.get(this.currentRequest + biosample.data.item))
.then(datasets => Promise.all(datasets.data.Items.map(item => this.axios.get(this.currentRequest + item.Id))))
}
You're not using the potential of await. Your code can be as simple at this:
public async content() {
let files = [];
return new Promise(async (resolve, reject) => {
try {
let biosample = await this.axios.get(this.currentRequest)
let datasets = await this.axios.get(this.currentRequest + biosample.data.item)
for (let i = 0; i < datasets.data.Items.length; i++) {
let response = await this.axios.get(this.currentRequest + datasets.data.Items[i].Id)
files.push(response.data.Item);
}
resolve(files)
} catch(error) {
reject(new Error(error.response || error))
};
})
}

"[__array_observer__: ModifyArrayObserver]" when iterating over an array

First question here so let me know if I don't include everything that is needed.
I have an array callede this.tickets that is being stored in my constructor like the following:
constructor(TicketService) {
this.ticketService = TicketService;
this.customers;
this.tickets = [];
this.status = false;
}
I have a function that makes an api call and pushes the response data in one at a time after checking if the data exists in my local DB.
setTickets () {
this.customers.forEach(data => {
var acctName = encodeURIComponent(data.accountname);
this.ticketService.getTicketByAccount(acctName).then(resp => {
if (resp.data.accountname == data.accountname) {
this.tickets.push(resp.data)
}
})
})
}
Afterwards I am trying to iterate over the array in a seperate function:
getZendeskTicketStatus () {
console.log(this.tickets)
console.log("this is the arrys length: " + this.tickets.length)
for (var i = 0; i < this.tickets.length; i++) {
console.log(this.tickets[i])
}
}
I am getting the following in response:
[__array_observer__: ModifyArrayObserver]
this is the arrys length: 0
I am calling each of these functions in a promise so they happen in order.
activate() {
new Promise((resolve, reject) => {
var customerPromise = this.setCustomers();
resolve(customerPromise);
console.log("First")
})
.then(() => {
console.log("Second")
this.setTickets();
})
.then(() => {
console.log("Third")
this.createTicketsInDb();
this.getZendeskTicketStatus();
})
}
I don't understand what this array_observer is or how I can iterate over this array successfully.
Any help would be appreciated.
Thank you in advance.
try to understand this example, hope it will clarify
so if i am calling setTicket does not mean it going to wait for the response .
so to make setTickets to wait for the response i did this modification
setTickets () {
return new Promise((resolve, reject)=>{
this.customers.forEach(data => {
var acctName = encodeURIComponent(data.accountname);
this.ticketService.getTicketByAccount(acctName).then(resp => {
if (resp.data.accountname == data.accountname) {
this.tickets.push(resp.data)
}
resolve();
})
})
})
}
now ask the calling function to wait for the response
activate() {
new Promise((resolve, reject) => {
var customerPromise = this.setCustomers();
resolve(customerPromise);
console.log("First")
}).then(async () => {
console.log("Second");
//dont skip it till the time you get the response
await this.setTickets();
}).then(() => {
console.log("Third");
this.createTicketsInDb();
this.getZendeskTicketStatus();
})
}
Hope this clarifies.

Nodejs How To Iterate With a Promise

I'm trying to iterate through an array of AD users and return some user information.
I've been looking for a few hours now, or more and haven't been quite able to get my head around the async nature of the activedirectory2 npm package.
I'm getting part of the result I need, however when iterating through the list of usernames, I'm only getting the first one printing out to console.
getADUser.js:
var ActiveDirectory = require('activedirectory2');
var config = require('../../conf/conf-ad.json')
var fileTime = require('./w32FiletimeToEpoch')
var moment = require('moment')
// Find user, return all
var ad = new ActiveDirectory(config);
var getADUser = function (sAMAccountName, opts) {
return new Promise(function (resolve, reject) {
ad.findUser(opts, sAMAccountName, function (err, user) {
if (err) {
console.log('ERROR: ' + JSON.stringify(err));
// return;
}
if (!user) {
console.log('User: ' + sAMAccountName + ' not found.');
} else {
if (user.userAccountControl == 514) {
user.userAccountControl = 'Disabled'
} else {
user.userAccountControl = 'Active'
}
if (user.pwdLastSet) {
user.pwdLastSet = `${moment(fileTime(user.pwdLastSet))} - ${moment(fileTime(user.pwdLastSet)).fromNow()}`
}
if (user.lastLogonTimestamp) {
user.lastLogonTimestamp = `${moment(fileTime(user.lastLogonTimestamp))} - ${moment(fileTime(user.lastLogonTimestamp)).fromNow()}`
}
if (user.lastLogon) {
user.lastLogon = `${moment(fileTime(user.lastLogon))} - ${moment(fileTime(user.lastLogon)).fromNow()}`
}
// return;
// return user.promise();
// console.log(user)
// test.push(user)
resolve(JSON.stringify(user));
}
});
})
}
module.exports = getADUser
checkADCompletions.js:
var checks = ['USERONE', 'USERTWO']
let opts = {
attributes: ['sAMAccountName', 'userAccountControl']
};
let checkADCompletions = function (userList) {
let data = []
return new Promise(function (resolve, reject) {
return new Promise(function (res, rej) {
for (let i = 0; i < userList.length; i++) {
getADUser(userList[i], opts)
.then(function (s) {
data.push(s)
}).then(function () {
resolve(data)
})
}
})
})
}
checkADCompletions(checks).then(function (d) {
console.log(d) \\ Only prints the first user details
})
You can use Promise.all like this:
let checkADCompletions = function (userList) {
var promises = userList.map(function (user) {
return getADUser(user, opts);
})
return Promise.all(promises);
}
You are basically creating an array of promises and then executing them all concurrently.
And then use it like so:
checkADCompletions(checks)
.then(function (responses) {
console.log(responses); // this will be an array
})
.catch(function (err) {
// if any of the promises fail, it will enter here.
// err will be the value of the rejected promise
})
Promise.all will fail even if just one of the checked users fail. So, you need to handle errors nicely, i.e. deal with any possible outcome of ad.findUser:
var getADUser = function (sAMAccountName, opts) {
return new Promise(function (resolve, reject) {
ad.findUser(opts, sAMAccountName, function (err, user) {
if (err || user == null) {
console.log('ERROR: ' + JSON.stringify(err));
reject(err);
}
if (user.userAccountControl == 514) {
user.userAccountControl = 'Disabled'
} else {
user.userAccountControl = 'Active'
}
if (user.pwdLastSet) {
user.pwdLastSet = `${moment(fileTime(user.pwdLastSet))} - ${moment(fileTime(user.pwdLastSet)).fromNow()}`
}
if (user.lastLogonTimestamp) {
user.lastLogonTimestamp = `${moment(fileTime(user.lastLogonTimestamp))} - ${moment(fileTime(user.lastLogonTimestamp)).fromNow()}`
}
if (user.lastLogon) {
user.lastLogon = `${moment(fileTime(user.lastLogon))} - ${moment(fileTime(user.lastLogon)).fromNow()}`
}
resolve(user);
});
})
}
A simple fix would be to call resolve only when the for loop is finished.
// checkADCompletions.js
var checks = ['USERONE', 'USERTWO']
let opts = {
attributes: ['sAMAccountName', 'userAccountControl']
};
let checkADCompletions = function (userList) {
let data = []
return new Promise(function (resolve, reject) {
for (let i = 0; i < userList.length; i++) {
getADUser(userList[i], opts)
.then(function (s) {
data.push(s)
}).then(function () {
if (i === userList.length) {
resolve(data)
}
})
}
})
})
}
checkADCompletions(checks).then(function (d) {
console.log(d)
})
When you call resolve, you close out the Promise. You're initiating two Promises and then a for loop, and you call resolve inside the for loop. So the first user gets populated but the for loop does not continue because the Promise has finished executing. Move resolve outside of the loop and you should be good to go.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/resolve

How to make this piece of code asynchronous via promises?

Any Glue. Please do not give example of SETTIMEOUT.
My supervisor said that it is unnecessary having more then() statement if the then()'s do not return any new promise.I could not get it completely, I have looked at Exploring ES6 but there is no very well example of my situation.
let readData = new Promise(function (resolve, reject) {
fs.readFile('/home/geek/Desktop/activity-logs.csv', 'utf8', (err, data) => {
if (err)
reject();
resolve(data);
});
});
readData
.then((data) => {
bankLogs = splitString(data, ';')
})
.then(() => {
for (let index = 2; index < bankLogs.length; index += 5) {
objectOfUsers[bankLogs[index]] = {}
temporarySymbols.push(bankLogs[index].concat(bankLogs[index + 1]));
}
Object.keys(objectOfUsers).forEach(function (element) {
objectKeys.push(element)
});
for (let index = 0; index < objectKeys.length; index++)
createObject(index);
console.log(objectOfUsers)
})
.catch((err) => console.log('Error happened : ' + err));
From your code snippet you implemented Promise chain where resolving one promise initializes and returns new one.
Something like:
let readData = new Promise(/* ... */);
readData.then((data) => {
let promise2 = new Promise(/* ... */);
return promise2;
}).then(() => {
// ...
})
.catch((err) => console.log('Error happened : ' + err));
However after resolving readData you only wrote simple logic and there is no new promises: bankLogs = splitString(data, ';')
So It should be:
let readData = new Promise(function (resolve, reject) {
fs.readFile('/home/geek/Desktop/activity-logs.csv', 'utf8', (err, data) => {
if (err)
reject();
resolve(data);
});
});
readData.then((data) => {
var bankLogs = splitString(data, ';')
for (let index = 2; index < bankLogs.length; index += 5) {
objectOfUsers[bankLogs[index]] = {}
temporarySymbols.push(bankLogs[index].concat(bankLogs[index + 1]));
}
Object.keys(objectOfUsers).forEach(function (element) {
objectKeys.push(element)
});
for (let index = 0; index < objectKeys.length; index++)
createObject(index);
console.log(objectOfUsers)
})
.catch((err) => console.log('Error happened : ' + err));
If you use bankLogs inside Promise only, make it private.
Promise chain approach we use mostly for good code readability and handling one error callback for all promises.
Edit
You can pass value through Promise chain by using some wrapper object or list of items (example):
'use strict';
var fs = require('fs');
let readData = new Promise(function (resolve, reject) {
fs.readFile('/Users/maxim/Appsflyer/projects/ZEVEL/file1.txt', 'utf8', (err, data) => {
if (err)
reject();
var obj = {
data: data,
bankLogs: {} // in 1st Promise initialize bankLogs
};
resolve(obj);
});
});
// 2nd dummy Promise
let newReadData = new Promise(function (resolve, reject) {
fs.readFile('/Users/maxim/Appsflyer/projects/ZEVEL/file2.txt', 'utf8', (err, data) => {
if (err)
reject();
resolve(data);
});
});
readData.then((obj1) => {
obj1.bankLogs.value = "someValue";
return newReadData.then(function(data2){
obj1.data2 = data2;
return obj1;
});
}).then((dataTotal) => {
console.log(dataTotal);
})
.catch((err) => console.log('Error happened : ' + err));

Categories