JavaScript Promises ו-Async/Await מוסברים
תחשבו על הזמנת פיצה באינטרנט.
אתם מבצעים את ההזמנה. אתם לא עומדים ליד הדלת ולא עושים כלום עד שהיא מגיעה. אתם צופים בסרטונים, עובדים או מדברים עם חברים. כשהפיצה מגיעה, אתם אוכלים.
JavaScript עובדת באותו אופן.
פעולות כמו בקשות API, קריאות למסד נתונים וטיימרים לוקחות זמן. אם JavaScript הייתה מחכה שכל משימה תסתיים, האפליקציה שלכם הייתה קופאת. במקום זאת, JavaScript מריצה קוד אחר בזמן שהיא מחכה לתוצאות.
מה זה Promise?
Promise הוא "מקום שמור" (placeholder) עבור ערך שתקבלו בעתיד.
כשאתם מריצים:
const promise = fetch("/users");
הנתונים עדיין לא שם. ה-Promise אומר: "אין לי את התוצאה כרגע, אבל אגיד לכם כשהיא תהיה מוכנה".
ל-Promise יש שלושה מצבים:
- Pending (בהמתנה)
- Fulfilled (הצלחה)
- Rejected (כישלון)
רוב ה-APIs המודרניים כמו fetch() מחזירים Promise באופן אוטומטי. אתם לא צריכים ליצור אותם ידנית בכל פעם. אתם פשוט משתמשים בהם.
מה עושה .then()?
אנשים רבים חושבים ש-.then() שולף נתונים. הוא לא עושה זאת.
.then() רושם פונקציית callback. אתם אומרים ל-JavaScript: "כשה-Promise הזה יסתיים, הרץ את הפונקציה הספציפית הזו".
זה כמו אפליקציית משלוחי אוכל. אתם מזמינים אוכל, והאפליקציה אומרת לכם: "תתקשרו אליי כשהאוכל מגיע". הפונקציה מחכה לאות.
למה להשתמש ב-Async/Await?
ניתן לשרשר קריאות של .then() כדי לקבל נתונים שלב אחר שלב. זה עובד, אבל שרשראות ארוכות הן קשות לקריאה.
Async/await גורם לקוד שלכם להיראות כמו קוד רגיל, שלב אחר שלב. זה נקי יותר וקל יותר לעקוב אחריו.
האם await חוסם את JavaScript?
זו שאלה נפוצה בראיונות עבודה. התשובה היא לא.
כש-JavaScript נתקלת במילת המפתח await, היא עוצרת רק את הפונקציה ה-async הספציפית הזו. שאר האפליקציה שלכם ממשיכה לרוץ.
זרימת דוגמה:
- הרצת קוד בתוך הפונקציה.
- הגעה ל-
awaitועצירת הפונקציה. - הרצת שאר הסקריפט.
- ברגע שהמשימה מסתיימת, המשך הפונקציה.
סיכום:
- Promise = ערך עתידי.
fetch()= מחזיר Promise..then()= הרץ את הפונקציה הזו כשהיא מוכנה.await= עצור את הפונקציה הזו, לא את כל התוכנית.- async/await = דרך נקייה יותר לכתוב Promises.
מקור: https://dev.to/aarthirs/javascript-promises-asyncawait-explained-with-a-real-life-example-43bm