איך עובד קוד אסינכרוני בJS?

nigun

@dovid
אם אני משווה את זה לPHP, אז בPHP אפשר לקרוא לפקודה חיצונית דרך exec
ולשים && בסוף ולא לחכות לתוצאה.

אבל בשונה מPHP, בJS אפשר לקבל את התוצאה מהפקודה האסינכרונית בהמשך הסקירפט.
הבנתי נכון או שיש כאן עוד קטע?

dovid

@nigun לא, זה לא דומה לexec. זה פשוט תזמון פעולות לאחרי שיקרה דברים.
קח דוגמא את הקוד הזה בPHP:

<?php
$website_page = file_get_contents('http://www.google.com/');
echo $website_page ;
?>

אם יהפכו את PHP להיות כמו JS אז הקוד ייראה ככה:

<?php
file_get_contents_with_callback('http://www.example.com/', function ($website_page ) {
            echo $website_page;
        });
echo "Below the google page content: <br>";
?>

nigun

@dovid
ומה יקרה אם אני לא יכניס אותו לקולבאק?
ומה קורה אם אני רוצה לקבל ערכים (int) ממספר כתבות
ולעשות sum על כולם?

dovid

@nigun אמר באיך עובד קוד אסינכרוני בJS?:

@dovid
ומה יקרה אם אני לא יכניס אותו לקולבאק?

לא הבנתי. אם לא יהיה בקוד בקאלבק, אז לא יהיה קוד. עדיין הקובץ יירד אבל זה יהיה קצת לא שמיש...

ומה קורה אם אני רוצה לקבל ערכים (int) ממספר כתבות
ולעשות sum על כולם?

אם אתה רוצה כמה כתובות ולעשות משהו מכולם יחד אתה אכן באתגר, כי הרי לכל אחד יש הקשר עצמאי לחלוטין.
בשביל אתגרים כאלה ואחרים עשו את Promise, אבל גם לפני Promise אתה יכול לחשוב על רעיונות פשוטים (למשל: אתה מכין משתנה לסיכום הערכים, ומשתנה נוסף שסופר כמה כתובות בוצעו. בכל קאלבק אתה גם מוסיף את התוצאה לסיכום וגם מפחית את הערך של המונה ב1, וגם בודק אם נשאר עוד כתובות להורדה. ברגע שהתשובה שלילית אתה יכול לבצע את הפעולה הסופית שרצית לעשות עם הסיכום הכולל).
היה מחלקה מפורסמת בשם async שעשתה הרבה דברים שקשורים לאתגרים הללו שמציב האופי הקאלבקי. כיום Promise פותר את רובם בוצרה קלה מאוד.

nigun

@dovid
שוטטי קצת ברחבי הרשת להבין מה זה Promise
וזה מה שהבנתי:
הPromise שומר את הערך במשתנה בזיכרון (או אולי מערך)
ואז אפשר לגשת למשתנה הנ"ל מכל מקום בקוד ולבדוק את הערך.

ואם אני מדגים את זה בגו

var x string
go func(){
x = "foo"
time.Sleep(200 * time.Millisecond)
}()

time.Sleep(100 * time.Millisecond)
		fmt.Println(x)

כאן אני יוצר את המשתנה X מכניס לו ערך
ושולף אותו בכל מקום שאני רוצה.

אמנם Promise קצת יותר משוכלל
והוא מכיל סוג של מערך של משתנים, האם הפעולה בוצעה וכו'

הבנתי נכון?

yossiz

@nigun אמר באיך עובד קוד אסינכרוני בJS?:

הבנתי נכון?

לא.

פרומיסים באו לעולם כדי לתת תחביר יותר נוח ל-callback-ים השנואים.

לדעתי הסדר הנכון להבין טוב את הענין הוא כך:
א) תבין למה צריך callback-ים ב-JS.
ב) תבין למה אנשים מדברים בכזו שנאה כלפי callback-ים (או שזה כבר מובן מאליו...)
ג) תלמד איך פרומיסים פתרו את הבעיה.
ד) תלמד איך התחביר של async await מוסיף כמות עצומה של סוכר.

אהרן

@nigun אמר באיך עובד קוד אסינכרוני בJS?:

הבנתי נכון?

Promise בא לתת מענה על התנהגות אותה הגדרת "לא הבנתי"
ועוד לפני ששמענו אם הבנת את ההסבר
נדלקת על מושג חדש ששמעת
אז הנה אתרום גם את חלקי
יש גם await שזו שיכבה עליונה יותר
ויש עוד כמה שהאחרונה מהם הם הפיקסלים על המסך..

nigun

@yossiz
נתחיל ממה שהבנתי מה זה callback
בJS הדרך לנהל את התוצאה שמתקבל מבקשת HTTP (למשל)
היא לעשות פונקציה בתוך פונקציה
וכך אנחנו תופסים את התגובה, בלי שהיא "תברח" לנו

מכיוון שלפעמים צריך לכתוב כמה callback-ים אחד בתוך השני
זה מסבך את העניינים (גהנום בלע"ז).

לכן הוסיפו את פרומיס ושות'
שינהלו את זה בצורה שונה.

עכשיו הבנתי נכון? (אני מנחש שלא )

אהרן

@nigun אמר באיך עובד קוד אסינכרוני בJS?:

עכשיו הבנתי נכון? (אני מנחש שלא )

כן.

אבל המושג "צורה שונה" סתמי מדי.

יש אתגר ופתרון
הבנת את האתגר? הבנת את הפתרון? הוא נראה לך הגיוני?

אהרן

@nigun אמר באיך עובד קוד אסינכרוני בJS?:

לפני כשנה כשהייתי בPHP ניסתי ללמוד נוד
אבל לא הצלחתי לקלוט את הקטע של קוד אסינכרוני
עכשיו אחרי שהבנתי את הרעיון בGO אני מנסה לחזור ולהבין את נוד
אבל כנראה אני קשה הבנה , כי אני לא מתליח לקלוט את הנקודה.

ברשותכם אני יביא קוד אסינכרוני בGO
ואתה תגידו לי איך זה נראה בנוד
ואולי אני יבין?

בא נתחיל עם משהו בסיסי (לא מצאתי משהו יותר פשוט)
package main

import (
	"fmt"
	"time"
)

func say(s string) {
	for i := 0; i < 5; i++ {
		time.Sleep(100 * time.Millisecond)
		fmt.Println(s)
	}
}

func main() {
	go say("world")
	say("hello")
}
(אני לא צריך קוד בJS שיעשה בדיוק אותו דבר
רק להבין את הרעיון)

הבאת דוגמא של Println, ואז אתה שואל על שמירת התוצאה
תן לנו דוגמא איך ב-go אתה שומר את התשובות שמתקבלות מהפונקציות הא-סינכרוניות, יהיה יותר קל להסביר עם "דוגמא דומה".

nigun

@אהרן
אני מקווה שאני לא משגע כאן את הציבור
אבל לי יש הרגלי למידה מוזרים
ואני לומד דברים מהאמצע, ואז חוזר לבסיס.

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

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

nigun

@אהרן אמר באיך עובד קוד אסינכרוני בJS?:

הבאת דוגמא של Println, ואז אתה שואל על שמירת התוצאה
תן לנו דוגמא איך ב-go אתה שומר את התשובות שמתקבלות מהפונקציות הא-סינכרוניות, יהיה יותר קל להסביר עם "דוגמא דומה".

מה הכוונה "שומר"
כשאני אומר שומר אני מתכוון לכל שימוש בערך
זה יכול להיות הדפסה,שמירה במסד נתונים או כל שימוש אחר.

אהרן

@nigun אמר באיך עובד קוד אסינכרוני בJS?:

מה הכוונה "שומר"

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

"לשמור" התכוונתי במשתנה מקומי (או גלובלי, שהוא עדיין מקומי רק בסקופ אחר).

yossiz

@nigun אמר באיך עובד קוד אסינכרוני בJS?:

בJS הדרך לנהל את התוצאה שמתקבל מבקשת HTTP (למשל)
היא לעשות פונקציה בתוך פונקציה
וכך אנחנו תופסים את התגובה, בלי שהיא "תברח" לנו

הבנת טוב טוב למה אי אפשר לתפוס אותה במשתנה פשוטה?
אם כן אתה על דרך המלך. אבל עוד לא הגעת ליעד...
אתה צודק שפרומיס עוזר לנו לתפוס את התשובה במשתנה.
אבל פספסת עוד נקודה חשובה שחוץ ממה שאחנו רוצים שלא יברח לנו אנחנו גם חייבים לקבל הודעה על סיום הפעולה. ואז נרצה להמשיך את שרשרת הפעולות עם השלב הבא.
כבר הזכרנו למעלה שאי אפשר בשום מחיר להפסיק את ה-thread הראשי שיחכה לאירוע מסויים.
אז חייבים callback-ים.
עכשיו האתגר שעמדה לפני מהנדסי השפה הוא למצוא את הדרך הכי אלגנטית לתכנת עם ספגטי של callback-ים...

מה שכתבת למעלה לא מדוייק כי:

הPromise שומר את הערך במשתנה בזיכרון (או אולי מערך)

אתה חשבת על פתרון אחד לבעיה שאותה הבנת, (שאי אפשר לתפוס את הערך של התשובה). הפתרון של פרומיס הוא בצורה שונה. לא במשתנה גלובלי.

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

כנ"ל, אי אפשר לגשת ישירות למשתנה כמו במשתנה גלובלי.
אפשר למסור ל-runtime פונקציה שמורצת עם התשובה כארגומנט.

nigun

@yossiz
מה הבעיה לעצור את הthread?
ומה בעצם הפתרון?
(אני כנראה עדיין חושב בראש של גו
ששם עוצרים את הthread עד לקבלת תוצאה)

yossiz

@nigun אמר באיך עובד קוד אסינכרוני בJS?:

מה הבעיה לעצור את הthread?

כי אין thread אחר. יש רק אחד. אם תעצור את ה-thread תגרום לפקק רציני. כל הדף יתקע (במקרה של דפדפן). או במקרה של נוד, כל השרת יתקע.
אה, אז למה לא נעשה כמה thread-ים? כי זה יקר, וזה בדיוק מה שנוד מנסה לחסוך.

nigun

@yossiz
בסדר
אז מה הפתרון?

אהרן

@nigun אמר באיך עובד קוד אסינכרוני בJS?:

ששם עוצרים את הthread עד לקבלת תוצאה)

בטוח?
ואם אני מפעיל לולאה 800 שמריצה בכל פעם פונקציה עם go
היא אוספת thread מכל העיר?

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

אהרן

@nigun אמר באיך עובד קוד אסינכרוני בJS?:

אז מה הפתרון?

לקרוא שוב ועכשיו להבין את התשובה .

yossiz

@nigun אמר באיך עובד קוד אסינכרוני בJS?:

אז מה הפתרון?

callback.
מה זה? נסביר,
אבל לפני כן שווה להכיר את ה-event loop של JS (למרות שדוד טען שזה לא הכרחי...)
ה-thread הראשי של JS אוחז בלולאה אחת גדולה כל משך חיותו. הלולאה הזאת מריץ חתיכות קוד, כשהוא מגיע לסוף הקטע הוא בודק את התור של משימות אם יש עוד משימות. אם יש הוא מריץ אותם ושוב חוזר לבדוק אם יש עוד משימות. ה-thread נמצא במצב idle רק כאשר אין עוד משימות.
כאשר אתה מריץ בקשת http למשל, אז לחכות עד שזה יסתיים אסור כי זה יתקע את ה-thread, אז מה אתה עושה? אתה אומר ל-runtime "תריץ בשבילי את הבקשה הזאת, וכאשר הוא יסתיים תריץ את הפונקציה הזאת - ה-callback עם התשובה של הבקשה כארגומנט".
עכשיו ה-runtime לוקח את הבקשה ואת ה-callback, שולח את הבקשה ומסמן לעצמו משימה חדשה לבדוק בכל איטרציה של הלולאה אם הבקשה הסתיימה. אם לא, נעבור למשימה הבאה, אם כן, נריץ את פונקציית ה-callback.

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

איך עובד קוד אסינכרוני בJS?