הסבר של async ועל await

תמלול ההרצאה: הסבר של async ועל await

הטקסט המלא של הדקות הראשונות בהרצאה «הסבר של async ועל await» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.

1. 00:02

   אז אנחנו רוצים לטפל בבעיית ה-callback hell הזאת ואפשר לטפל בה בצורה אלגנטית רק אם הפונקציה מחזירה promise ואיך זה מתבצע. דבר ראשון, מה שאנחנו צריכים לעשות זה להבין אם הפונקציה מחזירה promise אז תמיד בעצם יקראו לה על ידי then וcatch ואז יש מילה שמורה או למעשה צמד מילים שמורות בג'אווה סקריפט, שאם אנחנו משתמשים בהם אז אנחנו לא צריכים

2. 00:39

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

3. 00:56

   אנחנו משתמשים עם צמד המילים הנחמדות האלה, שתכף נראה מה הם, והמערכת הופכת את זה לקוד הזה. ושימו לב שתמיד הדן מקבלת את ה-result שנשלח ל-resolve, את התשובה שנשלח ל-resolve, ותמיד ה-catch, התפקיד שלה, זה לדווח שגיאה.

4. 01:16

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

5. 01:26

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

6. 01:46

   יש לנו פונקציה, נקרא לה Execute או Do Work או לא משנה מה השם שלה. הנה הפתיחה שלה, הנה הסגירה שלה ואנחנו רוצים פשוט לקרוא לה Do Work. זה הדבר הראשון, הקטע קוד שלנו צריך להיות בתוך פונקציה.

7. 02:09

   הדבר הבא, אנחנו מגדירים שהפונקציה היא async. ככה אנחנו מגדירים את זה, async, ואז function, ואז הפונקציה עצמה, ואז מה שאנחנו צריכים לעשות זה פשוט לקרוא לכל אחת מהפונקציות האסינכרוניות עם המילה await לפניה, ומה שזה עושה זה פשוט מפעיל את הפונקציה, ומקבל בחזרה את האובייקט פרומיס,

8. 02:42

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

9. 02:58

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

10. 03:20

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

11. 03:49

    אנחנו לא יכולים פתאום בגלל שאמרתי לו ה-wait לגרום לזה לעבוד יותר מהר. אולי אני גולש לאיזשהו שרת מורחק שכן לוקח לו 10 שניות להביא לי תשובה.

12. 03:58

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

13. 04:19

    אז התוכנית לא תמשיך לרוץ, זאת נקודה חשובה כי יש פה המתנה, היא לא תמשיך לרוץ אבל היא כן תשחרר את ה-call stack בכדי לתת שירות לשאר קוד ה-JavaScript שיש לנו באפליקציה.

14. 04:39

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

15. 05:02

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

16. 05:19

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

17. 05:37

    בואו נעשה את כל הקוד שלנו. הנה נ"מ 1, נ"מ 2, נ"מ 3 ונ"מ 4. וכאן אנחנו בעצם שלחנו אותם, נכון? זה היה נ"מ 1,