async ב - forEach

מנצפך

אסביר את הבעיה.
אני מקבל מה ORM רשומות מה DB.
אני רוצה לעשות מניפולציה על כל רשומה, להוסיף לה פרטים נוספים מה DB.
(sum של משהו).
קבלת הנתונים הנוספים מתבצעת ב await. מה שקורה שהפונקציה ממשיכה הלאה ומחזירה לקליינט את הנתונים בלי התוספת המבוקשת.
זו בעיה קלאסית של סינכרון ב JS.

dovid

אתה רוצה שהקליינט יקבל רשימה כשהכל יסתיים?
או שכל רשומה שמסתיימת נשלחת אליו?

מנצפך

כשהכל מסתיים.

dovid

אל תשתמש עם forEach.
תעשה map שמחזיר עבור כל שורה async של העדכון, משהו כזה:

var tasks = rows.map(async function(row){
  return await updateRow(row);
});

אחרי זה תמתין לסיום כולם ע"י Promise.all:

Promise.all(tasks).then(function(newlist){
  //החזרה ללקוח
  console.log(newlist)  ;
});

מנצפך

@dovid זה עובד מעולה!!
אבל אני מבין שזה קצת טריקי. לא?

dovid

@מנצפך אמר בasync ב - forEach:

@dovid זה עובד מעולה!!
אבל אני מבין שזה קצת טריקי. לא?

ממש לא, זה לפי הספר.

zvizvi

@מנצפך אמר בasync ב - forEach:

אבל אני מבין שזה קצת טריקי. לא?

זה טריקי.

אהרן

@zvizvi אמר בasync ב - forEach:

@מנצפך אמר בasync ב - forEach:

אבל אני מבין שזה קצת טריקי. לא?

זה טריקי.

אבל הטריק מתבצע פעם אחת ואז השימוש רגיל
בשונה מהקוד של דוד שארוך ומורכב יותר בכל פעם.

אהרן

@dovid אמר בasync ב - forEach:

אל תשתמש עם forEach.
תעשה map שמחזיר עבור כל שורה async של העדכון, משהו כזה:
var tasks = rows.map(async function(row){
  return await updateRow(row);
});
אחרי זה תמתין לסיום כולם ע"י Promise.all:
Promise.all(tasks).then(function(newlist){
  //החזרה ללקוח
  console.log(newlist)  ;
});

נסיתי לחקות את ההמתנה לשרת ע"י setTimeOut כך

var tasks = [1,2,3].map(async function(row){
  return await setTimeout(() => row*2, Math.random() )
});

Promise.all(tasks).then(function(newlist){
  console.log(newlist)  ;
});

אבל זה גם מחזיר מספרים לא נכונים וגם המספרים שחוזרים מצטברים וגדלים בכל הרצה.
מה לא נכון?

מנצפך

@אהרן אולי צריך לעשות row*=2.

dovid

דבר ראשון אני לא מבין את הקוד שלי (מראשית האשכול), יש בו טעות.
אם עושים await אז הלולאה נתקעת והערך החוזר הוא לא promise אלא התוצאה, ממילא הPromise.all מיותר (זה עובד כי Promise.all עובד גם על רשימת ערכים). הקוד הנכון הוא או הסרה של הasync+await:

var tasks = rows.map(function(row){
   return updateRow(row);
});

השארה של הasync+await והמרה של הPromise.all ללולאה רגילה על הtasks (שבעצם לא תכיל מערך פרומייז אלא מערך rows), גם תעבוד, אבל אני חושש שזה לא יעיל (תלוי באופן בו הawait עובד, אני הולך לבדוק את זה).

בנוגע לך @אהרן
א. setTimeout לא מחזיר את הערך של הפונקציה אלא מזהה מספרי שעוזר לבטל אותו בהמשך עם clearTimeout.
ב. בשביל ליצור פרומייז (שלוקח זמן) אתה חייב ליצור new Promise, ולדאוג שהקאלבק המוצלח יקרא לreslove כשהתוצאה (אם ישנה) מועברת כפרמטר.

אז בשביל Promise.all תכתוב ככה:

var tasks = [1,2,3].map(function(row){
  return new Promise((reslove) => 
     setTimeout(() => reslove(row*2), Math.random())
  );
});

Promise.all(tasks).then(function(newlist){
  console.log(newlist)  ;
});

בשביל async+await ככה:

var values = [1,2,3].map(async function(row){
  return await new Promise((reslove) => 
     setTimeout(() => reslove(row*2), Math.random())
  );
});

console.log(values)  ;

dovid

טוב, בקשר לקוד השני האחרון, אני טעיתי שוב ולקח לי זמן להבין למה.
לפי דברי, הvalues אמור להכיל רשימה של מספרים - התוצאות. וניסיתי בקונסול, ולא, זה מחזיר רשימה של פרומייז...
קודם כל, למה אני חושב שזה חייב להחזיק מספרים ולא פרומייז? כי await Promise מחזיר תוצאה פרימיטיבית ולא פרומייז (ההשמה וכל מה שאחריה מתבצעת מאוחר מתי שהקאלבק נקרא, זה בעצם מאחורי הקלעים מומר לthen של פרומייז).
אבל כשעושים map ונותנים פונקציה מסוג async, אני מבין שכנראה במקום שעבור כל איבר יוכנס תוצאת הקאלבק, מאחורי הקלעים הפונקציה הזו הופכת לאובייקט פרומייז חדש, שעוטף את הפרומייז הפנימי.

אקיצער, אין טעם לעשות async+await בפונקציית הmap. אלא יש להשתמש בפוקנציה רגיל שמחזירה פרומייז ואח"כ לעשות Promise.all.

מנצפך

@dovid אצלי זה כבר עובד תקופה מאז שכתבת את הקוד הראשון.
מעניין איך עשיתי בסוף.

dovid

@מנצפך אמר בasync ב - forEach:

@dovid אצלי זה כבר עובד תקופה מאז שכתבת את הקוד הראשון.
מעניין איך עשיתי בסוף.

נכון, הוא יעבוד, אבל הוא מסורבל.
צריך להסיר את הasync+await.

אהרן

@dovid אמר בasync ב - forEach:

אקיצער, אין טעם לעשות async+await בפונקציית הmap. אלא יש להשתמש בפוקנציה רגיל שמחזירה פרומייז ואח"כ לעשות Promise.all.

כלומר כך:

var values = [1,2,3,4,5,6,7,8,9].map(function(row){
  return new Promise((reslove) => 
     setTimeout(() => reslove(row*2), Math.random()*2000)
  );
});


Promise.all(values).then(function(newlist){
  console.log(newlist)  ;
});

יש לך מושג אם הפונקציה שבתוך ה-map רצה על כל האיטרציות במקביל או שהם ממתינים אחת על השניה?

אהרן

@אהרן אמר בasync ב - forEach:

יש לך מושג אם הפונקציה שבתוך ה-map רצה על כל האיטרציות במקביל או שהם ממתינים אחת על השניה?

זה

console.time('test1')
var values = [1,2,3,4,5,6,7,8,9].map(function(row){
  return new Promise((reslove) => {
     var rndom = Math.random()*2000;
     console.log(rndom)  ;
     setTimeout(() => reslove(row*2), rndom)
  });
});


Promise.all(values).then(function(newlist){
  console.timeEnd('test1')
  console.log(newlist);
});

מוכיח שבמקביל.

אהרן

מה אתם אומרים על זה:

function asyncMap(task) {
	return Promise.all(
		this.map(function(row){
			return new Promise((reslove) => {
				task(row, reslove);
			});
		})
	);
}

Array.prototype.asyncMap = asyncMap;

[1,2,3,4,5,6,7,8,9].asyncMap( function(row, reslove){
	setTimeout(() => reslove( row*2), Math.random()*3000);
})
.then(function(newlist){
  console.log(newlist);
});

dovid

@אהרן יפה מאוד!
תתקן בtask שבתוך הפרומייז להוסיף return או שתמחק את הסוגריים המסולסלות והנקודה פסיק.

אהרן

@dovid אמר בasync ב - forEach:

להוסיף return

בשביל מה?

dovid

@אהרן אמר בasync ב - forEach:

@dovid אמר בasync ב - forEach:

להוסיף return

בשביל מה?

צודק, טעיתי בקריאת הקוד.

תחומים - פורום חרדי מקצועי

async ב - forEach